From 076c98f69a7b80bb2146f49c286fce8302545f06 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 19 Jul 2024 14:46:26 -0400
Subject: [PATCH] Fetch monitor from params

---
 Client/src/Pages/Monitors/Configure/index.jsx | 25 ++++++++++++++++---
 Client/src/Pages/Monitors/Details/index.jsx   |  1 +
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 901a97122..95e18ce9a 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -1,17 +1,36 @@
-import { useNavigate } from "react-router";
+import { useNavigate, useParams } from "react-router";
+import { useTheme } from "@emotion/react";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 
 import "./index.css";
-import { useTheme } from "@emotion/react";
 
 /**
- * Configure component displays monitor configurations and allows for editing actions.
+ * Configure page displays monitor configurations and allows for editing actions.
  * @component
  */
 const Configure = () => {
   const navigate = useNavigate();
   const theme = useTheme();
+  const dispatch = useDispatch();
+
+  const [monitor, setMonitor] = useState();
+  const { monitorId } = useParams();
+  const { authToken } = useSelector((state) => state.auth);
+  useEffect(() => {
+    const fetchMonitor = async () => {
+      const res = await axiosInstance.get(`/monitors/${monitorId}`, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+      setMonitor(res.data.data);
+    };
+    fetchMonitor();
+  }, [monitorId, authToken]);
 
   return (
     <div
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 8ccf15d01..7e9214f18 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -237,6 +237,7 @@ const DetailsPage = () => {
             level="tertiary"
             label="Configure"
             img={<SettingsIcon />}
+            onClick={() => navigate(`/monitors/configure/${monitorId}`)}
             sx={{
               ml: "auto",
               alignSelf: "flex-end",