Fetch and display lists of an user-CodePudding

I have a profile page that displays the user info. The page shows the user name / email and a button to create a list.

I can also edit the name and email correctly, and it reflects in the firebase instantaneously. Ok. I get the user data and I can edit it.

What I'm trying to do now is to show the lists that the user has created.

Look, this user has created one list, and what is returned to me is that he doesn't have lists.

I'll try to shorten the code as much as possible:

<script>
    imports.....
  import { db } from '../../firebase.config.js'


let listings = []

let auth = getAuth()

    // fetch the user's listings
  
    const fetchUserListings = async () => {
  
        const listingsRef = collection(db, 'listings')

        const q = query(
            listingsRef,
            where('userRef', '==', auth.currentUser.uid),
            orderBy('timestamp', 'desc')
        )

        const querySnap = await getDocs(q)

        querySnap.forEach((doc) => {
            return listings.push({
                id: doc.id,
                data: doc.data()
            })
        })
    }

    fetchUserListings()
  
</script>

        <!-- display the user's listings -->
    

<div>

        {#if listings.length > 0}
            <p >My lists</p>
            {#each listings as listing}
                <ListingItem listing={listing.data} id={listing.id} />
            {/each}
        {:else}
            <p >You have no lists</p>
        {/if}

</div>

My ListItem component:

<script>
    export let listing
    export let id
    export let handleDelete
    import DeleteIcon from '../../static/assets/svg/deleteIcon.svg'
</script>

<li >
    <a href={`/category/${listing.type}/${id}`} >
        <img src={listing.imgUrls[0]} alt={listing.name}  />
        <div >
            <p >
                {listing.location}
            </p>
            <p >
                {listing.name}
            </p>
            <p >
                ${listing.offer ? listing.discountedPrice : listing.regularPrice}
                {listing.type === 'rent' ? '/ por mês' : ''}
            </p>
            <div >
                <img src="/assets/svg/bedIcon.svg" alt="cama" />
                <p >
                    {listing.bedrooms > 1 ? `${listing.bedrooms} camas` : `${listing.bedrooms} cama`}
                </p>
                <img src="/assets/svg/bathtubIcon.svg" alt="banheiro" />
                <p >
                    {listing.bathrooms > 1
                        ? `${listing.bathrooms} banheiros`
                        : `${listing.bathrooms} banheiro`}
                </p>
            </div>
        </div>
    </a>
    {#if handleDelete}
        <DeleteIcon
            
            fill="rgb(231, 76, 60)"
            onClick={() => {
                handleDelete(listing.id, listing.name)
            }}
        />
    {/if}
</li>

Just when you think you've reached the simplest part, it's still tough.

Update:

I think that the problem is in firebase. The "docs" are empty:

Now I am in serious trouble!

CodePudding user response：

querySnap.forEach((doc) => {
  return listings.push({
    id: doc.id,
    data: doc.data()
  })
})

I see two things here. The less important: The .forEach() method returns undefined, so the return is redundant. The more important: the .push() alone won't automatically trigger updates. Have a look at this section in the Docs
Did you try logging listings? I assume the data is there, it's just not displayed, so I propose to change this part to

querySnap.forEach((doc) => {
  listings = [...listings, {
    id: doc.id,
    data: doc.data()
  }]
})

querySnap.forEach((doc) => {
  listings.push({
    id: doc.id,
    data: doc.data()
  })
  listings = listings
})