Add: submitNumber property to the redux state, to reset infinite scro…

…ll variables
NIAEFEUP · Feb 13, 2022 · 088a5c3 · 088a5c3
1 parent b58ac03
commit 088a5c3
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 24 deletions.
diff --git a/src/actions/searchOffersActions.js b/src/actions/searchOffersActions.js
@@ -1,6 +1,7 @@
 import { INITIAL_JOB_TYPE, INITIAL_JOB_DURATION, INITIAL_ERROR } from "../reducers/searchOffersReducer";
 
 export const OfferSearchTypes = Object.freeze({
+    SET_SUBMIT_NUMBER: "SET_SUBMIT_NUMBER",
     SET_SEARCH_VALUE: "SET_SEARCH_VALUE",
     SET_JOB_DURATION: "SET_JOB_DURATION",
     SET_JOB_TYPE: "SET_JOB_TYPE",
@@ -16,6 +17,11 @@ export const OfferSearchTypes = Object.freeze({
     ADMIN_ENABLE_OFFER: "ADMIN_ENABLE_OFFER",
 });
 
+export const setSubmitNumber = (submitNumber) => ({
+    type: OfferSearchTypes.SET_SUBMIT_NUMBER,
+    submitNumber,
+});
+
 export const setLoadingOffers = (loading) => ({
     type: OfferSearchTypes.SET_OFFERS_LOADING,
     loading,

diff --git a/src/components/HomePage/SearchArea/SearchArea.js b/src/components/HomePage/SearchArea/SearchArea.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
 
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import {
     setFields,
     setShowJobDurationSlider,
     setTechs,
+    setSubmitNumber,
 } from "../../../actions/searchOffersActions";
 import { INITIAL_JOB_TYPE, INITIAL_JOB_DURATION } from "../../../reducers/searchOffersReducer";
 
@@ -32,6 +33,7 @@ export const AdvancedSearchController = ({
     enableAdvancedSearchDefault, showJobDurationSlider, setShowJobDurationSlider, jobMinDuration,
     jobMaxDuration, setJobDuration, jobType, setJobType, fields, setFields, technologies, setTechs,
     resetAdvancedSearchFields, onSubmit, searchValue, setSearchValue, searchOffers, onMobileClose,
+    submitNumber, setSubmitNumber,
 }) => {
 
     const advancedSearchProps = useAdvancedSearch({
@@ -53,9 +55,11 @@ export const AdvancedSearchController = ({
     const submitForm = useCallback((e) => {
         if (e) e.preventDefault();
         searchOffers({ value: searchValue, jobMinDuration, jobMaxDuration, jobType, fields, technologies });
+        setSubmitNumber(submitNumber + 1);
+
 
         if (onSubmit) onSubmit();
-    }, [fields, jobMaxDuration, jobMinDuration, jobType, onSubmit, searchOffers, searchValue, technologies]);
+    }, [fields, jobMaxDuration, jobMinDuration, jobType, onSubmit, searchOffers, searchValue, setSubmitNumber, submitNumber, technologies]);
 
     return {
         ...advancedSearchProps,
@@ -72,7 +76,7 @@ export const AdvancedSearchController = ({
     };
 };
 
-export const SearchArea = ({ onSubmit, searchOffers, searchValue,
+export const SearchArea = ({ onSubmit, searchOffers, searchValue, submitNumber, setSubmitNumber,
     jobMinDuration = INITIAL_JOB_DURATION, jobMaxDuration = INITIAL_JOB_DURATION + 1, jobType = INITIAL_JOB_TYPE,
     fields, technologies, showJobDurationSlider, setShowJobDurationSlider, advanced: enableAdvancedSearchDefault = false,
     setSearchValue, setJobDuration, setJobType, setFields, setTechs, resetAdvancedSearchFields, onMobileClose }) => {
@@ -91,6 +95,7 @@ export const SearchArea = ({ onSubmit, searchOffers, searchValue,
             enableAdvancedSearchDefault, showJobDurationSlider, setShowJobDurationSlider, jobMinDuration,
             jobMaxDuration, setJobDuration, jobType, setJobType, fields, setFields, technologies, setTechs,
             resetAdvancedSearchFields, onSubmit, searchValue, setSearchValue, searchOffers, onMobileClose,
+            submitNumber, setSubmitNumber,
         },
         AdvancedSearchControllerContext
     );
@@ -139,6 +144,7 @@ SearchArea.propTypes = {
     jobMinDuration: PropTypes.number,
     jobMaxDuration: PropTypes.number,
     jobType: PropTypes.string,
+    setSubmitNumber: PropTypes.func,
     setSearchValue: PropTypes.func.isRequired,
     setJobDuration: PropTypes.func.isRequired,
     setJobType: PropTypes.func.isRequired,
@@ -154,6 +160,7 @@ SearchArea.propTypes = {
 };
 
 export const mapStateToProps = ({ offerSearch }) => ({
+    submitNumber: offerSearch.submitNumber,
     searchValue: offerSearch.searchValue,
     jobType: offerSearch.jobType,
     jobMinDuration: offerSearch.jobDuration[0],
@@ -165,6 +172,7 @@ export const mapStateToProps = ({ offerSearch }) => ({
 
 export const mapDispatchToProps = (dispatch) => ({
     searchOffers: (filters) => dispatch(searchOffers(filters)),
+    setSubmitNumber: (submitNumber) => dispatch((setSubmitNumber(submitNumber))),
     setSearchValue: (value) => dispatch(setSearchValue(value)),
     setJobDuration: (_, value) => dispatch(setJobDuration(...value)),
     setJobType: (e) => dispatch(setJobType(e.target.value)),

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/OfferItemsContainer.js
@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useState } from "react";
+import React, { useRef, useCallback, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import OfferItem from "../Offer/OfferItem";
 
@@ -46,7 +46,6 @@ ToggleFiltersButton.propTypes = {
 };
 
 const OfferItemsContainer = ({
-    // offers,
     addSnackbar,
     loading,
     selectedOfferIdx,
@@ -58,17 +57,26 @@ const OfferItemsContainer = ({
 
     const [offset, setOffset] = useState(0);
     const [fetchMoreOffers, setFetchMoreOffers] = useState(false);
+    const [lastOfferNode, setLastOfferNode] = useState(null);
 
     const {
         offers,
         hasMore,
         loading: infiniteScrollLoading,
         error: infiniteScrollError,
-    } = useLoadMoreOffers({ offset, fetchMoreOffers });
+    } = useLoadMoreOffers({ offset, setOffset, fetchMoreOffers });
 
     const observer = useRef();
     const lastOfferElementRef = useCallback((node) => {
-        if (loading || infiniteScrollLoading) return;
+        if (node) setLastOfferNode(node);
+    }, []);
+
+    useEffect(() => {
+
+        if (loading || infiniteScrollLoading) {
+            setFetchMoreOffers(false);
+            return;
+        }
 
         if (infiniteScrollError) {
             addSnackbar({
@@ -78,20 +86,17 @@ const OfferItemsContainer = ({
             return;
         }
 
-        // TODO:
-        // Problem: when we change the search query, the infinite scrolling does not work sometimes
-
         if (observer.current) observer.current.disconnect();
         observer.current = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting && hasMore && !loading && !infiniteScrollLoading) {
+            if (entries[0].isIntersecting && hasMore) {
                 setOffset((previousOffset) => previousOffset + 5);
                 setFetchMoreOffers(true);
             } else {
                 setFetchMoreOffers(false);
             }
         });
-        if (node) observer.current.observe(node);
-    }, [addSnackbar, hasMore, infiniteScrollError, infiniteScrollLoading, loading]);
+        if (lastOfferNode) observer.current.observe(lastOfferNode);
+    }, [addSnackbar, hasMore, infiniteScrollError, infiniteScrollLoading, lastOfferNode, loading, offers]);
 
     const handleOfferSelection = (...args) => {
         toggleShowSearchFilters(false);
@@ -138,7 +143,6 @@ const OfferItemsContainer = ({
 };
 
 OfferItemsContainer.propTypes = {
-    // offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
     addSnackbar: PropTypes.func,
     loading: PropTypes.bool,
     selectedOfferIdx: PropTypes.number,

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsDesktop.js
@@ -10,7 +10,7 @@ import { WorkOff } from "@material-ui/icons";
 import clsx from "clsx";
 import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
-const OffersList = ({ noOffers, classes, offers, selectedOfferIdx, offersLoading, setSelectedOfferIdx,
+const OffersList = ({ noOffers, classes, selectedOfferIdx, offersLoading, setSelectedOfferIdx,
     showSearchFilters, toggleShowSearchFilters,
 }) => (
     <Grid item md={4} id="offer_list" className={classes.fullHeight}>
@@ -23,7 +23,6 @@ const OffersList = ({ noOffers, classes, offers, selectedOfferIdx, offersLoading
                     </div>
                     :
                     <OfferItemsContainer
-                        // offers={offers}
                         selectedOfferIdx={selectedOfferIdx}
                         loading={offersLoading}
                         setSelectedOfferIdx={setSelectedOfferIdx}
@@ -51,7 +50,6 @@ OffersList.propTypes = {
         noOffersColumn: PropTypes.string.isRequired,
         errorLoadingOffersIcon: PropTypes.string.isRequired,
     }),
-    offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
     offersLoading: PropTypes.bool,
     selectedOfferIdx: PropTypes.number,
     setSelectedOfferIdx: PropTypes.func.isRequired,
@@ -148,7 +146,6 @@ const SearchResultsDesktop = () => {
             <OffersList
                 classes={offersListClasses}
                 noOffers={noOffers}
-                offers={offers}
                 offersLoading={offersLoading}
                 selectedOfferIdx={selectedOfferIdx}
                 setSelectedOfferIdx={setSelectedOfferIdx}

diff --git a/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js b/src/components/HomePage/SearchResultsArea/SearchResultsWidget/SearchResultsMobile.js
@@ -10,7 +10,7 @@ import useToggle from "../../../../hooks/useToggle";
 import { NavigateBefore, WorkOff } from "@material-ui/icons";
 import { SearchResultsControllerContext } from "./SearchResultsWidget";
 
-const OffersList = ({ noOffers, classes, offers, offersLoading, showOfferDetails, showSearchFilters, toggleShowSearchFilters }) => (
+const OffersList = ({ noOffers, classes, offersLoading, showOfferDetails, showSearchFilters, toggleShowSearchFilters }) => (
     <Grid container className={classes.fullHeight}>
         <Grid xs={12} item className={classes.offerItemsContainer}>
             {noOffers ?
@@ -22,7 +22,6 @@ const OffersList = ({ noOffers, classes, offers, offersLoading, showOfferDetails
                 </div>
                 :
                 <OfferItemsContainer
-                    // offers={offers}
                     loading={offersLoading}
                     setSelectedOfferIdx={showOfferDetails}
                     noOffers={noOffers}
@@ -43,7 +42,6 @@ OffersList.propTypes = {
         noOffersColumn: PropTypes.string.isRequired,
         offerItemsContainer: PropTypes.string.isRequired,
     }),
-    offers: PropTypes.arrayOf(PropTypes.instanceOf(Offer)),
     offersLoading: PropTypes.bool,
     showOfferDetails: PropTypes.func.isRequired,
     showSearchFilters: PropTypes.bool.isRequired,
@@ -141,7 +139,6 @@ const SearchResultsMobile = () => {
             <OffersList
                 classes={offerListClasses}
                 noOffers={noOffers}
-                offers={offers}
                 offersLoading={offersLoading}
                 showOfferDetails={showOfferDetails}
                 showSearchFilters={showSearchFilters}

diff --git a/src/hooks/useLoadMoreOffers.js b/src/hooks/useLoadMoreOffers.js
@@ -11,7 +11,7 @@ import ErrorTypes from "../utils/ErrorTypes";
 
 const { API_HOSTNAME } = config;
 
-export default ({ offset, fetchMoreOffers }) => {
+export default ({ offset, setOffset, fetchMoreOffers }) => {
 
     const dispatch = useDispatch();
     const offerSearch = useSelector(({ offerSearch }) => ({
@@ -31,6 +31,7 @@ export default ({ offset, fetchMoreOffers }) => {
 
     const oldOffers = useSelector((state) => state.offerSearch.offers);
     const initialOffersLoading = useSelector((state) => state.offerSearch.loading);
+    const submitNumber = useSelector((state) => state.offerSearch.submitNumber);
 
     const [hasMore, setHasMore] = useState(true);
     const [loading, setLoading] = useState(false);
@@ -39,7 +40,13 @@ export default ({ offset, fetchMoreOffers }) => {
 
     useEffect(() => {
         setOffers(oldOffers);
-    }, [offerSearch, oldOffers]);
+    }, [oldOffers]);
+
+    useEffect(() => {
+        setOffset(0);
+        setError(null);
+        setLoading(false);
+    }, [setOffset, submitNumber]);
 
     useEffect(() => {
 

diff --git a/src/reducers/searchOffersReducer.js b/src/reducers/searchOffersReducer.js
@@ -8,6 +8,7 @@ export const JOB_MIN_DURATION = 1;
 export const JOB_MAX_DURATION = 12;
 
 const initialState = {
+    submitNumber: 0,
     searchValue: "",
     jobType: INITIAL_JOB_TYPE,
     filterJobDuration: false,
@@ -22,6 +23,11 @@ const initialState = {
 export default (state = initialState, action) => {
 
     switch (action.type) {
+        case OfferSearchTypes.SET_SUBMIT_NUMBER:
+            return {
+                ...state,
+                submitNumber: action.submitNumber,
+            };
         case OfferSearchTypes.SET_OFFERS_SEARCH_RESULT:
             return {
                 ...state,