src/components/AuthPages/Login/index.jsx

@@ -8,7 +8,11 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
+import { useDispatch, useSelector } from "react-redux";
+import { updateUserInfo } from "../../../store/userInfo";
+
 export default function Login() {
+  const dispatch = useDispatch()
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -42,12 +46,14 @@ export default function Login() {
       if (loginResult.data.status > 0 && loginResult.data.session_token !='') { // just for a start
         localStorage.setItem("email", `${email}`);
         localStorage.setItem("session_token", `${loginResult.data.session_token}`);
+        localStorage.setItem("profile", `${JSON.stringify(loginResult.data.profile)}`);
         setLoginLoading(true);
          // userApi.getUserReminders(); //testing
         setTimeout(() => {
           toast.success("Login Successfully");
           navigate("/", { replace: true });
           setLoginLoading(false);
+          dispatch(updateUserInfo(loginResult.data.profile))
         }, 2000);
       } else {
         // toast.error("Invalid Credential");

src/components/Partials/Header.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -11,7 +12,9 @@ import Icons from "../Helpers/Icons";
 import ModalCom from "../Helpers/ModalCom";
 import SearchCom from "../Helpers/SearchCom";
 
+
 export default function Header({ logoutModalHandler, sidebarHandler }) {
+  const { userInfo } = useSelector((state) => state.userInfo);
   const [balanceDropdown, setbalanceValue] = useToggle(false);
   const [notificationDropdown, setNotificationValue] = useToggle(false);
   const [userProfileDropdown, setProfileDropdown] = useToggle(false);
@@ -436,11 +439,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
                 <div className="lg:block hidden">
                   <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
-                    Brokln Simons
+                    {userInfo.firstname + ' ' + userInfo.lastname}
                   </h1>
-                  <p className="text-sm text-thin-light-gray">
+                  {/* <p className="text-sm text-thin-light-gray">
                     @broklinslam_75
-                  </p>
+                  </p> */}
                 </div>
               </div>
               <div

src/middleware/AuthRoute.jsx

@@ -2,10 +2,12 @@ import { Navigate, Outlet } from "react-router-dom";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const isLogin = localStorage.getItem("email");
-  if (!isLogin) {
+  const profile = localStorage.getItem("profile")
+
+  if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
     return <Navigate to={redirectPath} replace />;
   }
   return children || <Outlet />;
 };
 
-export default AuthRoute;
+export default AuthRoute;

src/store/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import drawerReducer from "./drawer";
+import userReducer from "./userInfo";
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
+    userInfo: userReducer,
   },
-});
+});

src/store/userInfo.js

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  userInfo: JSON.parse(localStorage.getItem("profile"))
+};
+
+export const userSlice = createSlice({
+  name: "user",
+  initialState,
+  reducers: {
+    updateUserInfo: (state,payload) => {
+      // eslint-disable-next-line no-param-reassign
+      state.userInfo = payload.payload
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { updateUserInfo } = userSlice.actions;
+
+export default userSlice.reducer;