Modified Integrations component to include props.

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/Components/Integrations/index.jsx

@@ -1,11 +1,17 @@
 import { Box, Typography, useTheme } from '@mui/material';
 import Button from '../Button';
+import PropTypes from 'prop-types';
 
 /**
  * Integrations component
- * @returns {JSX.Element}
+ * @param {Object} props - Props for the IntegrationsComponent.
+ * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.header - The header for the integration.
+ * @param {string} props.info - Information about the integration.
+ * @param {Function} props.onClick - The onClick handler for the integration button.
+ * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
  */
-const IntegrationsComponent = () => {
+const IntegrationsComponent = ({ url, header, info, onClick }) => {
   const theme = useTheme();
 
   return (
@@ -19,8 +25,8 @@ const IntegrationsComponent = () => {
     >
       <Box
         component="img"
-        src="https://via.placeholder.com/100"
-        alt="Placeholder"
+        src={url}
+        alt="Integration"
         width={100}
         height={100}
       />
@@ -32,8 +38,8 @@ const IntegrationsComponent = () => {
         flexDirection="column"
         alignItems="flex-start"
       >
-        <Typography variant="h6" component="div">
-          Header
+        <Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
+          {header}
         </Typography>
         <Typography
           variant="body1"
@@ -43,14 +49,23 @@ const IntegrationsComponent = () => {
             wordWrap: 'break-word',
             textAlign: 'left'
           }}
+          style={{ fontSize: '13px' }}
         >
-          This is a paragraph that provides more detail about the header.
+          {info}
         </Typography>
       </Box>
       
-      <Button label="Click Me" level="primary" />
+      <Button label="Click Me" level="primary" onClick={onClick} />
     </Box>
   );
 };
 
+// PropTypes for IntegrationsComponent
+IntegrationsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
 export default IntegrationsComponent;

Client/src/Pages/Integrations/index.jsx

@@ -1,40 +1,70 @@
-import IntegrationsComponent from '../../Components/Integrations';
 import { Box, Typography, useTheme } from '@mui/material';
+import IntegrationsComponent from '../../Components/Integrations';
+
 
 /**
  * Integrations Page Component
- * @returns {JSX.Element}
+ * @returns {JSX.Element} The JSX representation of the Integrations page.
  */
 const Integrations = () => {
-    const theme = useTheme();
-  
-    return (
+  const theme = useTheme();
+
+
+  const integrations = [
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 1',
+      info: 'Info about Integration 1',
+      onClick: () => {} 
+    },
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }, 
+    { 
+      url: 'https://via.placeholder.com/100',
+      header: 'Integration 2',
+      info: 'Info about Integration 2',
+      onClick: () => {} 
+    }
+    // Add more integrations as needed
+  ];
+
+  return (
+    <Box 
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      justifyContent="flex-start"
+      height="100vh"
+      p={theme.spacing(4)}
+      mt={theme.spacing(8)} 
+    >
+      <Typography variant="h4" component="h1" gutterBottom style={{ fontSize: '16px' }}>
+        Integrations
+      </Typography>
+      <Typography variant="h6" component="h2" gutterBottom style={{ fontSize: '13px' }}>
+        Connect Uptime Genie to your favorite service
+      </Typography>
       <Box 
-        display="flex"
-        flexDirection="column"
-        alignItems="flex-start"
-        justifyContent="flex-start"
-        height="100vh"
-        p={theme.spacing(4)}
-        mt={theme.spacing(8)} 
+        display="flex" 
+        flexWrap="wrap" 
+        gap={theme.spacing(4)}
       >
-        <Typography variant="h4" component="h1" gutterBottom>
-          Integrations
-        </Typography>
-        <Typography variant="h6" component="h2" gutterBottom>
-          Connect Uptime Genie to your favorite service
-        </Typography>
-        <Box 
-          display="flex" 
-          flexWrap="wrap" 
-          gap={theme.spacing(4)}
-        >
-          <IntegrationsComponent />
-          <IntegrationsComponent />
-          <IntegrationsComponent />
-        </Box>
+        {integrations.map((integration, index) => (
+          <IntegrationsComponent 
+            key={index}
+            url={integration.url}
+            header={integration.header}
+            info={integration.info}
+            onClick={integration.onClick}
+          />
+        ))}
       </Box>
-    );
-  };
-  
-  export default Integrations;
+    </Box>
+  );
+};
+
+export default Integrations;

Client/src/Pages/Register/index.jsx

@@ -50,10 +50,21 @@ const Register = () => {
         return { ...acc, [err.path[0]]: err.message };
       }, {});
       setErrors(validationErrors);
+    } else {
+      setErrors({});
     }
   }, []);
 
   const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    // Extract and validate individual fields as input changes
+    const fieldSchema = registerValidation.extract(fieldName);
+    const { error } = fieldSchema.validate(e.target.value);
+    let errMsg = "";
+    if (error) {
+      errMsg = error.message;
+    }
+    setErrors({ ...errors, [fieldName]: errMsg });
     const newForm = { ...form, [idMap[e.target.id]]: e.target.value };
     setForm(newForm);
   };
@@ -77,8 +88,7 @@ const Register = () => {
     } catch (error) {
       if (error.name === "ValidationError") {
         // TODO Handle validation errors
-        console.log(error);
-        alert("Invalid input");
+        alert(error);
       } else if (error.response) {
         // TODO handle dispatch errors
         alert(error.response.msg);

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'],
+  },
+})