Add: search offers infinite scrolling working correctly

NIAEFEUP · Feb 13, 2022 · 11ee4c0 · 11ee4c0
1 parent 088a5c3
commit 11ee4c0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/components/HomePage/SearchArea/SearchArea.js b/src/components/HomePage/SearchArea/SearchArea.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 
 import { connect } from "react-redux";

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js
@@ -71,6 +71,10 @@ const OfferItemsContainer = ({
         if (node) setLastOfferNode(node);
     }, []);
 
+    useEffect(() => {
+        setOffset(offers?.length);
+    }, [offers]);
+
     useEffect(() => {
 
         if (loading || infiniteScrollLoading) {
@@ -96,7 +100,7 @@ const OfferItemsContainer = ({
             }
         });
         if (lastOfferNode) observer.current.observe(lastOfferNode);
-    }, [addSnackbar, hasMore, infiniteScrollError, infiniteScrollLoading, lastOfferNode, loading, offers]);
+    }, [addSnackbar, hasMore, infiniteScrollError, infiniteScrollLoading, lastOfferNode, loading]);
 
     const handleOfferSelection = (...args) => {
         toggleShowSearchFilters(false);

diff --git a/src/hooks/useLoadMoreOffers.js b/src/hooks/useLoadMoreOffers.js
@@ -37,24 +37,26 @@ export default ({ offset, setOffset, fetchMoreOffers }) => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const [offers, setOffers] = useState(oldOffers);
+    const [fetchedOffsets, setFetchedOffsets] = useState([]);
 
     useEffect(() => {
         setOffers(oldOffers);
     }, [oldOffers]);
 
     useEffect(() => {
         setOffset(0);
+        setHasMore(true);
         setError(null);
         setLoading(false);
+        setFetchedOffsets([]);
     }, [setOffset, submitNumber]);
 
     useEffect(() => {
 
         const fetchOffers = async () => {
 
-            if (!fetchMoreOffers || error) return;
-
             try {
+                setFetchedOffsets((offsets) => [...offsets, filters.offset]);
                 const query = parseFiltersToURL(filters);
                 const res = await fetch(`${API_HOSTNAME}/offers?${query}`, {
                     method: "GET",
@@ -66,7 +68,6 @@ export default ({ offset, setOffset, fetchMoreOffers }) => {
                         error: res.status,
                     });
                     setLoading(false);
-
                     return;
                 }
                 const offersData = await res.json();
@@ -91,18 +92,23 @@ export default ({ offset, setOffset, fetchMoreOffers }) => {
                     error,
                 });
                 setLoading(false);
+                return;
             }
         };
 
-        fetchOffers().catch((error) => {
-            setError({
-                cause: ErrorTypes.UNEXPECTED,
-                error,
+        if (fetchMoreOffers && !fetchedOffsets.includes(filters.offset) && !initialOffersLoading && !loading) {
+            fetchOffers().catch((error) => {
+                setError({
+                    cause: ErrorTypes.UNEXPECTED,
+                    error,
+                });
             });
-        });
-
-    }, [dispatch, filters, initialOffersLoading, oldOffers, offset, loading, error, fetchMoreOffers]);
+        }
 
+    }, [
+        dispatch, fetchMoreOffers, filters, oldOffers, initialOffersLoading, offset,
+        fetchedOffsets, submitNumber, hasMore, loading, offers,
+    ]);
 
     return { offers, hasMore, loading, error };
 };