Cleaned up components and their props

src/lib/hooks/use-file-upload.ts

@@ -1,9 +1,10 @@
 'use client';
 import { useState, useRef } from 'react';
-import { uploadFile, resizeImage } from '@/lib/queries';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getSignedUrl, resizeImage, uploadFile } from '@/lib/queries';
+import { useAuth, QueryErrorCodes } from '@/lib/hooks/context';
+import type { SupabaseClient, Result, User, Profile } from '@/utils/supabase';
 import { toast } from 'sonner';
-import { useAuth } from '@/lib/hooks/context';
-import { type SupabaseClient } from '@/utils/supabase';
 
 type UploadToStorageProps = {
   client: SupabaseClient;
@@ -21,6 +22,7 @@ const useFileUpload = () => {
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const { profile, isAuthenticated } = useAuth();
+  const queryClient = useQueryClient();
 
   const uploadToStorage = async ({
     client,
@@ -31,51 +33,85 @@ const useFileUpload = () => {
   }: UploadToStorageProps) => {
     try {
       if (!isAuthenticated)
-        throw new Error('User is not authenticated!');
+        throw new Error('Error: User is not authenticated!');
       setIsUploading(true);
       let fileToUpload = file;
       if (resize && file.type.startsWith('image/'))
         fileToUpload = await resizeImage({file, options: resize});
-      if (replace) {
-        const { data, error} = await uploadFile({
-          client,
-          bucket,
-          path: replace,
-          file: fileToUpload,
-          options: {
-            contentType: file.type,
-            upsert: true,
-          },
-        });
-        if (error) throw error;
-        return data
-      } else {
-        const fileExt = file.name.split('.').pop();
-        const fileName = `${Date.now()}-${profile?.id}.${fileExt}`;
-        const { data, error } = await uploadFile({
-          client,
-          bucket,
-          path: fileName,
-          file: fileToUpload,
-          options: {
-            contentType: file.type,
-          },
-        });
-        if (error) throw error;
-        return data;
-      }
+      const path = replace || `${Date.now()}-${profile?.id}.${file.name.split('.').pop()}`;
+      const { data, error} = await uploadFile({
+        client,
+        bucket,
+        path,
+        file: fileToUpload,
+        options: {
+          contentType: file.type,
+          ...(replace && {upsert: true})
+        },
+      });
+      if (error) throw new Error(`Error uploading file: ${error.message}`);
+      const { data: urlData, error: urlError } = await getSignedUrl({
+        client,
+        bucket,
+        path: data.path,
+      });
+      if (urlError) throw new Error(`Error getting signed URL: ${urlError.message}`);
+      return {urlData, error: null};
     } catch (error) {
-      toast.error(`Error uploading file: ${error as string}`);
-      return error;
+      return { data: null, error };
     } finally {
       setIsUploading(false);
       if (fileInputRef.current) fileInputRef.current.value = '';
     }
   };
+
+  const uploadMutation = useMutation({
+    mutationFn: uploadToStorage,
+    onSuccess: (result) => {
+      if (result.error) {
+        toast.error(`Upload failed: ${result.error as string}`)
+      } else {
+        toast.success(`File uploaded successfully!`);
+      }
+    },
+    onError: (error) => {
+      toast.error(`Upload failed: ${error instanceof Error ? error.message : error}`);
+    },
+    meta: { errCode: QueryErrorCodes.UPLOAD_PHOTO_FAILED },
+  });
+
+  const uploadAvatarMutation = useMutation({
+    mutationFn: async (props: UploadToStorageProps) => {
+      const { data, error } = await uploadToStorage(props);
+      if (error) throw new Error(`Error uploading avatar: ${error as string}`);
+      return data;
+    },
+    onSuccess: (avatarUrl) => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] });
+      queryClient.setQueryData(['auth, user'], (oldUser: User) => oldUser);
+
+      if (profile?.id) {
+        queryClient.setQueryData(['profiles', profile.id], (oldProfile: Profile) => ({
+          ...oldProfile,
+          avatar_url: avatarUrl,
+          updated_at: new Date().toISOString(),
+        }));
+      }
+      toast.success('Avatar uploaded sucessfully!');
+    },
+    onError: (error) => {
+      toast.error(`Avatar upload failed: ${error instanceof Error ? error.message : error}`);
+    },
+    meta: { errCode: QueryErrorCodes.UPLOAD_PHOTO_FAILED },
+  })
+
+
   return {
-    isUploading,
+    isUploading: isUploading || uploadMutation.isPending || uploadAvatarMutation.isPending,
     fileInputRef,
     uploadToStorage,
+    uploadMutation,
+    uploadAvatarMutation,
   };
 };