From e887c547d732f459c4756fe5369a69d05ee34e1d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 16 Jul 2024 14:05:38 -0700
Subject: [PATCH 1/2] initial refactor

---
 Client/src/Components/BasicTable/index.jsx |  4 ++
 Client/src/Pages/Details/index.jsx         | 72 +++++++---------------
 2 files changed, 26 insertions(+), 50 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index a1c3afef2..92bbca5ba 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -81,6 +81,10 @@ const BasicTable = ({ data, paginated }) => {
     ? data.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
     : data.rows;
 
+  if (!data || !data.cols || !data.rows) {
+    return <div>No data</div>;
+  }
+
   return (
     <>
       <TableContainer component={Paper}>
diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx
index 201a32524..79ff56a63 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Details/index.jsx
@@ -4,6 +4,7 @@ import { Box, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import axiosInstance from "../../Utils/axiosConfig";
+import BasicTable from "../../Components/BasicTable";
 
 /**
  * Details page component displaying monitor details and related information.
@@ -11,6 +12,7 @@ import axiosInstance from "../../Utils/axiosConfig";
  */
 const DetailsPage = () => {
   const [monitor, setMonitor] = useState({});
+  const [data, setData] = useState({});
   const { monitorId } = useParams();
   const { authToken } = useSelector((state) => state.auth);
   useEffect(() => {
@@ -21,6 +23,25 @@ const DetailsPage = () => {
         },
       });
       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) => {
+          return {
+            id: check._id,
+            data: [
+              { id: idx, data: check.status ? "Up" : "Down" },
+              { id: idx + 1, data: new Date(check.createdAt).toLocaleString() },
+              { id: idx + 2, data: check.statusCode },
+            ],
+          };
+        }),
+      };
+
+      setData(data);
     };
     fetchMonitor();
   }, [monitorId, authToken]);
@@ -85,56 +106,7 @@ const DetailsPage = () => {
     }, 0);
   };
 
-  return (
-    <Box>
-      {/* Customized Tables Component */}
-      <CustomizedTables monitor={monitor} />
-
-      {/* Uptime duration */}
-      <Typography
-        variant="body1"
-        sx={{
-          fontFamily: "Roboto",
-          fontWeight: 600,
-          fontSize: "13px",
-          lineHeight: "20px",
-          color: "#344054",
-          marginTop: theme.spacing(2),
-        }}
-      >
-        Up for: {calculateUptimeDuration(monitor.checks)}
-      </Typography>
-
-      {/* Last checked */}
-      <Typography
-        variant="body2"
-        sx={{
-          fontFamily: "Roboto",
-          fontWeight: 400,
-          fontSize: "16px",
-          lineHeight: "24px",
-          color: "#1570EF",
-          marginBottom: theme.spacing(1),
-        }}
-      >
-        Last checked: {getLastCheckedTimestamp(monitor.checks)}
-      </Typography>
-
-      {/* Incidents */}
-      <Typography
-        variant="body1"
-        sx={{
-          fontFamily: "Roboto",
-          fontWeight: 600,
-          fontSize: "13px",
-          lineHeight: "20px",
-          color: "#344054",
-        }}
-      >
-        Incidents: {countIncidents(monitor.checks)}
-      </Typography>
-    </Box>
-  );
+  return <BasicTable data={data} paginated={false} />;
 };
 
 export default DetailsPage;

From b23ada11dd2640a693f8e72d3908c62221871bf6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 16 Jul 2024 14:39:19 -0700
Subject: [PATCH 2/2] Add empty data check

---
 Client/src/Components/BasicTable/index.jsx | 10 +++++++---
 Client/src/Pages/Details/index.jsx         |  6 +++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 92bbca5ba..bd716d793 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -77,9 +77,13 @@ const BasicTable = ({ data, paginated }) => {
     setPage(0); // Reset to first page after changing rows per page
   };
 
-  let displayData = paginated
-    ? data.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-    : data.rows;
+  let displayData = [];
+
+  if (data && data.rows) {
+    displayData = paginated
+      ? data.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+      : data.rows;
+  }
 
   if (!data || !data.cols || !data.rows) {
     return <div>No data</div>;
diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx
index 7217ff671..c53054ccd 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Details/index.jsx
@@ -105,7 +105,11 @@ const DetailsPage = () => {
     }, 0);
   };
 
-  return <BasicTable data={data} paginated={false} />;
+  return (
+    <div>
+      <BasicTable data={data} paginated={true} />
+    </div>
+  );
 };
 
 export default DetailsPage;