Avatar Load

src/app/(auth)/log-in/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import React from "react";
 import styles from "./loginPage.module.scss";
 import Box from "@mui/material/Box";
@@ -8,12 +8,12 @@ import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
 import Link from "next/link";
 import CustomizedInputsStyled from "@/ui/CustomizedInputsStyled";
 import CustomizedButtons from "@/ui/customizedButtons";
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useState } from 'react';
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
 import { loginApi } from "@/services/api/loginApi";
-import { FormControl } from '@mui/material';
+import { FormControl } from "@mui/material";
 import CustomTextField from "@/ui/CustomTextField";
 import { useRouter } from "next/navigation";
 import { useDispatch, useSelector } from "react-redux";
@@ -28,23 +28,33 @@ const loginSchema = z.object({
 type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
-  const router = useRouter()
-  const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+  } = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
   });
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const dispatch = useDispatch();
   const onSubmit = async (data: LoginFormValues) => {
     try {
       const response = await loginApi(data);
-      localStorage.setItem('token', response.token);
-      localStorage.setItem('refreshToken', response.refreshToken);
-      dispatch(setAuthTokens({ token: response.token, refreshToken: response.refreshToken }));
+      localStorage.setItem("token", response.token);
+      localStorage.setItem("refreshToken", response.refreshToken);
+      dispatch(
+        setAuthTokens({
+          token: response.token,
+          refreshToken: response.refreshToken,
+        })
+      );
       dispatch(setUserDetails(response));
 
-      router.push('/home');
+      router.push("/home");
     } catch (err) {
-      setError('Invalid credentials');
+      setError("Invalid credentials");
     }
   };
 

src/components/wrapper/dashboardWrapper.tsx

@@ -21,6 +21,7 @@ import styled from "@emotion/styled";
 import { BUILDING, GEAR } from "@/utilities/svgConstant";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useRouter } from "next/navigation";
+import { useSelector } from "react-redux";
 
 const drawerWidth = 260;
 
@@ -74,7 +75,8 @@ export default function DashboardWrapper(props: Props) {
   const { children: Children } = props;
   const [mobileOpen, setMobileOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
-  const router = useRouter()
+  const userData = useSelector((state: any) => state?.auth);
+  const router = useRouter();
   const handleDrawerClose = () => {
     setIsClosing(true);
     setMobileOpen(false);
@@ -91,6 +93,10 @@ export default function DashboardWrapper(props: Props) {
   };
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
+  React.useEffect(() => {
+    console.log("User Data", userData);
+  }, [userData]);
+
   const drawer = (
     <>
       <Toolbar sx={{ minHeight: "72px !important" }}>
@@ -106,7 +112,7 @@ export default function DashboardWrapper(props: Props) {
           <ListItem
             key={text}
             disablePadding
-            selected={activeIndex === index} // Add this line to make the item "active"
+            selected={true} // Add this line to make the item "active"
             onClick={() => setActiveIndex(index)} // Add this line to handle click events
           >
             <ListItemButton>
@@ -125,10 +131,10 @@ export default function DashboardWrapper(props: Props) {
     window !== undefined ? () => window().document.body : undefined;
 
   const logoutHandler = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('refreshToken');
-    router.push('/log-in');
-  }
+    localStorage.removeItem("token");
+    localStorage.removeItem("refreshToken");
+    router.push("/log-in");
+  };
 
   return (
     <Box
@@ -169,18 +175,34 @@ export default function DashboardWrapper(props: Props) {
                 borderRadius: "30px",
               }}
             >
-              <Avatar
-                sx={{
-                  width: 34,
-                  height: 34,
-                  cursor: "pointer",
-                  background: "var(--primary_light)",
-                  color: "var(--primary_Active_text)",
-                  fontSize: "0.8rem",
-                }}
-                alt="Remy Sharp"
-                src="/static/images/avatar/1.jpg"
-              />
+              {userData?.image && userData?.image?.length > 0 ? (
+                <Avatar
+                  sx={{
+                    width: 34,
+                    height: 34,
+                    cursor: "pointer",
+                    background: "var(--primary_light)",
+                    color: "var(--primary_Active_text)",
+                    fontSize: "0.8rem",
+                  }}
+                  alt="Remy Sharp"
+                  src={userData?.image}
+                />
+              ) : (
+                <Avatar
+                  sx={{
+                    width: 34,
+                    height: 34,
+                    cursor: "pointer",
+                    background: "var(--primary_light)",
+                    color: "var(--primary_Active_text)",
+                    fontSize: "0.8rem",
+                  }}
+                >
+                  {userData?.firstName?.charAt(0)}
+                </Avatar>
+              )}
+
               <IconButton aria-label="log out" size="medium" color="error">
                 <LogoutIcon fontSize="small" onClick={logoutHandler} />
               </IconButton>

src/services/store/authSlice.ts

@@ -1,6 +1,6 @@
 // store/slices/authSlice.ts
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { LoginResponse } from '../api/loginApi';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { LoginResponse } from "../api/loginApi";
 
 interface AuthState {
   token: string | null;
@@ -18,16 +18,16 @@ const initialState: AuthState = {
   token: null,
   refreshToken: null,
   id: 0,
-  username: '',
-  email: '',
-  firstName: '',
-  lastName: '',
-  gender: '',
-  image: '',
+  username: "",
+  email: "",
+  firstName: "",
+  lastName: "",
+  gender: "",
+  image: "",
 };
 
 const authSlice = createSlice({
-  name: 'auth',
+  name: "auth",
   initialState,
   reducers: {
     setAuthTokens: (
@@ -36,17 +36,25 @@ const authSlice = createSlice({
     ) => {
       state.token = action.payload.token;
       state.refreshToken = action.payload.refreshToken;
-      localStorage.setItem('token', action.payload.token);
-      localStorage.setItem('refreshToken', action.payload.refreshToken);
+      localStorage.setItem("token", action.payload.token);
+      localStorage.setItem("refreshToken", action.payload.refreshToken);
     },
     clearAuthTokens: (state) => {
       state.token = null;
       state.refreshToken = null;
-      localStorage.removeItem('token');
-      localStorage.removeItem('refreshToken');
+      localStorage.removeItem("token");
+      localStorage.removeItem("refreshToken");
     },
     setUserDetails: (state, action: PayloadAction<LoginResponse>) => {
-      state = action.payload;
+      state.token = action.payload.token;
+      state.refreshToken = action.payload.refreshToken;
+      state.id = action.payload.id;
+      state.username = action.payload.username;
+      state.email = action.payload.email;
+      state.firstName = action.payload.firstName;
+      state.lastName = action.payload.lastName;
+      state.gender = action.payload.gender;
+      state.image = action.payload.image;
     },
   },
 });