Prep monitor details page for better data handling, minor fix to basic table component

Client/src/Components/BasicTable/index.jsx

@@ -9,7 +9,7 @@ import {
   Pagination,
   PaginationItem,
 } from "@mui/material";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./index.css";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -73,6 +73,10 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
 
   const [page, setPage] = useState(0);
 
+  useEffect(() => {
+    setPage(0);
+  }, [data]);
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };

Client/src/Pages/Monitors/Details/index.jsx

@@ -116,59 +116,81 @@ const DetailsPage = () => {
   const { authToken } = useSelector((state) => state.auth);
   const [filter, setFilter] = useState("day");
 
+  const fetchDataForChart = async () => {
+    try {
+      const limit = 0;
+
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc&limit=${limit}`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      const data = {
+        cols: [
+          { id: 1, name: "Status" },
+          { id: 2, name: "Date & Time" },
+          { id: 3, name: "Message" },
+        ],
+        rows: res.data.data.checks.map((check, idx) => {
+          const status = check.status === true ? "up" : "down";
+
+          return {
+            id: check._id,
+            data: [
+              {
+                id: idx,
+                data: (
+                  <StatusLabel
+                    status={status}
+                    text={status}
+                    customStyles={{ textTransform: "capitalize" }}
+                  />
+                ),
+              },
+              {
+                id: idx + 1,
+                data: new Date(check.createdAt).toLocaleString(),
+              },
+              { id: idx + 2, data: check.statusCode },
+            ],
+          };
+        }),
+      };
+
+      setData(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const fetchMonitor = async () => {
+    try {
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      setMonitor(res.data.data);
+    } catch (error) {
+      console.error("Error fetching monitor of id: " + monitorId);
+      navigate("/not-found");
+    }
+  };
+
   useEffect(() => {
-    const fetchMonitor = async () => {
-      try {
-        const res = await axiosInstance.get(
-          `/monitors/${monitorId}?sortOrder=asc`,
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          }
-        );
-        setMonitor(res.data.data);
-        const data = {
-          cols: [
-            { id: 1, name: "Status" },
-            { id: 2, name: "Date & Time" },
-            { id: 3, name: "Message" },
-          ],
-          rows: res.data.data.checks.map((check, idx) => {
-            const status = check.status === true ? "up" : "down";
-
-            return {
-              id: check._id,
-              data: [
-                {
-                  id: idx,
-                  data: (
-                    <StatusLabel
-                      status={status}
-                      text={status}
-                      customStyles={{ textTransform: "capitalize" }}
-                    />
-                  ),
-                },
-                {
-                  id: idx + 1,
-                  data: new Date(check.createdAt).toLocaleString(),
-                },
-                { id: idx + 2, data: check.statusCode },
-              ],
-            };
-          }),
-        };
-
-        setData(data);
-      } catch (error) {
-        console.error("Error fetching monitor of id: " + monitorId);
-        navigate("/not-found");
-      }
-    };
     fetchMonitor();
   }, [monitorId, authToken]);
 
+  useEffect(() => {
+    fetchDataForChart();
+  }, [filter]);
+
   const theme = useTheme();
   const navigate = useNavigate();