wip: reuse user query

ZEISS · Jan 21, 2024 · 89e4682 · 89e4682
1 parent fd7ba7b
commit 89e4682
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/packages/app/src/components/default-layout.tsx b/packages/app/src/components/default-layout.tsx
@@ -34,7 +34,7 @@ export default async function DefaultLayout({
             <div className="ml-auto flex items-center space-x-4">
               <Search />
               <ThemeToggle />
-              <UserNav />
+              <UserNav user={user} />
             </div>
           </div>
         </div>

diff --git a/packages/app/src/components/user-nav.tsx b/packages/app/src/components/user-nav.tsx
@@ -1,7 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { api } from '@/trpc/server-invoker'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,26 +11,30 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
+import { type User } from '@/db/models/users'
+import { PropsWithChildren } from 'react'
 
-export async function UserNav() {
-  const me = await api.me.query()
+export type UserNavProps = {
+  user: User | null
+}
 
+export async function UserNav({ user }: PropsWithChildren<UserNavProps>) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
-            <AvatarImage src={me?.user.image ?? ''} alt={me?.user.name ?? ''} />
+            <AvatarImage src={user?.image ?? ''} alt={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">{me?.user.name}</p>
+            <p className="text-sm font-medium leading-none">{user?.name}</p>
             <p className="text-xs leading-none text-muted-foreground">
-              {me?.user.email}
+              {user?.email}
             </p>
           </div>
         </DropdownMenuLabel>
@@ -51,7 +54,7 @@ export async function UserNav() {
           </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
-        <Link href={me ? '/api/auth/signout' : '/api/auth/signin'}>
+        <Link href={user ? '/api/auth/signout' : '/api/auth/signin'}>
           <DropdownMenuItem>
             Log out
             <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>