refactor: use server component user-nav

ZEISS · Jan 11, 2024 · 4586621 · 4586621
1 parent 6296267
commit 4586621
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 32 deletions.
diff --git a/packages/app/src/components/user-nav.tsx b/packages/app/src/components/user-nav.tsx
@@ -1,9 +1,7 @@
-'use client'
-
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
-import { useSession } from 'next-auth/react'
 import Link from 'next/link'
+import { api } from '@/trpc/server-invoker'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,31 +12,26 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { signOut } from 'next-auth/react'
-import { useRouter } from 'next/navigation'
 
-export function UserNav() {
-  const { data: session } = useSession()
-  const router = useRouter()
+export async function UserNav() {
+  const me = await api.me.query()
 
   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="" />
-            <AvatarFallback>{}</AvatarFallback>
+            <AvatarImage src={me?.user.image ?? ''} alt={me?.user.name ?? ''} />
+            <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">
-              {session?.user?.name}
-            </p>
+            <p className="text-sm font-medium leading-none">{me?.user.name}</p>
             <p className="text-xs leading-none text-muted-foreground">
-              {session?.user?.email}
+              {me?.user.email}
             </p>
           </div>
         </DropdownMenuLabel>
@@ -56,15 +49,17 @@ export function UserNav() {
             </Link>
             <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => router.push('/teams/new')}>
-            New Team
-          </DropdownMenuItem>
+          <Link href={'/teams/new'}>
+            <DropdownMenuItem>New Team</DropdownMenuItem>
+          </Link>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => signOut()}>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
+        <Link href={me ? '/api/auth/signout' : '/api/auth/signin'}>
+          <DropdownMenuItem>
+            Log out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </Link>
       </DropdownMenuContent>
     </DropdownMenu>
   )

diff --git a/packages/app/src/providers.ts b/packages/app/src/providers.ts
diff --git a/packages/app/src/session.tsx b/packages/app/src/session.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import * as React from 'react'
 import { SessionProvider as NextAuthSessionProvider } from 'next-auth/react'
 import { type SessionProviderProps } from 'next-auth/react'