Fix: load more offers when there is no scroll

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

@@ -62,6 +62,12 @@ const OfferItemsContainer = ({
 
     const [offerResultsWrapperNode, setOfferResultsWrapperNode] = useState(null);
     const [scrollPercentage, setScrollPercentage] = useState(0);
+    const [hasScroll, setHasScroll] = useState(undefined);
+
+    const isVerticalScrollable = useCallback((node) => {
+        const overflowY = window.getComputedStyle(node)["overflow-y"];
+        return (overflowY === "scroll" || overflowY === "auto") && node.scrollHeight > node.clientHeight;
+    }, []);
 
     // BUG: there is no refetching of new offers when the initial_limit is not enough
 
@@ -70,28 +76,44 @@ const OfferItemsContainer = ({
     }, []);
 
     const onScroll = useCallback(() => {
-        if (offerResultsWrapperNode)
+        if (offerResultsWrapperNode) {
             setScrollPercentage(
                 100 * offerResultsWrapperNode.scrollTop
                 / (offerResultsWrapperNode.scrollHeight - offerResultsWrapperNode.clientHeight)
             );
+
+        }
     }, [offerResultsWrapperNode]);
 
     useEffect(() => {
         if (!offerResultsWrapperNode) return;
+
         offerResultsWrapperNode.addEventListener("scroll", onScroll);
         // eslint-disable-next-line consistent-return
         return () => offerResultsWrapperNode.removeEventListener("scroll", onScroll);
     }, [offerResultsWrapperNode, onScroll]);
 
+    useEffect(() => {
+        if (!offerResultsWrapperNode) return;
+
+        setHasScroll(isVerticalScrollable(offerResultsWrapperNode));
+    }, [isVerticalScrollable, offerResultsWrapperNode, offers, initialOffersLoading, scrollPercentage, moreOffersLoading]);
+
+    useEffect(() => {
+        if (initialOffersLoading) {
+            setHasScroll(undefined);
+            setScrollPercentage(0);
+        }
+    }, [initialOffersLoading]);
+
     useEffect(() => {
 
         if (initialOffersLoading || moreOffersLoading) {
             return;
         }
 
-        if (scrollPercentage > 80) loadMoreOffers(searchQueryToken, SearchResultsConstants.FETCH_NEW_OFFERS_LIMIT);
-    }, [initialOffersLoading, loadMoreOffers, moreOffersLoading, scrollPercentage, searchQueryToken]);
+        if (scrollPercentage > 80 || hasScroll === false) loadMoreOffers(searchQueryToken, SearchResultsConstants.FETCH_NEW_OFFERS_LIMIT);
+    }, [hasScroll, initialOffersLoading, loadMoreOffers, moreOffersLoading, scrollPercentage, searchQueryToken]);
 
     const handleOfferSelection = (...args) => {
         toggleShowSearchFilters(false);

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

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

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

@@ -16,6 +16,8 @@ import {
 export default (filters) => {
 
     const dispatch = useDispatch();
+
+    // TODO: Move this to redux!!!
     const [hasMoreOffers, setHasMoreOffers] = useState(true);
     const [moreOffersFetchError, setMoreOffersFetchError] = useState(null);
     const [moreOffersLoading, setMoreOffersLoading] = useState(false);
@@ -24,12 +26,13 @@ export default (filters) => {
     // the following request will have isInitialRequest = false
     const loadOffers = useCallback((isInitialRequest) => async (queryToken, limit) => {
 
-        if (!hasMoreOffers) return;
-
         if (isInitialRequest) {
             dispatch(resetOffersFetchError());
             dispatch(setLoadingOffers(true));
+            setHasMoreOffers(true);
         } else {
+            if (!hasMoreOffers) return;
+
             setMoreOffersFetchError(null);
             setMoreOffersLoading(true);
         }