Create use current user hook

salimi-my · Jan 31, 2024 · ec87fd6 · ec87fd6
1 parent 7f0dd23
commit ec87fd6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/components/admin/user-nav.tsx b/components/admin/user-nav.tsx
@@ -1,11 +1,18 @@
 'use client';
 
 import Link from 'next/link';
-import { signOut, useSession } from 'next-auth/react';
+import { signOut } from 'next-auth/react';
 import { LayoutGrid, LogOut, User } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import { useCurrentUser } from '@/hooks/use-current-user';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,15 +22,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
 
 export default function UserNav() {
-  const { data: session } = useSession();
+  const user = useCurrentUser();
 
   return (
     <DropdownMenu>
@@ -36,10 +37,7 @@ export default function UserNav() {
                 className='relative h-8 w-8 rounded-full'
               >
                 <Avatar className='h-8 w-8'>
-                  <AvatarImage
-                    src={session?.user?.image as string}
-                    alt={session?.user?.name as string}
-                  />
+                  <AvatarImage src={user?.image || ''} alt={user?.name || ''} />
                   <AvatarFallback className='bg-transparent'>
                     <User className='w-5 h-5' />
                   </AvatarFallback>
@@ -54,11 +52,9 @@ export default function UserNav() {
       <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'>{user?.name}</p>
             <p className='text-xs leading-none text-muted-foreground'>
-              {session?.user?.email}
+              {user?.email}
             </p>
           </div>
         </DropdownMenuLabel>

diff --git a/hooks/use-current-user.ts b/hooks/use-current-user.ts
@@ -0,0 +1,7 @@
+import { useSession } from 'next-auth/react';
+
+export const useCurrentUser = () => {
+  const session = useSession();
+
+  return session.data?.user;
+};