Updated Nav bar avatar to use hooks

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import {
   Avatar,
@@ -12,60 +13,41 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui';
-import { getSignedUrl, getProfile, signOut } from '@/lib/actions';
-
-import type { Profile } from '@/utils/supabase';
-import Link from 'next/link';
+import { useProfile, useAvatar } from '@/lib/hooks'
+import { signOut } from '@/lib/actions';
+import { User } from 'lucide-react';
 
 const AvatarDropdown = () => {
-  const [profile, setProfile] = useState<Profile | undefined>(undefined);
-  const [signedUrl, setSignedUrl] = useState<string | undefined>(undefined);
+  const { profile } = useProfile();
+  const { avatarUrl, isLoading } = useAvatar(profile);
 
   const handleSignOut = async () => {
     await signOut();
   };
 
-  useEffect(() => {
-    const handleGetProfile = async () => {
-      try {
-        const profileResponse = await getProfile();
-        if (!profileResponse.success)
-          throw new Error('Profile response unsuccessful');
-        setProfile(profileResponse.data);
-      } catch (error) {
-        console.error('Error getting profile:', error);
-      }
-    };
-    handleGetProfile().catch((error) => {
-      console.error('Error getting profile:', error);
-    })
-  }, []);
-
-  useEffect(() => {
-    const handleGetSignedUrl = async () => {
-      try {
-        const response = await getSignedUrl({
-          bucket: 'avatars',
-          url: profile?.avatar_url ?? '',
-        });
-        if (response.success) {
-          setSignedUrl(response.data);
-        }
-      } catch (error) {
-        console.error('Error getting signed URL:', error);
-      }
-    };
-    handleGetSignedUrl().catch((error) => {
-      console.error('Error getting signed URL:', error);
-    });
-  }, [profile]);
+  if (isLoading) {
+    return (
+      <Avatar>
+        <AvatarFallback className='animate-pulse'>
+          <User size={32} />
+        </AvatarFallback>
+      </Avatar>
+    );
+  }
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Avatar>
-          <AvatarImage src={signedUrl ?? '/favicon.ico'} />
-          <AvatarFallback>AN</AvatarFallback>
+        <Avatar className='cursor-pointer'>
+          {avatarUrl ? (
+            <AvatarImage src={avatarUrl} />
+          ) : (
+            <AvatarFallback className="text-2xl">
+              {profile?.full_name 
+                ? profile.full_name.split(' ').map(n => n[0]).join('').toUpperCase() 
+                : <User size={32} />}
+            </AvatarFallback>
+          )}
         </Avatar>
       </DropdownMenuTrigger>
       <DropdownMenuContent>