From 901ec29281b673fce333d7ff8177db8b5e7f12f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 7 Aug 2024 22:46:21 -0700
Subject: [PATCH] Prep monitor details page for better data handling, minor fix
 to basic table component

---
 Client/src/Components/BasicTable/index.jsx  |   6 +-
 Client/src/Pages/Monitors/Details/index.jsx | 120 ++++++++++++--------
 2 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 3f89de700..76f1c61c7 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/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);
   };
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index b17eb831b..c952f32eb 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/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();