"Updated Navbar component to use react-redux and added logout functio…

…nality"
ucangun · Sep 17, 2024 · 6769992 · 6769992
1 parent 0ea90c1
commit 6769992
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 36 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -14,11 +14,36 @@ import {
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import Logo from "./Logo";
+import { useSelector } from "react-redux";
+import { RootState } from "../app/store";
+import useAuthCall from "../hooks/useAuthCall";
 
 const pages = ["Products", "Pricing", "Blog"];
-const settings = ["Profile", "Account", "Logout"];
+
+interface SettingsType {
+  title: string;
+  onClick: () => void;
+}
 
 function Navbar() {
+  const { currentUser } = useSelector((state: RootState) => state.auth);
+  const { logout } = useAuthCall();
+
+  const settings: SettingsType[] = [
+    {
+      title: "Profile",
+      onClick: () => {},
+    },
+    {
+      title: "Account",
+      onClick: () => {},
+    },
+    {
+      title: "Logout",
+      onClick: logout,
+    },
+  ];
+
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
     null
   );
@@ -132,37 +157,50 @@ function Navbar() {
           {/* Pages */}
           {/* Avatar  */}
           <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography sx={{ textAlign: "center" }}>
-                    {setting}
-                  </Typography>
-                </MenuItem>
-              ))}
-            </Menu>
+            {currentUser ? (
+              <>
+                <Tooltip title="Open settings">
+                  <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                    <Avatar
+                      alt="Remy Sharp"
+                      src="/static/images/avatar/2.jpg"
+                    />
+                  </IconButton>
+                </Tooltip>
+                <Menu
+                  sx={{ mt: "45px" }}
+                  id="menu-appbar"
+                  anchorEl={anchorElUser}
+                  anchorOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                  }}
+                  keepMounted
+                  transformOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                  }}
+                  open={Boolean(anchorElUser)}
+                  onClose={handleCloseUserMenu}
+                >
+                  {settings.map((setting) => (
+                    <MenuItem key={setting.title} onClick={handleCloseUserMenu}>
+                      <Typography
+                        sx={{ textAlign: "center" }}
+                        onClick={setting.onClick}
+                      >
+                        {setting.title}
+                      </Typography>
+                    </MenuItem>
+                  ))}
+                </Menu>
+              </>
+            ) : (
+              <Box>
+                <Button>sdfgdfgdsf</Button>
+              </Box>
+            )}
           </Box>
-          {/* Avatar  */}
         </Toolbar>
       </Container>
     </AppBar>

diff --git a/src/features/authSlice.tsx b/src/features/authSlice.tsx
@@ -33,13 +33,24 @@ const authSlice = createSlice({
       state.currentUser = payload.user.username;
       state.token = payload.token;
     },
+    logoutSuccess: (state) => {
+      state.loading = false;
+      state.token = "";
+      state.currentUser = "";
+    },
     fetchFail: (state) => {
       state.loading = false;
       state.error = true;
     },
   },
 });
 
-export const { fetchStart, registerSuccess, fetchFail } = authSlice.actions;
+export const {
+  fetchStart,
+  registerSuccess,
+  loginSuccess,
+  logoutSuccess,
+  fetchFail,
+} = authSlice.actions;
 
 export default authSlice.reducer;
diff --git a/src/hooks/useAuthCall.tsx b/src/hooks/useAuthCall.tsx
@@ -1,15 +1,23 @@
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RegisterFormValues } from "../pages/Register";
 import axios from "axios";
-import { fetchFail, fetchStart, registerSuccess } from "../features/authSlice";
+import {
+  fetchFail,
+  fetchStart,
+  loginSuccess,
+  logoutSuccess,
+  registerSuccess,
+} from "../features/authSlice";
 import { LoginFormValues } from "../pages/Login";
 import { useNavigate } from "react-router-dom";
+import { RootState } from "../app/store";
 
 const BASE_URL: string = import.meta.env.VITE_BASE_URL;
 
 const useAuthCall = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const { token } = useSelector((state: RootState) => state.auth);
 
   // register
   const register = async (userInfo: RegisterFormValues): Promise<void> => {
@@ -27,18 +35,36 @@ const useAuthCall = () => {
 
   // login
   const login = async (userInfo: LoginFormValues): Promise<void> => {
+    dispatch(fetchStart());
     try {
-      dispatch(fetchStart());
       const { data } = await axios.post(`${BASE_URL}auth/login`, userInfo);
       console.log(data);
+      dispatch(loginSuccess(data));
       navigate("/");
     } catch (error) {
       dispatch(fetchFail());
       console.error(error);
     }
   };
 
-  return { register, login };
+  // logout
+  const logout = async (): Promise<void> => {
+    dispatch(fetchStart());
+    try {
+      await axios(`${BASE_URL}auth/logout`, {
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      });
+      dispatch(logoutSuccess());
+      navigate("/login");
+    } catch (error) {
+      dispatch(fetchFail());
+      console.error(error);
+    }
+  };
+
+  return { register, login, logout };
 };
 
 export default useAuthCall;