Made more client components to make the rendering not so crazy

src/lib/hooks/useFileUpload.ts

@@ -1,11 +1,15 @@
 'use client'
 
 import { useState, useRef } from 'react';
-import { deleteFile, replaceFile, uploadFile } from '@/lib/actions';
+import { replaceFile, uploadFile } from '@/lib/hooks';
 import { toast } from 'sonner';
 import { useAuth } from '@/components/context/auth';
 import { resizeImage } from '@/lib/hooks';
 
+export type Replace = 
+  | { replace: true, path: string }
+  | false;
+
 export type uploadToStorageProps = {
   file: File;
   bucket: string;
@@ -15,7 +19,7 @@ export type uploadToStorageProps = {
     maxHeight?: number;
     quality?: number;
   };
-  prevPath?: string | null;
+  replace?: Replace;
 };
 
 export const useFileUpload = () => {
@@ -28,25 +32,16 @@ export const useFileUpload = () => {
     bucket,
     resize = false,
     options = {},
-    prevPath = null,
+    replace = false,
   }: uploadToStorageProps) => {
     try {
       if (!isAuthenticated) throw new Error('User is not authenticated');
 
       setIsUploading(true);
-      if (prevPath !== null) {
-        const deleteResult = await deleteFile({
-          bucket,
-          path: [...prevPath],
-        });
-        if (!deleteResult.success) {
-          console.error('Error deleting file:', deleteResult.error);
-          throw new Error(deleteResult.error || `Failed to delete ${prevPath}`);
-        } else console.log('Delete sucessful!')
-        console.log('Deleted file path: ', deleteResult.data)
+      if (replace) {
         const updateResult = await replaceFile({
           bucket,
-          prevPath: prevPath,
+          path: replace.path,
           file,
           options: {
             contentType: file.type,
@@ -74,7 +69,6 @@ export const useFileUpload = () => {
         path: fileName,
         file: fileToUpload,
         options: {
-          upsert: true,
           contentType: file.type,
         },
       });