left side bar title issue and user slice addition

Author: robbins23

README.md

@@ -9,7 +9,7 @@ This is a free admin dashboard template that uses **Daisy UI** and **Next js** A
 
 ## Preview
 
-<!-- 🚀 [Live preview](https://tailwind-dashboard-template-dashwind.vercel.app/) -->
+🚀 [Live preview](https://admin-dashboard-nextjs-daisyui-template.vercel.app/login)
 
 
 <!-- ![App Screenshot](https://ik.imagekit.io/vu5t8xb15vzcx/tr:h-600/Screenshot_2023-05-09_at_12.57.37_PM_z94SiShUDS.png?updatedAt=1683617550144) -->

src/containers/left-sidebar.tsx

@@ -6,12 +6,13 @@ import SidebarSubmenu from './sidebar-submenu';
 import routes from '@/helper/sidebar-routes';
 import { usePathname } from 'next/navigation'
 import { useEffect } from 'react';
-import { useAppDispatch } from '@/lib/hooks';
+import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { setPageTitle } from '@/features/common/headerSlice';
 import { UserProfile } from '@/helper/types';
 import BookmarkSquareIcon from '@heroicons/react/24/outline/BookmarkSquareIcon'
 import ChevronUpIcon from '@heroicons/react/24/outline/ChevronUpIcon'
 import ArrowUpOnSquareIcon from '@heroicons/react/24/outline/ArrowUpOnSquareIcon'
+import { getUserInfo } from '@/features/common/userSlice';
 
 interface LeftSidebarProps {}
 
@@ -25,27 +26,42 @@ function LeftSidebar(props: LeftSidebarProps) {
         const leftSidebarDrawer = document.getElementById('left-sidebar-drawer');
         if (leftSidebarDrawer) leftSidebarDrawer.click();
     };
+    const user = useAppSelector((state) => state.user);
 
-    const user : UserProfile = {
-        name : "Alex",
-        avatar : "https://reqres.in/img/faces/7-image.jpg",
-        emailId : ""
-    }
 
     useEffect(() => {
         console.log(pathname)
         let routeObj = routes.filter((r) => {return r.path == pathname})[0]
         if(routeObj){
             dispatch(setPageTitle({title : routeObj.pageTitle}))
+        }else{
+            const secondSlashIndex = pathname.indexOf('/', pathname.indexOf('/') + 1)
+            if (secondSlashIndex !== -1) {
+                const substringBeforeSecondSlash = pathname.substring(0, secondSlashIndex);
+                let submenuRouteObj = routes.filter((r) => {return r.path == substringBeforeSecondSlash})[0]
+                if(submenuRouteObj.submenu){
+                    let submenuObj = submenuRouteObj.submenu.filter((r) => {return r.path == pathname})[0]
+                    console.log("herere", submenuObj)
+                    dispatch(setPageTitle({title : submenuObj.pageTitle}))
+                    
+                }
+            }
         }
     }, [pathname])
 
+
+    useEffect(() => {
+        dispatch(getUserInfo())
+    }, [])
+
     const logoutUser = async () => {
         console.log("here")
         localStorage.clear();
         window.location.href = '/'
       }
 
+      
+
 
     return (
         <div className="drawer-side z-30 overflow-hidden">

src/features/common/userSlice.ts

@@ -0,0 +1,48 @@
+import { APIResponse, UserProfile } from '@/helper/types';
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+
+
+export const getUserInfo = createAsyncThunk<UserProfile, void>(
+    "user/getUserInfo",
+    async (thunkApi) => {
+        // const response = await axios.get<APIResponse>("/workspace/home");
+        // return response.data.payload;
+        return {name: "Alex", avatar : "https://reqres.in/img/faces/7-image.jpg", emailId : ""}
+    }
+  );
+
+const initialState: UserProfile = {
+    name: "",
+    avatar: "",
+    emailId: "",
+};
+
+export const userSlice = createSlice({
+    name: 'user',
+    initialState,
+    reducers: {
+        
+
+       
+    },
+
+    extraReducers: (builder) => {
+        builder.addCase(getUserInfo.pending, (state) => {
+            
+        });
+        builder.addCase(getUserInfo.fulfilled, (state, action) => {
+            console.log(action.payload)
+            state.name = action.payload.name
+            state.avatar = action.payload.avatar
+        });
+        builder.addCase(getUserInfo.rejected, (state) => {
+            
+        });
+    }
+});
+
+export const {  } = userSlice.actions;
+
+export default userSlice.reducer;

src/helper/sidebar-routes.tsx

@@ -30,7 +30,7 @@ const routes: SidebarMenuObj[] = [
         pageTitle : "Leads"
     },
     {
-        path: '',
+        path: '/settings',
         icon: <Cog6ToothIcon className={`${iconClasses} inline`} />,
         pageName: 'Settings',
         pageTitle : "",

src/helper/types.ts

@@ -24,6 +24,13 @@ export interface SubmenuItem {
 
 // Routes Interface End ------------------------
 
+/**
+ * Interface for api response
+ */
+export interface APIResponse {
+    payload: any;
+    message: string; 
+}
 
 /**
  * Interface for UserProfile data.

src/lib/store.ts

@@ -1,7 +1,9 @@
 import headerSlice from '@/features/common/headerSlice'
 import modalSlice from '@/features/common/modalSlice'
 import rightDrawerSlice from '@/features/common/rightDrawerSlice'
+import userSlice from '@/features/common/userSlice'
 import leadSlice from '@/features/leads/leadSlice'
+
 import { configureStore } from '@reduxjs/toolkit'
 
 export const makeStore = () => {
@@ -10,7 +12,8 @@ export const makeStore = () => {
       header : headerSlice,
       rightDrawer : rightDrawerSlice,
       leads : leadSlice,
-      modal : modalSlice
+      modal : modalSlice,
+      user : userSlice
     }
   })
 }