From 2e1861d5e816f9cfd67a244914aa2fe6be7c4069 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 2 Aug 2024 18:17:52 -0400
Subject: [PATCH] Added route from pagespeed to monitor

---
 Client/src/App.jsx                           |  2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx | 27 ++++++++++++++++++--
 Client/src/Pages/PageSpeed/index.jsx         | 16 ++++++++++--
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index cef1432c7..53bcb2c27 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -95,7 +95,7 @@ function App() {
             element={<ProtectedRoute Component={CreatePageSpeed} />}
           />
           <Route
-            path="page-speed/:monitorId"
+            path="pagespeed/:monitorId"
             element={<ProtectedRoute Component={PageSpeedDetails} />}
           />
         </Route>
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 107299b77..f0183fe28 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,13 +1,15 @@
 import { Box, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
@@ -38,6 +40,27 @@ const StatBox = ({ icon, title, value }) => {
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();
+  const [monitor, setMonitor] = useState({});
+  const { monitorId } = useParams();
+  const { authToken } = useSelector((state) => state.auth);
+
+  useEffect(() => {
+    const fetchMonitor = async () => {
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      setMonitor(res.data.data);
+    };
+
+    fetchMonitor();
+  }, []);
+
+  console.log(monitor);
 
   const data = {
     _id: "66ad34001d483d284550e8cb",
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 17964528a..a79cf5db7 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -13,6 +13,7 @@ import { useNavigate } from "react-router";
 
 const Card = ({ data }) => {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   /**
    * Helper function to get duration since last check or the last date checked
@@ -33,8 +34,19 @@ const Card = ({ data }) => {
   };
 
   return (
-    <Grid item lg={6} flexGrow={1}>
-      <Stack direction="row" gap={theme.gap.medium} p={theme.gap.ml}>
+    <Grid
+      item
+      lg={6}
+      flexGrow={1}
+      sx={{ "&:hover > .MuiStack-root": { backgroundColor: "#f9fafb" } }}
+    >
+      <Stack
+        direction="row"
+        gap={theme.gap.medium}
+        p={theme.gap.ml}
+        onClick={() => navigate(`/pagespeed/${data._id}`)}
+        sx={{ cursor: "pointer" }}
+      >
         <PageSpeedIcon style={{ width: theme.gap.ml, height: theme.gap.ml }} />
         <Box flex={1}>
           <Stack direction="row" justifyContent="space-between">