From 342d426da0f39ecfc3d8b0daf0b211fe48c475b5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 10 Jul 2024 09:59:48 -0700
Subject: [PATCH] Update route to pass monitor ID to details component

---
 Client/src/App.jsx                           | 10 +++++-----
 Client/src/Components/MonitorTable/index.jsx | 10 +++++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index a6581ad81..abd2d37b7 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -21,7 +21,6 @@ import ProtectedRoute from "./Components/ProtectedRoute";
 import Details from "./Pages/Details";
 import Maintenance from "./Pages/Maintenance";
 
-
 function App() {
   return (
     <>
@@ -40,14 +39,15 @@ function App() {
             path="/monitors/create"
             element={<ProtectedRoute Component={CreateNewMonitor} />}
           />
+          <Route
+            path="/monitors/:monitorId/"
+            element={<ProtectedRoute Component={Details} />}
+          />
           <Route
             path="incidents"
             element={<ProtectedRoute Component={Incidents} />}
           />
-          <Route
-            path="details"
-            element={<ProtectedRoute Component={Details} />}
-          />
+
           <Route
             path="status"
             element={<ProtectedRoute Component={Status} />}
diff --git a/Client/src/Components/MonitorTable/index.jsx b/Client/src/Components/MonitorTable/index.jsx
index 977c6e918..5bb06935b 100644
--- a/Client/src/Components/MonitorTable/index.jsx
+++ b/Client/src/Components/MonitorTable/index.jsx
@@ -17,6 +17,7 @@ import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+import { useNavigate } from "react-router-dom";
 
 /**
  * Host component.
@@ -94,6 +95,7 @@ const Status = ({ params }) => {
  * @returns {React.Component} Returns a table with the monitor data.
  */
 const MonitorTable = ({ monitors = [] }) => {
+  const navigate = useNavigate();
   const [page, setPage] = useState(0);
   const rowsPerPage = 5;
 
@@ -124,7 +126,13 @@ const MonitorTable = ({ monitors = [] }) => {
       };
 
       return (
-        <TableRow key={monitor._id}>
+        <TableRow
+          sx={{ cursor: "pointer" }}
+          key={monitor._id}
+          onClick={() => {
+            navigate(`/monitors/${monitor._id}`);
+          }}
+        >
           <TableCell>
             <Host params={params} />
           </TableCell>