From f4832f03245a88cbc81ecf34fc904d80d4b9b81d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 10 May 2024 12:03:02 -0700
Subject: [PATCH] Added state to section component, removed console.log from
 button

---
 Client/src/Components/Button/Button.jsx   |  1 -
 Client/src/Components/Section/Section.jsx | 27 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Button/Button.jsx b/Client/src/Components/Button/Button.jsx
index 727a3d941..0756cda1b 100644
--- a/Client/src/Components/Button/Button.jsx
+++ b/Client/src/Components/Button/Button.jsx
@@ -47,7 +47,6 @@ const levelConfig = {
 
 const Button = ({ level, label, disabled, img, sx }) => {
   const { variant, color } = levelConfig[level];
-  console.log(img);
   return (
     <MuiButton
       variant={variant}
diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/Section.jsx
index 978ae72b4..3ce773c81 100644
--- a/Client/src/Components/Section/Section.jsx
+++ b/Client/src/Components/Section/Section.jsx
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
 import {
   Box,
   Container,
@@ -23,7 +24,24 @@ import AddIcon from "@mui/icons-material/Add";
  */
 
 const Section = ({ monitors }) => {
-  console.log(monitors);
+  const [monitorStates, setMonitorStates] = useState(
+    monitors.map((monitor) => monitor.isActive)
+  );
+
+  useEffect(() => {
+    console.log("Monitor states updated", monitorStates);
+    // Update DB here
+  }, [monitorStates]);
+
+  const handleMonitor = (monitorIndex) => {
+    setMonitorStates((prevStates) => {
+      const newStates = [...prevStates];
+      newStates[monitorIndex] = !newStates[monitorIndex];
+
+      return newStates;
+      // Need to update DB with new monitor state
+    });
+  };
   const theme = useTheme();
   return (
     <>
@@ -66,7 +84,7 @@ const Section = ({ monitors }) => {
         >
           <Typography>Servers List</Typography>
           <Button level="primary" label="Add new" />
-          {monitors.map((monitor) => {
+          {monitors.map((monitor, index) => {
             return (
               <Box
                 key={monitor.id}
@@ -85,7 +103,10 @@ const Section = ({ monitors }) => {
                 <MenuIcon
                   sx={{ color: `${theme.palette.section.borderColor}` }}
                 />
-                <Switch checked={monitor.isActive} />
+                <Switch
+                  checked={monitorStates[index]}
+                  onChange={() => handleMonitor(index)}
+                />
                 <Typography sx={{ flexGrow: 1 }}>{monitor.name}</Typography>
                 <DeleteOutlineIcon
                   sx={{ color: `${theme.palette.section.borderColor}` }}