Fix: bug regarding the fact that the search and loadMoreOffers functi…

…on do not share state

src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js

@@ -69,8 +69,6 @@ const OfferItemsContainer = ({
         return (overflowY === "scroll" || overflowY === "auto") && node.scrollHeight > node.clientHeight;
     }, []);
 
-    // BUG: there is no refetching of new offers when the initial_limit is not enough
-
     const refetchTriggerRef = useCallback((node) => {
         if (node) setOfferResultsWrapperNode(node.parentElement);
     }, []);

src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js

@@ -61,6 +61,9 @@ OffersList.propTypes = {
     showSearchFilters: PropTypes.bool.isRequired,
     toggleShowSearchFilters: PropTypes.func.isRequired,
     offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
+    moreOffersLoading: PropTypes.bool,
+    loadMoreOffers: PropTypes.func,
+    searchQueryToken: PropTypes.string,
 };
 
 const OfferWidgetSection = ({

src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js

@@ -55,6 +55,8 @@ OffersList.propTypes = {
     toggleShowSearchFilters: PropTypes.func.isRequired,
     offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
     moreOffersLoading: PropTypes.bool,
+    loadMoreOffers: PropTypes.func,
+    searchQueryToken: PropTypes.string,
 };
 
 export const OfferViewer = ({

src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsUtils.js

@@ -1,4 +1,4 @@
 export const SearchResultsConstants = {
-    INITIAL_LIMIT: 2,
-    FETCH_NEW_OFFERS_LIMIT: 1,
+    INITIAL_LIMIT: 15,
+    FETCH_NEW_OFFERS_LIMIT: 10,
 };

src/components/HomePage/SearchResultsArea/SearchResultsWidget/useOffersSearcher.js

@@ -1,5 +1,5 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useCallback, useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import {
     resetOffersFetchError,
     setLoadingOffers,
@@ -16,12 +16,26 @@ import {
 export default (filters) => {
 
     const dispatch = useDispatch();
+    const searchQueryToken = useSelector((state) => state.offerSearch.queryToken);
 
-    // TODO: Move this to redux!!!
     const [hasMoreOffers, setHasMoreOffers] = useState(true);
     const [moreOffersFetchError, setMoreOffersFetchError] = useState(null);
     const [moreOffersLoading, setMoreOffersLoading] = useState(false);
 
+    // The "search" and "loadMoreOffers" functions do not share the same state;
+    // When we run "setHasMoreOffers(false)" on the "loadMoreOffers" function,
+    // the "search" function does not know that the "hasMoreOffers" variable has changed;
+    // In the same way, when we run "setHasMoreOffers(true) on the "search" function,
+    // the "loadMoreOffers" function does not know that the "hasMoreOffers" variable has changed;
+    // Then, when the "loadMoreOffers" function is executed after a previous execution where the
+    // "hasMoreOffers" variable became "false", the state of this variable is still false, which
+    // prevents the fetching of new offers.
+    // Knowing that, I needed a way to set the "hasMoreOffers" variable to "true" when the previous fact
+    // happens: setting the "hasMoreOffers" to true when the "queryToken" (which is stored in redux) changes
+    useEffect(() => {
+        setHasMoreOffers(true);
+    }, [searchQueryToken]);
+
     // isInitialRequest = true on the first time the search request is made
     // the following request will have isInitialRequest = false
     const loadOffers = useCallback((isInitialRequest) => async (queryToken, limit) => {