Fix: load more offers in search bug

NIAEFEUP · Mar 26, 2022 · c12ecd1 · c12ecd1
1 parent b564f32
commit c12ecd1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 9 deletions.
diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js
@@ -8,6 +8,7 @@ import OfferItem from "../Offer/OfferItem";
 import useSearchResultsWidgetStyles from "./searchResultsWidgetStyles";
 import LoadingOfferItem from "./LoadingOfferItem";
 import Offer from "../Offer/Offer";
+import { SearchResultsConstants } from "./SearchResultsUtils";
 
 const useAdvancedSearchButtonStyles = makeStyles((theme) => ({
     root: {
@@ -55,6 +56,7 @@ const OfferItemsContainer = ({
     offers,
     moreOffersLoading,
     loadMoreOffers,
+    searchQueryToken,
 }) => {
     const classes = useSearchResultsWidgetStyles();
 
@@ -73,10 +75,10 @@ const OfferItemsContainer = ({
 
         if (observer.current) observer.current.disconnect();
         observer.current = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) loadMoreOffers();
+            if (entries[0].isIntersecting) loadMoreOffers(searchQueryToken, SearchResultsConstants.FETCH_NEW_OFFERS_LIMIT);
         });
         if (lastOfferNode) observer.current.observe(lastOfferNode);
-    }, [initialOffersLoading, lastOfferNode, loadMoreOffers, moreOffersLoading]);
+    }, [initialOffersLoading, lastOfferNode, loadMoreOffers, moreOffersLoading, searchQueryToken]);
 
     const handleOfferSelection = (...args) => {
         toggleShowSearchFilters(false);

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js
@@ -12,7 +12,7 @@ import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
 const OffersList = ({
     noOffers, classes, selectedOfferIdx, offersLoading, setSelectedOfferIdx,
-    showSearchFilters, toggleShowSearchFilters, offers, moreOffersLoading, loadMoreOffers,
+    showSearchFilters, toggleShowSearchFilters, offers, moreOffersLoading, loadMoreOffers, searchQueryToken,
 }) => (
     <Grid item md={4} id="offer_list" className={classes.fullHeight}>
         <Grid container className={classes.fullHeight}>
@@ -33,6 +33,7 @@ const OffersList = ({
                         offers={offers}
                         moreOffersLoading={moreOffersLoading}
                         loadMoreOffers={loadMoreOffers}
+                        searchQueryToken={searchQueryToken}
                     />
                 }
                 <Divider
@@ -129,6 +130,7 @@ const SearchResultsDesktop = () => {
         toggleShowSearchFilters,
         moreOffersLoading,
         loadMoreOffers,
+        searchQueryToken,
     } = useContext(SearchResultsControllerContext);
     const classes = useSearchResultsWidgetStyles();
 
@@ -161,6 +163,7 @@ const SearchResultsDesktop = () => {
                 offers={offers}
                 moreOffersLoading={moreOffersLoading}
                 loadMoreOffers={loadMoreOffers}
+                searchQueryToken={searchQueryToken}
             />
             {showSearchFilters ?
                 <Grid

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js
@@ -12,7 +12,7 @@ import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
 const OffersList = ({
     noOffers, classes, offersLoading, showOfferDetails, showSearchFilters,
-    toggleShowSearchFilters, offers, moreOffersLoading, loadMoreOffers,
+    toggleShowSearchFilters, offers, moreOffersLoading, loadMoreOffers, searchQueryToken,
 }) => (
     <Grid container className={classes.fullHeight}>
         <Grid xs={12} item className={classes.offerItemsContainer}>
@@ -33,6 +33,7 @@ const OffersList = ({
                     offers={offers}
                     moreOffersLoading={moreOffersLoading}
                     loadMoreOffers={loadMoreOffers}
+                    searchQueryToken={searchQueryToken}
                 />
             }
         </Grid>
@@ -126,6 +127,7 @@ const SearchResultsMobile = () => {
         toggleShowSearchFilters,
         moreOffersLoading,
         loadMoreOffers,
+        searchQueryToken,
     } = useContext(SearchResultsControllerContext);
 
     const showOfferDetails = (offerIdx) => {
@@ -156,6 +158,7 @@ const SearchResultsMobile = () => {
                 offers={offers}
                 moreOffersLoading={moreOffersLoading}
                 loadMoreOffers={loadMoreOffers}
+                searchQueryToken={searchQueryToken}
             />
             {showSearchFilters ?
                 <SearchArea

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsWidget.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsWidget.js
@@ -119,6 +119,7 @@ const SearchResultsController = ({
                 showSearchFilters,
                 toggleShowSearchFilters,
                 moreOffersLoading,
+                searchQueryToken,
                 loadMoreOffers: () => loadMoreOffers(searchQueryToken, SearchResultsConstants.FETCH_NEW_OFFERS_LIMIT),
             },
         },

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/useOffersSearcher.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/useOffersSearcher.js
@@ -35,7 +35,7 @@ export default (filters) => {
         }
 
         try {
-            const { queryToken: updatedQueryToken, results } = await searchOffers({ queryToken, limit, ...filters });
+            const { updatedQueryToken, results } = await searchOffers({ queryToken, limit, ...filters });
             dispatch(setSearchQueryToken((updatedQueryToken)));
             dispatch(setSearchOffers(results, !isInitialRequest));
 
@@ -71,7 +71,7 @@ export default (filters) => {
 
     return {
         search: (...args) => loadOffers(true)(null, ...args),
-        loadMoreOffers: loadOffers(false),
+        loadMoreOffers: (queryToken, ...args) => loadOffers(false)(queryToken, ...args),
         moreOffersLoading,
         moreOffersFetchError,
     };

diff --git a/src/reducers/searchOffersReducer.js b/src/reducers/searchOffersReducer.js
@@ -26,7 +26,7 @@ export default (state = initialState, action) => {
         {
             let offers = action.offers;
             if (action.accumulate) {
-                offers = [...state.offers, offers];
+                offers = [...state.offers, ...offers];
             }
             return {
                 ...state,

diff --git a/src/services/offerService.js b/src/services/offerService.js
@@ -28,10 +28,10 @@ export class NetworkFailureException extends Error {
 }
 
 export const searchOffers = buildCancelableRequest(
-    measureTime(TIMED_ACTIONS.OFFER_SEARCH, async ({ queryToken, ...filters }, { signal }) => {
+    measureTime(TIMED_ACTIONS.OFFER_SEARCH, async ({ queryToken, limit, ...filters }, { signal }) => {
         let isErrorRegistered = false;
         try {
-            const query = queryToken ? `queryToken=${queryToken}` : parseFiltersToURL(filters);
+            const query = parseFiltersToURL(queryToken ? { queryToken, limit } : { ...filters, limit });
             const res = await fetch(`${API_HOSTNAME}/offers?${query}`, {
                 method: "GET",
                 credentials: "include",