Refactor: moved infinite scroll to SearchResultsController

NIAEFEUP · Feb 22, 2022 · 5ba7b6c · 5ba7b6c
1 parent d014c1b
commit 5ba7b6c
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 16 deletions.
diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js
@@ -8,9 +8,9 @@ import { Tune } from "@material-ui/icons";
 import OfferItem from "../Offer/OfferItem";
 import useSearchResultsWidgetStyles from "./searchResultsWidgetStyles";
 import LoadingOfferItem from "./LoadingOfferItem";
-import useLoadMoreOffers from "./useLoadMoreOffers";
 import { addSnackbar } from "../../../../actions/notificationActions";
 import { SearchResultsConstants } from "./SearchResultsUtils";
+import Offer from "../Offer/Offer";
 
 const useAdvancedSearchButtonStyles = makeStyles((theme) => ({
     root: {
@@ -52,20 +52,17 @@ const OfferItemsContainer = ({
     setSelectedOfferIdx,
     showSearchFilters,
     toggleShowSearchFilters,
+    offers,
+    setOfferOffset,
+    setShouldFetchMoreOffers,
+    hasMoreOffers,
+    infiniteScrollLoading,
+    infiniteScrollError,
 }) => {
     const classes = useSearchResultsWidgetStyles();
 
-    const [offerOffset, setOfferOffset] = useState(0);
-    const [shouldFetchMoreOffers, setShouldFetchMoreOffers] = useState(false);
     const [lastOfferNode, setLastOfferNode] = useState(null);
 
-    const {
-        offers,
-        hasMoreOffers,
-        loading: infiniteScrollLoading,
-        error: infiniteScrollError,
-    } = useLoadMoreOffers({ offerOffset, setOfferOffset, shouldFetchMoreOffers });
-
     const observer = useRef();
     const lastOfferElementRef = useCallback((node) => {
         if (node) setLastOfferNode(node);
@@ -96,7 +93,10 @@ const OfferItemsContainer = ({
             }
         });
         if (lastOfferNode) observer.current.observe(lastOfferNode);
-    }, [addSnackbar, hasMoreOffers, infiniteScrollError, infiniteScrollLoading, lastOfferNode, loading]);
+    }, [
+        addSnackbar, hasMoreOffers, infiniteScrollError, infiniteScrollLoading,
+        lastOfferNode, loading, setOfferOffset, setShouldFetchMoreOffers,
+    ]);
 
     const handleOfferSelection = (...args) => {
         toggleShowSearchFilters(false);
@@ -149,6 +149,12 @@ OfferItemsContainer.propTypes = {
     setSelectedOfferIdx: PropTypes.func.isRequired,
     showSearchFilters: PropTypes.bool,
     toggleShowSearchFilters: PropTypes.func.isRequired,
+    offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
+    setOfferOffset: PropTypes.func,
+    setShouldFetchMoreOffers: PropTypes.func,
+    hasMoreOffers: PropTypes.bool,
+    infiniteScrollLoading: PropTypes.bool,
+    infiniteScrollError: PropTypes.bool,
 };
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js
@@ -10,8 +10,10 @@ import { WorkOff } from "@material-ui/icons";
 import clsx from "clsx";
 import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
-const OffersList = ({ noOffers, classes, selectedOfferIdx, offersLoading, setSelectedOfferIdx,
-    showSearchFilters, toggleShowSearchFilters,
+const OffersList = ({
+    noOffers, classes, selectedOfferIdx, offersLoading, setSelectedOfferIdx,
+    showSearchFilters, toggleShowSearchFilters, offers, setOfferOffset,
+    setShouldFetchMoreOffers, hasMoreOffers, infiniteScrollLoading, infiniteScrollError,
 }) => (
     <Grid item md={4} id="offer_list" className={classes.fullHeight}>
         <Grid container className={classes.fullHeight}>
@@ -29,6 +31,12 @@ const OffersList = ({ noOffers, classes, selectedOfferIdx, offersLoading, setSel
                         noOffers={noOffers}
                         showSearchFilters={showSearchFilters}
                         toggleShowSearchFilters={toggleShowSearchFilters}
+                        offers={offers}
+                        setOfferOffset={setOfferOffset}
+                        setShouldFetchMoreOffers={setShouldFetchMoreOffers}
+                        hasMoreOffers={hasMoreOffers}
+                        infiniteScrollLoading={infiniteScrollLoading}
+                        infiniteScrollError={infiniteScrollError}
                     />
                 }
                 <Divider
@@ -55,6 +63,12 @@ OffersList.propTypes = {
     setSelectedOfferIdx: PropTypes.func.isRequired,
     showSearchFilters: PropTypes.bool.isRequired,
     toggleShowSearchFilters: PropTypes.func.isRequired,
+    offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
+    setOfferOffset: PropTypes.func,
+    setShouldFetchMoreOffers: PropTypes.func,
+    hasMoreOffers: PropTypes.bool,
+    infiniteScrollLoading: PropTypes.bool,
+    infiniteScrollError: PropTypes.bool,
 };
 
 const OfferWidgetSection = ({
@@ -122,6 +136,11 @@ const SearchResultsDesktop = () => {
         handleAdminEnableOffer,
         showSearchFilters,
         toggleShowSearchFilters,
+        setOfferOffset,
+        setShouldFetchMoreOffers,
+        hasMoreOffers,
+        infiniteScrollLoading,
+        infiniteScrollError,
     } = useContext(SearchResultsControllerContext);
     const classes = useSearchResultsWidgetStyles();
 
@@ -151,6 +170,12 @@ const SearchResultsDesktop = () => {
                 setSelectedOfferIdx={setSelectedOfferIdx}
                 showSearchFilters={showSearchFilters}
                 toggleShowSearchFilters={toggleShowSearchFilters}
+                offers={offers}
+                setOfferOffset={setOfferOffset}
+                setShouldFetchMoreOffers={setShouldFetchMoreOffers}
+                hasMoreOffers={hasMoreOffers}
+                infiniteScrollLoading={infiniteScrollLoading}
+                infiniteScrollError={infiniteScrollError}
             />
             {showSearchFilters ?
                 <Grid

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js
@@ -10,7 +10,10 @@ import useToggle from "../../../../hooks/useToggle";
 import { NavigateBefore, WorkOff } from "@material-ui/icons";
 import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
-const OffersList = ({ noOffers, classes, offersLoading, showOfferDetails, showSearchFilters, toggleShowSearchFilters }) => (
+const OffersList = ({
+    noOffers, classes, offersLoading, showOfferDetails, showSearchFilters, toggleShowSearchFilters, offers,
+    setOfferOffset, setShouldFetchMoreOffers, hasMoreOffers, infiniteScrollLoading, infiniteScrollError,
+}) => (
     <Grid container className={classes.fullHeight}>
         <Grid xs={12} item className={classes.offerItemsContainer}>
             {noOffers ?
@@ -27,6 +30,12 @@ const OffersList = ({ noOffers, classes, offersLoading, showOfferDetails, showSe
                     noOffers={noOffers}
                     showSearchFilters={showSearchFilters}
                     toggleShowSearchFilters={toggleShowSearchFilters}
+                    offers={offers}
+                    setOfferOffset={setOfferOffset}
+                    setShouldFetchMoreOffers={setShouldFetchMoreOffers}
+                    hasMoreOffers={hasMoreOffers}
+                    infiniteScrollLoading={infiniteScrollLoading}
+                    infiniteScrollError={infiniteScrollError}
                 />
             }
         </Grid>
@@ -46,6 +55,12 @@ OffersList.propTypes = {
     showOfferDetails: PropTypes.func.isRequired,
     showSearchFilters: PropTypes.bool.isRequired,
     toggleShowSearchFilters: PropTypes.func.isRequired,
+    offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
+    setOfferOffset: PropTypes.func,
+    setShouldFetchMoreOffers: PropTypes.func,
+    hasMoreOffers: PropTypes.bool,
+    infiniteScrollLoading: PropTypes.bool,
+    infiniteScrollError: PropTypes.bool,
 };
 
 export const OfferViewer = ({
@@ -116,6 +131,11 @@ const SearchResultsMobile = () => {
         handleAdminEnableOffer,
         showSearchFilters,
         toggleShowSearchFilters,
+        shouldFetchMoreOffers,
+        setShouldFetchMoreOffers,
+        hasMoreOffers,
+        infiniteScrollLoading,
+        infiniteScrollError,
     } = useContext(SearchResultsControllerContext);
 
     const showOfferDetails = (offerIdx) => {
@@ -143,6 +163,12 @@ const SearchResultsMobile = () => {
                 showOfferDetails={showOfferDetails}
                 showSearchFilters={showSearchFilters}
                 toggleShowSearchFilters={toggleShowSearchFilters}
+                offers={offers}
+                shouldFetchMoreOffers={shouldFetchMoreOffers}
+                setShouldFetchMoreOffers={setShouldFetchMoreOffers}
+                hasMoreOffers={hasMoreOffers}
+                infiniteScrollLoading={infiniteScrollLoading}
+                infiniteScrollError={infiniteScrollError}
             />
             {showSearchFilters ?
                 <SearchArea

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsWidget.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsWidget.js
@@ -22,26 +22,35 @@ import {
     disableOffer,
     hideOffer,
 } from "../../../../actions/searchOffersActions";
+import useLoadMoreOffers from "./useLoadMoreOffers";
 
 export const SearchResultsControllerContext = React.createContext({});
 
 const SearchResultsController = ({
     offersSearchError,
     offersLoading,
-    offers,
     hideOffer,
     disableOffer,
     companyEnableOffer,
     adminEnableOffer,
 }) => {
 
     const [selectedOfferIdx, setSelectedOfferIdx] = useState(null);
+    const [offerOffset, setOfferOffset] = useState(0);
+    const [shouldFetchMoreOffers, setShouldFetchMoreOffers] = useState(false);
 
     // Reset the selected offer on every "loading", so that it does not show up after finished loading
     useEffect(() => {
         if (offersLoading) setSelectedOfferIdx(null);
     }, [offersLoading]);
 
+    const {
+        offers,
+        hasMoreOffers,
+        loading: infiniteScrollLoading,
+        error: infiniteScrollError,
+    } = useLoadMoreOffers({ offerOffset, setOfferOffset, shouldFetchMoreOffers });
+
     const handleDisableOffer = useCallback(({ offer, adminReason, onSuccess, onError }) => {
         disableOfferService(offer._id, adminReason).then(() => {
             disableOffer(selectedOfferIdx, adminReason);
@@ -112,6 +121,11 @@ const SearchResultsController = ({
                 handleAdminEnableOffer,
                 showSearchFilters,
                 toggleShowSearchFilters,
+                setOfferOffset,
+                setShouldFetchMoreOffers,
+                hasMoreOffers,
+                infiniteScrollLoading,
+                infiniteScrollError,
             },
         },
     };
@@ -173,7 +187,6 @@ SearchResultsWidget.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-    offers: state.offerSearch.offers,
     offersLoading: state.offerSearch.loading,
     offersSearchError: state.offerSearch.error,
 });