Merge remote-tracking branch 'upstream/master' into feat/protected-routes

Client/src/Components/NavBar/index.jsx

@@ -13,6 +13,11 @@ 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 { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
+
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
 
@@ -30,6 +35,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 +47,38 @@ function NavBar() {
     setAnchorElUser(event.currentTarget);
   };
 
+  /**
+   * Handles logging out the user
+   *
+   */
+  const logout = () => {
+    // Clear auth state
+    dispatch(clearAuthState());
+    dispatch(clearMonitorState());
+    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 +185,7 @@ function NavBar() {
                 <MenuItem
                   id="menu-item"
                   key={setting}
-                  onClick={handleCloseUserMenu}
+                  onClick={() => handleCloseUserMenu(setting)}
                 >
                   <Typography
                     fontSize="var(--env-var-font-size-medium)"

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;

Client/src/Features/Monitors/monitorsSlice.js

@@ -94,6 +94,6 @@ const monitorsSlice = createSlice({
   },
 });
 
-export const { setMonitors } = monitorsSlice.actions;
+export const { setMonitors, clearMonitorState } = monitorsSlice.actions;
 
 export default monitorsSlice.reducer;