Merge branch 'master' into feat/connect-login

Client/package.json

@@ -27,7 +27,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "9.1.2",
     "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.0"
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

Client/src/Components/DashboardMenu/index.jsx

@@ -6,6 +6,9 @@ import Incidents from "../../assets/Images/Icon-warning-gray.png";
 import SensorsIcon from "../../assets/Images/Icon-signal-gray.png";
 import AllInclusiveIcon from "../../assets/Images/Icon-link-gray.png";
 import SettingsIcon from "../../assets/Images/Icon-setting-gray.png";
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import pathMap from "../../Utils/PathMap";
 
 /**
  * @component
@@ -16,13 +19,56 @@ import SettingsIcon from "../../assets/Images/Icon-setting-gray.png";
  */
 
 function DashboardMenu() {
+  const [activeButton, setActiveButton] = useState(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    setActiveButton(location.pathname);
+  }, [location]);
+
+  const handleClick = (title, path) => {
+    setActiveButton(title);
+    navigate(path);
+  };
+
   return (
     <div className="dashboard-menu-container">
-      {DashboardMenuButton(Monitors, "Monitors", "/monitors")}
-      {DashboardMenuButton(Incidents, "Incidents", "/incidents")}
-      {DashboardMenuButton(SensorsIcon, "Status Pages", "/status")}
-      {DashboardMenuButton(AllInclusiveIcon, "Integrations", "/integrations")}
-      {DashboardMenuButton(SettingsIcon, "Settings", "/settings")}
+      {DashboardMenuButton(
+        Monitors,
+        "Monitors",
+        "/monitors",
+        activeButton === "/monitors",
+        () => handleClick(pathMap["/monitors"], "/monitors")
+      )}
+      {DashboardMenuButton(
+        Incidents,
+        "Incidents",
+        "/incidents",
+        activeButton === "/incidents",
+        () => handleClick(pathMap["/incidents"], "/incidents")
+      )}
+      {DashboardMenuButton(
+        SensorsIcon,
+        "Status Pages",
+        "/status",
+        activeButton === "/status",
+        () => handleClick(pathMap["/status"], "/status")
+      )}
+      {DashboardMenuButton(
+        AllInclusiveIcon,
+        "Integrations",
+        "/integrations",
+        activeButton === "/integrations",
+        () => handleClick(pathMap["/integrations"], "/integrations")
+      )}
+      {DashboardMenuButton(
+        SettingsIcon,
+        "Settings",
+        "/settings",
+        activeButton === "/settings",
+        () => handleClick(pathMap["/settings"], "/settings")
+      )}
     </div>
   );
 }

Client/src/Components/DashboardMenuButton/index.jsx

@@ -11,13 +11,9 @@ import { useNavigate } from "react-router-dom";
  * @returns {React.ReactElement} The rendered menu button component.
  */
 
-const DashboardMenuButton = (icon, title, to) => {
-  const [isActive, setIsActive] = useState(false);
-  const navigate = useNavigate();
-
+const DashboardMenuButton = (icon, title, to, isActive, onClick) => {
   const handleClick = () => {
-    setIsActive(!isActive);
-    navigate(to);
+    onClick();
   };
 
   return (

Client/src/Pages/Register/index.jsx

@@ -50,6 +50,8 @@ const Register = () => {
         return { ...acc, [err.path[0]]: err.message };
       }, {});
       setErrors(validationErrors);
+    } else {
+      setErrors({});
     }
   }, []);
 

Client/src/Utils/PathMap.js

@@ -0,0 +1,9 @@
+const pathMap = {
+    "/monitors": "Monitors",
+    "/incidents": "Incidents",
+    "/status" : "Status Pages",
+    "/integrations": "Integrations",
+    "/settings" : "Settings"
+}
+
+export default pathMap;

Client/vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  optimizeDeps: {
+    include: ['@mui/material/Tooltip', '@emotion/styled'],
+  },
+})