Set up Redux Toolkit, Added redux demo to /demo route

Client/package.json

@@ -18,9 +18,12 @@
     "@mui/x-charts": "^7.5.1",
     "@mui/x-data-grid": "7.3.2",
     "@mui/x-date-pickers": "7.3.2",
+    "@reduxjs/toolkit": "2.2.5",
+    "axios": "1.7.2",
     "dayjs": "1.11.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "9.1.2",
     "react-router": "^6.23.0",
     "react-router-dom": "^6.23.0"
   },

Client/src/Components/Button/index.jsx

@@ -39,20 +39,22 @@ const levelConfig = {
  * @param {string} props.label - The label of the button
  * @param {React.ReactNode} props.img - Image for button
  * @param {boolean} [props.disabled] - Whether the button is disabled
- * @param {Object} prps.sx - Styles for the button
+ * @param {function} props.onClick - Function to run when the button is clicked
+ * @param {Object} props.sx - Styles for the button
  * @returns {JSX.Element}
  * @example
  * // Render an error button
  * <Button level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ level, label, disabled, img, sx }) => {
+const Button = ({ level, label, disabled, img, onClick, sx }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
       variant={variant}
       color={color}
       disabled={disabled}
+      onClick={onClick}
       sx={{
         textTransform: "none",
         ...sx,
@@ -68,6 +70,7 @@ Button.propTypes = {
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   img: PropTypes.node,
+  onClick: PropTypes.func,
   sx: PropTypes.object,
   disabled: PropTypes.bool,
 };

Client/src/Components/Section/index.jsx

@@ -16,7 +16,7 @@ import AddIcon from "@mui/icons-material/Add";
 /**
  * @component
  * @param {Object} props
- * @param { Array} props.montitors - Array of monitors associated with the section
+ * @param { Array} props.monitors - Array of monitors associated with the section
  * @returns {JSX.Element}
  * @example
  * // Renders a section component with a list of monitors
@@ -29,7 +29,6 @@ const Section = ({ monitors }) => {
   );
 
   useEffect(() => {
-    console.log("Monitor states updated", monitorStates);
     // Update DB here
   }, [monitorStates]);
 

Client/src/Features/Monitors/monitorsSlice.js

@@ -0,0 +1,36 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = [
+  {
+    _id: 1,
+    userId: 1,
+    name: "Google",
+    description: "Search engine",
+    url: "https://www.google.com",
+    isActive: true,
+    interval: 1000,
+    createdAt: "2021-01",
+    updatedAt: "2021-01",
+  },
+  {
+    _id: 2,
+    userId: 1,
+    name: "Yahoo",
+    description: "Search engine",
+    url: "https://www.yahoo.com",
+    isActive: true,
+    interval: 1000,
+    createdAt: "2021-01",
+    updatedAt: "2021-01",
+  },
+];
+
+const monitorsSlice = createSlice({
+  name: "monitors",
+  initialState,
+  reducers: { setMonitors: (state, action) => action.payload },
+});
+
+export const { setMonitors } = monitorsSlice.actions;
+
+export default monitorsSlice.reducer;

Client/src/Pages/Demo/Demo.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import axios from "axios";
 import Button from "../../Components/Button/";
 import Link from "../../Components/Link";
 import {
@@ -12,6 +13,7 @@ import {
   RadioGroup,
   Tab,
   Tabs,
+  Typography,
 } from "@mui/material";
 import { ColoredLabel, StatusLabel } from "../../Components/Label/";
 import Avatar from "../../Components/Avatar/";
@@ -25,6 +27,11 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import AddIcon from "@mui/icons-material/Add";
 import Divider from "@mui/material/Divider";
 
+// Redux
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { setMonitors } from "../../Features/Monitors/monitorsSlice";
+
 const cols = [
   {
     field: "name",
@@ -84,13 +91,15 @@ const steps = [
   { label: "Invite your team", content: "Start collaborating with your team" },
 ];
 
-const monitors = [
+const demoMonitors = [
   { id: 0, name: "Google", isActive: true },
   { id: 1, name: "Yahoo", isActive: false },
   { id: 2, name: "Reddit", isActive: true },
 ];
 
 const Demo = () => {
+  const dispatch = useDispatch();
+
   const [radio, setRadio] = React.useState(1);
   const [tab, setTab] = React.useState("departments");
   const [date, setDate] = React.useState("Pick a date!");
@@ -167,8 +176,52 @@ const Demo = () => {
   ];
 
   const theme = useTheme();
+
+  // *********************************
+  // Redux Demo
+  // *********************************
+  const monitors = useSelector((state) => state.monitors);
+
   return (
     <div>
+      <div style={{ padding: "4rem", border: "1px solid black" }}>
+        <Typography variant="h4">Redux Demo</Typography>
+        <Typography variant="h6">Monitors</Typography>
+        <table
+          style={{ border: "1px solid black", borderCollapse: "collapse" }}
+        >
+          <tbody>
+            <tr>
+              <th style={{ border: "1px solid black" }}>Name</th>
+              <th style={{ border: "1px solid black" }}>URL</th>
+            </tr>
+            {monitors.map((monitor) => {
+              return (
+                <tr key={monitor._id}>
+                  <td style={{ border: "1px solid black" }}>{monitor.name}</td>
+                  <td style={{ border: "1px solid black" }}>{monitor.url}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        <Button
+          level="primary"
+          label="Get Monitors"
+          onClick={async () => {
+            try {
+              const response = await axios.get(
+                "http://localhost:5000/api/v1/monitors"
+              );
+              const monitorsResponse = response.data;
+              const monitors = monitorsResponse.data;
+              dispatch(setMonitors(monitors));
+            } catch (error) {
+              console.log(error);
+            }
+          }}
+        />
+      </div>
       <ul style={{ listStyle: "none" }}>
         {links.map((link) => (
           <li key={link.url}>
@@ -304,7 +357,7 @@ const Demo = () => {
       </div>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
       <h4 id="section">Section</h4>
-      <Section monitors={monitors} />
+      <Section monitors={demoMonitors} />
     </div>
   );
 };

Client/src/main.jsx

@@ -5,12 +5,17 @@ import "./index.css";
 import { BrowserRouter as Router, HashRouter } from "react-router-dom";
 import theme from "./Utils/Theme.js";
 import { ThemeProvider } from "@mui/material";
+import { Provider } from "react-redux";
+import store from "./store";
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Router>
-        <App />
-      </Router>
-    </ThemeProvider>
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <Router>
+          <App />
+        </Router>
+      </ThemeProvider>
+    </Provider>
   </React.StrictMode>
 );

Client/src/store.js

@@ -0,0 +1,6 @@
+import { configureStore } from "@reduxjs/toolkit";
+import monitorsReducer from "./Features/Monitors/monitorsSlice";
+
+export default configureStore({
+  reducer: { monitors: monitorsReducer },
+});