Add react hooks & components to split up the profile page. Learning how to separate hooks

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui';
+import { getSignedUrl, getProfile, signOut } from '@/lib/actions';
+
+import type { Profile } from '@/utils/supabase';
+import Link from 'next/link';
+
+const AvatarDropdown = () => {
+  const [profile, setProfile] = useState<Profile | undefined>(undefined);
+  const [signedUrl, setSignedUrl] = useState<string | undefined>(undefined);
+
+  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]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={signedUrl ?? '/favicon.ico'} />
+          <AvatarFallback>AN</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href='/profile' className='w-full justify-center'>
+            Edit profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuItem asChild>
+          <button onClick={handleSignOut} className='w-full justify-center'>
+            Log out
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+export default AvatarDropdown;