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

src/lib/actions/storage.ts

@@ -157,7 +157,7 @@ export async function listFiles({
     offset?: number;
     sortBy?: { column: string; order: 'asc' | 'desc' };
   };
-}): Promise<Result<Array<{ name: string; id: string; metadata: any }>>> {
+}): Promise<Result<Array<{ name: string; id: string; metadata: unknown }>>> {
   try {
     const supabase = await createServerClient();
     const { data, error } = await supabase.storage
@@ -169,6 +169,7 @@ export async function listFiles({
 
     return { success: true, data };
   } catch (error) {
+    console.error('Could not list files!', error);
     return {
       success: false,
       error:

src/lib/hooks/useAvatar.ts

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { getSignedUrl } from '@/lib/actions';
+import type { Profile } from '@/utils/supabase';
+import { toast } from 'sonner';
+
+export const useAvatar = (profile?: Profile) => {
+  const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const getAvatarUrl = async () => {
+      if (profile?.avatar_url) {
+        try {
+          setIsLoading(true);
+          const response = await getSignedUrl({
+            bucket: 'avatars',
+            url: profile.avatar_url,
+            transform: {
+              quality: 20,
+            }
+          });
+          
+          if (response.success) {
+            setAvatarUrl(response.data);
+          }
+        } catch (error) {
+          console.error('Error getting signed URL:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        setAvatarUrl(undefined);
+      }
+    };
+    
+    getAvatarUrl().catch((error) => {
+      toast.error(error instanceof Error ? error.message : 'Failed to get signed avatar url.');
+    });
+
+  }, [profile]);
+
+  return {
+    avatarUrl,
+    isLoading,
+  };
+}

src/lib/hooks/useFileUpload.ts

@@ -0,0 +1,49 @@
+import { useState, useRef } from 'react';
+import { uploadFile } from '@/lib/actions';
+import { toast } from 'sonner';
+
+export const useFileUpload = () => {
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const uploadToStorage = async (file: File, bucket: string) => {
+    try {
+      setIsUploading(true);
+      
+      // Generate a unique filename to avoid collisions
+      const fileExt = file.name.split('.').pop();
+      const fileName = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}.${fileExt}`;
+      
+      // Upload the file to Supabase storage
+      const uploadResult = await uploadFile({
+        bucket,
+        path: fileName,
+        file,
+        options: {
+          upsert: true,
+          contentType: file.type,
+        },
+      });
+      
+      if (!uploadResult.success) {
+        throw new Error(uploadResult.error || `Failed to upload to ${bucket}`);
+      }
+      
+      return { success: true, path: uploadResult.data };
+    } catch (error) {
+      console.error(`Error uploading to ${bucket}:`, error);
+      toast.error(error instanceof Error ? error.message : `Failed to upload to ${bucket}`);
+      return { success: false, error };
+    } finally {
+      setIsUploading(false);
+      // Clear the input value so the same file can be selected again
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
+  return {
+    isUploading,
+    fileInputRef,
+    uploadToStorage,
+  };
+}

src/lib/hooks/useProfile.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+import { getProfile, updateProfile } from '@/lib/actions';
+import type { Profile } from '@/utils/supabase';
+import { toast } from 'sonner';
+
+export function useProfile() {
+  const [profile, setProfile] = useState<Profile | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        setIsLoading(true);
+        const profileResponse = await getProfile();
+        if (!profileResponse.success)
+          throw new Error('Profile response unsuccessful');
+        setProfile(profileResponse.data);
+      } catch (error) {
+        setProfile(undefined);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchProfile().catch((error) => {
+      toast.error(error instanceof Error ? error.message : 'Failed to get profile');
+    });
+  }, []);
+
+  const updateUserProfile = async (data: {
+    full_name?: string;
+    email?: string;
+    avatar_url?: string;
+  }) => {
+    try {
+      setIsLoading(true);
+      const result = await updateProfile(data);
+      if (!result.success) {
+        throw new Error(result.error ?? 'Failed to update profile');
+      }
+      setProfile(result.data);
+      toast.success('Profile updated successfully!');
+      return { success: true, data: result.data };
+    } catch (error) {
+      console.error('Error updating profile: ', error);
+      toast.error(error instanceof Error ? error.message : 'Failed to update profile');
+      return { success: false, error };
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    profile,
+    isLoading,
+    updateProfile: updateUserProfile,
+  };
+}