Updates UserNav to load user if auth is available

frontend/components/UserNav.tsx

@@ -1,4 +1,5 @@
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+'use client';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -7,53 +8,71 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { GearIcon } from '@radix-ui/react-icons';
+import { signOut, useSession } from 'next-auth/react';
+import { ReactElement } from 'react';
+
+export function UserNav(): ReactElement | null {
+  const session = useSession();
+
+  const avatarImageSrc = session.data?.user?.image ?? '';
+  const avatarImageAlt = session.data?.user?.name ?? 'unknown';
+  const avatarFallback = getAvatarFallback(session.data?.user?.name);
+
+  if (session.status === 'unauthenticated') {
+    return null;
+  }
 
-export function UserNav() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
-            {/* commenting out for now as it's causing flashing on save */}
-            {/* <AvatarImage src="/avatars/01.png" alt="@shadcn" /> */}
-            <AvatarFallback>SC</AvatarFallback>
+            <AvatarImage src={avatarImageSrc} alt={avatarImageAlt} />
+            <AvatarFallback>{avatarFallback}</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">shadcn</p>
-            <p className="text-xs leading-none text-muted-foreground">
-              [email protected]
-            </p>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
+        {(session.data?.user?.email || session.data?.user?.name) && (
+          <>
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex flex-col space-y-1">
+                {session.data?.user?.name && (
+                  <p className="text-sm font-medium leading-none">
+                    {session.data.user.name}
+                  </p>
+                )}
+                {session.data?.user?.email && (
+                  <p className="text-xs leading-none text-muted-foreground">
+                    {session.data.user.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>
+          <DropdownMenuItem disabled>Profile</DropdownMenuItem>
+          <DropdownMenuItem disabled>Settings</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
+        {session.status === 'authenticated' && (
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => signOut()}
+          >
+            Log out
+          </DropdownMenuItem>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
+
+function getAvatarFallback(name?: string | null): string | ReactElement {
+  return !!name ? name[0].toUpperCase() : <GearIcon />;
+}