From 7d7b155d45bb81c9eb28bcfac322dbaaadc68cf5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 24 Jun 2024 11:21:30 -0700
Subject: [PATCH 1/2] AdImplemented logout funcationality:

---
 Client/src/Components/NavBar/index.jsx | 35 ++++++++++++++++++++++++--
 Client/src/Features/Auth/authSlice.js  | 15 ++++++++---
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index 68ad9fb55..e6c8b7de9 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -13,6 +13,9 @@ import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
 import ChevronDown from "../../assets/Images/Icon-chevron-down.png";
+import { clearAuthState } from "../../Features/Auth/authSlice";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
 
@@ -30,6 +33,8 @@ const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
 function NavBar() {
   const theme = useTheme();
   const [anchorElUser, setAnchorElUser] = useState(null);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   /**
    * Handles opening the user menu.
@@ -40,11 +45,37 @@ function NavBar() {
     setAnchorElUser(event.currentTarget);
   };
 
+  /**
+   * Handles logging out the user
+   *
+   */
+  const logout = () => {
+    // Clear auth state
+    dispatch(clearAuthState());
+    navigate("/");
+  };
+
   /**
    * Handles closing the user menu.
    */
-  const handleCloseUserMenu = () => {
+  const handleCloseUserMenu = (setting) => {
     setAnchorElUser(null);
+    switch (setting) {
+      case "Profile":
+        console.log("Profile");
+        break;
+      case "Team":
+        console.log("Team");
+        break;
+      case "Invite Colleagues":
+        console.log("Invite Colleagues");
+        break;
+      case "Logout":
+        logout();
+        break;
+      default:
+        break;
+    }
   };
 
   return (
@@ -151,7 +182,7 @@ function NavBar() {
                 <MenuItem
                   id="menu-item"
                   key={setting}
-                  onClick={handleCloseUserMenu}
+                  onClick={() => handleCloseUserMenu(setting)}
                 >
                   <Typography
                     fontSize="var(--env-var-font-size-medium)"
diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index ebf8eb7bd..8c88dfca7 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -50,17 +50,25 @@ const handleAuthRejected = (state, action) => {
 const authSlice = createSlice({
   name: "auth",
   initialState,
-  reducers: {},
+  reducers: {
+    clearAuthState: (state) => {
+      state.authToken = "";
+      state.user = "";
+      state.isLoading = false;
+      state.success = true;
+      state.msg = "Logged out successfully";
+    },
+  },
   extraReducers: (builder) => {
     builder
       // Register thunk
-      .addCase(register.pending, (state, action) => {
+      .addCase(register.pending, (state) => {
         state.isLoading = true;
       })
       .addCase(register.fulfilled, handleAuthFulfilled)
       .addCase(register.rejected, handleAuthRejected)
       // Login thunk
-      .addCase(login.pending, (state, action) => {
+      .addCase(login.pending, (state) => {
         state.isLoading = true;
       })
       .addCase(login.fulfilled, handleAuthFulfilled)
@@ -69,3 +77,4 @@ const authSlice = createSlice({
 });
 
 export default authSlice.reducer;
+export const { clearAuthState } = authSlice.actions;

From 3c8de47c5f1680a42f88e3b276f4e9c6153211ab Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 24 Jun 2024 12:00:49 -0700
Subject: [PATCH 2/2] Added clearing monitor state

---
 Client/src/Components/NavBar/index.jsx        |  3 +++
 Client/src/Features/Monitors/monitorsSlice.js | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index e6c8b7de9..9dedbcb61 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -14,6 +14,8 @@ import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
 import ChevronDown from "../../assets/Images/Icon-chevron-down.png";
 import { clearAuthState } from "../../Features/Auth/authSlice";
+import { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
+
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
@@ -52,6 +54,7 @@ function NavBar() {
   const logout = () => {
     // Clear auth state
     dispatch(clearAuthState());
+    dispatch(clearMonitorState());
     navigate("/");
   };
 
diff --git a/Client/src/Features/Monitors/monitorsSlice.js b/Client/src/Features/Monitors/monitorsSlice.js
index 8cb5e323f..eaa4fcba5 100644
--- a/Client/src/Features/Monitors/monitorsSlice.js
+++ b/Client/src/Features/Monitors/monitorsSlice.js
@@ -46,7 +46,14 @@ export const getMonitorsByUserId = createAsyncThunk(
 const monitorsSlice = createSlice({
   name: "monitors",
   initialState,
-  reducers: {},
+  reducers: {
+    clearMonitorState: (state) => {
+      state.isLoading = false;
+      state.monitors = [];
+      state.success = null;
+      state.msg = null;
+    },
+  },
   extraReducers: (builder) => {
     builder
       // *****************************************************
@@ -86,6 +93,6 @@ const monitorsSlice = createSlice({
   },
 });
 
-export const { setMonitors } = monitorsSlice.actions;
+export const { setMonitors, clearMonitorState } = monitorsSlice.actions;
 
 export default monitorsSlice.reducer;