diff --git a/src/components/HomePage/SearchArea/SearchArea.js b/src/components/HomePage/SearchArea/SearchArea.js index b2dc981c8..06b311550 100644 --- 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 index eaa8dc71e..a25201993 100644 --- 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 index 30a47803c..4baf8ce30 100644 --- a/src/hooks/useLoadMoreOffers.js +++ b/src/hooks/useLoadMoreOffers.js @@ -37,6 +37,7 @@ 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); @@ -44,17 +45,18 @@ export default ({ offset, setOffset, fetchMoreOffers }) => { 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 }; };