fix last page of listing displaying extra (#290)

leowrites · Dec 7, 2023 · 852d214 · 852d214
1 parent 25a72ba
commit 852d214
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/P3/frontend/src/pages/ShelterDetail.js b/P3/frontend/src/pages/ShelterDetail.js
@@ -78,7 +78,11 @@ const ShelterDetail = () => {
                 const res = await PetListingService.getByShelter(shelterId, pageNum)
                 setBackendTotalPages(Math.ceil(res.data.count / 10));
                 setTotalPages(Math.ceil(res.data.count / listingsPerPage));
-                setListings(prevListings => [...prevListings, ...res.data.results]);
+                const newFetchedListings = res.data.results.filter(newListing => 
+                    !listings.some(existingListing => existingListing.id === newListing.id)
+                );
+
+                setListings(prevListings => [...prevListings, ...newFetchedListings]);
             }
             catch (err) {
                 setListings([])
@@ -136,7 +140,7 @@ const ShelterDetail = () => {
                     </div>
                     </Container>
                     <Container className="flex flex-col justify-center px-4">
-                        <div className={`grid ${currListings.length === 1 ? 'place-items-center' : 'grid-cols-1 lg:grid-cols-2'} gap-4`}>
+                        <div className={`grid ${currListings.length === 1 ? 'grid-cols-1 place-items-center' : 'grid-cols-1 lg:grid-cols-2'} gap-4`}>
                             {currListings.map((listing) => (
                                 <ShelterListingCard listing={listing} />
                             ))}