Fixed: navigating using pagination caused duplicate request.

Author: MadOPcode

src/routes/WorkPeriods/components/Periods/index.jsx

@@ -5,28 +5,34 @@ import PeriodList from "../PeriodList";
 import {
   getWorkPeriodsError,
   getWorkPeriodsIsLoading,
+  getWorkPeriodsPagination,
   getWorkPeriodsSorting,
-  getWorkPeriodsTotalCount,
 } from "store/selectors/workPeriods";
 import { loadWorkPeriodsPage } from "store/thunks/workPeriods";
+import { useUpdateEffect } from "utils/hooks";
 
 /**
  * Displays working periods' list or a "Loading..." message or an error message.
  *
  * @returns {JSX.Element}
  */
 const Periods = () => {
+  const pagination = useSelector(getWorkPeriodsPagination);
   const sorting = useSelector(getWorkPeriodsSorting);
-  const count = useSelector(getWorkPeriodsTotalCount);
   const error = useSelector(getWorkPeriodsError);
   const isLoading = useSelector(getWorkPeriodsIsLoading);
   const dispatch = useDispatch();
 
   // Load working periods' first page once when page loads and then
-  // only if sorting changes.
+  // only if page size or sorting changes.
   useEffect(() => {
     dispatch(loadWorkPeriodsPage(1));
-  }, [sorting, dispatch]);
+  }, [dispatch, pagination.pageSize, sorting]);
+
+  // Load working periods' new page if page number changes.
+  useUpdateEffect(() => {
+    dispatch(loadWorkPeriodsPage());
+  }, [dispatch, pagination.pageNumber]);
 
   return (
     <>
@@ -35,7 +41,7 @@ const Periods = () => {
       {!isLoading && error && (
         <ContentMessage type="error">{error}</ContentMessage>
       )}
-      {!isLoading && !error && !count && (
+      {!isLoading && !error && !pagination.totalCount && (
         <ContentMessage>No resource bookings found.</ContentMessage>
       )}
     </>

src/routes/WorkPeriods/components/PeriodsPagination/index.jsx

@@ -8,8 +8,6 @@ import {
   setWorkPeriodsPageNumber,
   setWorkPeriodsPageSize,
 } from "store/actions/workPeriods";
-import { loadWorkPeriodsPage } from "store/thunks/workPeriods";
-import { useUpdateEffect } from "utils/hooks";
 import styles from "./styles.module.scss";
 
 /**
@@ -38,20 +36,6 @@ const PeriodsPagination = ({ className, id }) => {
     [dispatch]
   );
 
-  const loadWorkPeriodsFirstPage = useCallback(() => {
-    dispatch(loadWorkPeriodsPage(1));
-  }, [dispatch]);
-
-  const loadWorkPeriodsNewPage = useCallback(() => {
-    dispatch(loadWorkPeriodsPage());
-  }, [dispatch]);
-
-  // Load working periods' first page if page size changes.
-  useUpdateEffect(loadWorkPeriodsFirstPage, [pagination.pageSize]);
-
-  // Load working periods' new page if page number changes.
-  useUpdateEffect(loadWorkPeriodsNewPage, [pagination.pageNumber]);
-
   return (
     <Pagination
       id={id}

src/utils/hooks.js

@@ -16,5 +16,5 @@ export const useUpdateEffect = (effect, deps) => {
       isMountedRef.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [effect, ...deps]);
+  }, deps);
 };