fix: user can update avatar after first upload

next.config.mjs

@@ -10,6 +10,12 @@ const nextConfig = {
         port: "",
         pathname: "/storage/v1/object/sign/**",
       },
+      {
+        protocol: "https",
+        hostname: SUPABASE_URL,
+        port: "",
+        pathname: "/storage/v1/object/public/**",
+      },
       {
         protocol: "https",
         hostname: "upload.wikimedia.org",
@@ -19,7 +25,7 @@ const nextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
         pathname: "/**",
-      }
+      },
     ],
   },
 };

src/app/(user)/profile/[uid]/edit/page.tsx

@@ -39,29 +39,56 @@ export default function EditProfilePage({ params }: { params: { uid: string } })
 
   const onProfileSubmit = async (updates: z.infer<typeof profileSchema>) => {
     const { avatars, username, full_name } = updates;
-
-    try {
     let avatarUrl = null;
 
+    try {
       if (avatars instanceof File) {
+        const { data: currentProfile, error: fetchError } = await client
+          .from("profiles")
+          .select("avatar_url")
+          .eq("id", uid)
+          .single();
+
+        if (fetchError) {
+          throw new Error("Failed to fetch existing profile data");
+        }
+
+        if (currentProfile?.avatar_url) {
+          const oldAvatarPath = currentProfile.avatar_url.split("/").pop();
+          const { error: deleteError } = await client.storage.from("avatars").remove([oldAvatarPath]);
+
+          if (deleteError) {
+            console.warn("Failed to delete old avatar:", deleteError.message);
+          }
+        }
+
         const avatarData = await uploadAvatar(client, avatars, uid);
         avatarUrl = avatarData?.path
           ? `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/avatars/${avatarData.path}`
           : null;
       }
 
-      const result = await updateProfile(client, uid, {
+      const updateData = {
         username,
         full_name,
         bio: bioContent,
         ...(avatarUrl && { avatar_url: avatarUrl }),
-      });
+      };
+
+      const hasChanges = Object.values(updateData).some((value) => value !== undefined && value !== null);
+
+      if (!hasChanges) {
+        toast.error("No fields to update!");
+        return;
+      }
+
+      const result = await updateProfile(client, uid, updateData);
 
       if (result) {
         toast.success("Profile updated successfully!");
         router.push(`/profile/${uid}`);
       } else {
-        toast.error("No fields to update!");
+        toast.error("Failed to update profile!");
       }
     } catch (error) {
       toast.error("Error updating profile!");

src/lib/data/profileMutate.ts

@@ -5,13 +5,10 @@ interface UpdateData {
   full_name?: string;
   bio?: string;
   updated_at?: Date;
+  avatar_url?: string | null;
 }
 
-export async function updateProfile(
+export async function updateProfile(supabase: SupabaseClient, userId: string, updates: UpdateData) {
-    supabase: SupabaseClient,
-    userId: string,
-    updates: UpdateData,
-) {
   const updateData: { [key: string]: any | undefined } = {};
 
   if (updates.username || updates.username != "") {
@@ -23,26 +20,25 @@ export async function updateProfile(
   if (updates.bio || updates.bio != "") {
     updateData.bio = updates.bio;
   }
-
+  if (updates.avatar_url || updates.avatar_url != "") {
+    updateData.avatar_url = updates.avatar_url;
+  }
   updateData.updated_at = new Date();
-
+  console.log(updateData);
   if (
-        updateData.username != undefined || updateData.full_name != undefined ||
+    updateData.username != undefined ||
-        updateData.bio != undefined
+    updateData.full_name != undefined ||
+    updateData.bio != undefined ||
+    updateData.avatar_url != undefined
   ) {
-        const { error } = await supabase
+    const { error } = await supabase.from("profiles").update(updateData).eq("id", userId);
-            .from("profiles")
-            .update(updateData)
-            .eq("id", userId);
 
     if (error) {
-            console.error("Error updating profile:", error);
       throw error;
     }
 
     return true;
   } else {
-        console.log("No fields to update.");
     return null;
   }
 }