Merge pull request #859 from bluewave-labs/fix/filter-pagination

Reset pagination on filter chagne

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -17,7 +17,7 @@ import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
 
 import { setRowsPerPage } from "../../../../Features/UI/uiSlice";
-import { useState, useEffect, memo } from "react";
+import { useState, useEffect, memo, useCallback, useRef } from "react";
 import { useNavigate } from "react-router";
 import { logger } from "../../../../Utils/Logger";
 import Host from "../host";
@@ -49,7 +49,6 @@ import useUtils from "../../utils";
  */
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
-
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
   };
@@ -121,6 +120,7 @@ const MonitorTable = ({ isAdmin, filter, setLoading }) => {
   const authState = useSelector((state) => state.auth);
   const [updateTrigger, setUpdateTrigger] = useState(false);
   const [sort, setSort] = useState({});
+  const prevFilter = useRef(filter);
 
   const handleActionMenuDelete = () => {
     setUpdateTrigger((prev) => !prev);
@@ -140,34 +140,53 @@ const MonitorTable = ({ isAdmin, filter, setLoading }) => {
     setPage(0);
   };
 
+  const fetchPage = useCallback(async () => {
+    try {
+      const { authToken } = authState;
+      const user = jwtDecode(authToken);
+      const res = await networkService.getMonitorsByTeamId({
+        authToken,
+        teamId: user.teamId,
+        limit: 25,
+        types: ["http", "ping"],
+        status: null,
+        checkOrder: "desc",
+        normalize: true,
+        page: page,
+        rowsPerPage: rowsPerPage,
+        filter: filter,
+        field: sort.field,
+        order: sort.order,
+      });
+      setMonitors(res?.data?.data?.monitors ?? []);
+      setMonitorCount(res?.data?.data?.monitorCount ?? 0);
+      setLoading(false);
+    } catch (error) {
+      logger.error(error);
+    }
+  }, [authState, page, rowsPerPage, filter, sort, setLoading]);
+
   useEffect(() => {
-    const fetchPage = async () => {
-      try {
-        const { authToken } = authState;
-        const user = jwtDecode(authToken);
-        const res = await networkService.getMonitorsByTeamId({
-          authToken,
-          teamId: user.teamId,
-          limit: 25,
-          types: ["http", "ping"],
-          status: null,
-          checkOrder: "desc",
-          normalize: true,
-          page: page,
-          rowsPerPage: rowsPerPage,
-          filter: filter,
-          field: sort.field,
-          order: sort.order,
-        });
-        setMonitors(res?.data?.data?.monitors ?? []);
-        setMonitorCount(res?.data?.data?.monitorCount ?? 0);
-        setLoading(false);
-      } catch (error) {
-        logger.error(error);
-      }
-    };
     fetchPage();
-  }, [updateTrigger, authState, page, rowsPerPage, filter, sort, setLoading]);
+  }, [
+    updateTrigger,
+    authState,
+    page,
+    rowsPerPage,
+    filter,
+    sort,
+    setLoading,
+    fetchPage,
+  ]);
+
+  // Listen for changes in filter, if new value reset the page
+  useEffect(() => {
+    if (prevFilter.current !== filter) {
+      setPage(0);
+      fetchPage();
+    }
+    prevFilter.current = filter;
+  }, [filter, fetchPage]);
 
   /**
    * Helper function to calculate the range of displayed rows.