From cc58bde750f4e15fc8c1e19f7f652602a3026550 Mon Sep 17 00:00:00 2001
From: Ian Day <ian@ianday.me>
Date: Sat, 23 Nov 2024 18:33:36 -0500
Subject: [PATCH] feat(Frontend): add name to user store

---
 frontend/src/components/user-nav.tsx          | 44 ++++++++++---------
 .../pages/auth/components/user-auth-form.tsx  |  3 ++
 frontend/src/store/user-store.ts              |  3 ++
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/user-nav.tsx b/frontend/src/components/user-nav.tsx
index 3d99042..f5b7282 100644
--- a/frontend/src/components/user-nav.tsx
+++ b/frontend/src/components/user-nav.tsx
@@ -10,48 +10,52 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useUserStore } from '@/store/user-store'
+import { Link } from 'react-router-dom'
 
 export function UserNav() {
+  const firstName = useUserStore.getState().user?.firstName
+  const lastName = useUserStore.getState().user?.lastName
+  const email = useUserStore.getState().user?.email
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
           <Avatar className='h-8 w-8'>
             <AvatarImage src='/avatars/01.png' alt='@shadcn' />
-            <AvatarFallback>SN</AvatarFallback>
+            <AvatarFallback>
+              {firstName?.[0]}
+              {lastName?.[0]}
+            </AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56' align='end' forceMount>
         <DropdownMenuLabel className='font-normal'>
           <div className='flex flex-col space-y-1'>
-            <p className='text-sm font-medium leading-none'>satnaing</p>
+            <p className='text-sm font-medium leading-none'>
+              {firstName} {lastName}
+            </p>
             <p className='text-xs leading-none text-muted-foreground'>
-              satnaingdev@gmail.com
+              {email}
             </p>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem>
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>New Team</DropdownMenuItem>
+          <Link to={'/settings'}>
+            <DropdownMenuItem>Profile</DropdownMenuItem>
+          </Link>
+          <Link to={'/settings'}>
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+          </Link>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
+
+        <Link to={'/sign-out'}>
+          <DropdownMenuItem>Logout </DropdownMenuItem>
+        </Link>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/frontend/src/pages/auth/components/user-auth-form.tsx b/frontend/src/pages/auth/components/user-auth-form.tsx
index c58148b..19ef54b 100644
--- a/frontend/src/pages/auth/components/user-auth-form.tsx
+++ b/frontend/src/pages/auth/components/user-auth-form.tsx
@@ -74,6 +74,9 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
           setCredentials({
             accessToken: data.access,
             refreshToken: data.refresh,
+            firstName: data.user.first_name,
+            lastName: data.user.last_name,
+            email: data.user.email,
           })
 
           navigate('/')
diff --git a/frontend/src/store/user-store.ts b/frontend/src/store/user-store.ts
index 917a005..97867b9 100644
--- a/frontend/src/store/user-store.ts
+++ b/frontend/src/store/user-store.ts
@@ -5,6 +5,9 @@ import { persist } from 'zustand/middleware'
 interface User {
   accessToken: string
   refreshToken: string
+  firstName: string
+  lastName: string
+  email: string
 }
 
 interface UserState {