From 5ba7b6c4636e353501a2011c3cd21bc149f47998 Mon Sep 17 00:00:00 2001 From: Tiago Gomes Date: Tue, 22 Feb 2022 19:34:07 +0000 Subject: [PATCH] Refactor: moved infinite scroll to SearchResultsController --- .../OfferItemsContainer.js | 28 +++++++++++------- .../SearchResultsDesktop.js | 29 +++++++++++++++++-- .../SearchResultsMobile.js | 28 +++++++++++++++++- .../SearchResultsWidget.js | 17 +++++++++-- 4 files changed, 86 insertions(+), 16 deletions(-) diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js index 8dd9eed5a..bb78e5d91 100644 --- 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 index 94313f7fe..8c57743d9 100644 --- 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, }) => ( @@ -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} /> } { 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 ? ( +const OffersList = ({ + noOffers, classes, offersLoading, showOfferDetails, showSearchFilters, toggleShowSearchFilters, offers, + setOfferOffset, setShouldFetchMoreOffers, hasMoreOffers, infiniteScrollLoading, infiniteScrollError, +}) => ( {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} /> } @@ -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 ? { 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, });