Fix image reupload bug

Author: tingkai-mai

frontend/src/api/user.tsx

@@ -4,7 +4,7 @@ import { AuthStatus, UploadProfilePictureResponse } from "@/types/user";
 import Cookie from "js-cookie";
 import Swal from "sweetalert2";
 
-const toast = Swal.mixin({
+export const ToastComponent = Swal.mixin({
   toast: true,
   position: "top-end",
   showConfirmButton: false,
@@ -88,7 +88,7 @@ export const verifyToken = async (token: string) => {
 };
 
 export const login = async (email: string, password: string) => {
-  toast.fire({
+  ToastComponent.fire({
     icon: "info",
     title: "Logging in...",
   });
@@ -105,7 +105,7 @@ export const login = async (email: string, password: string) => {
   const data = await response.json();
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
@@ -134,7 +134,7 @@ export const register = async (
   password: string,
   username: string
 ) => {
-  toast.fire({
+  ToastComponent.fire({
     icon: "info",
     title: "Registering...",
   });
@@ -152,7 +152,7 @@ export const register = async (
   const data = await response.json();
 
   if (response.status !== 201) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
@@ -175,7 +175,7 @@ export const getUser = async (userId = "") => {
   const data = await response.json();
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
@@ -208,14 +208,14 @@ export const updateUser = async (userData: {
   console.log(data);
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
     return false;
   }
 
-  toast.fire({
+  ToastComponent.fire({
     icon: "success",
     title: "Profile updated successfully",
   });
@@ -241,7 +241,7 @@ export const getFileUrl = async (
   const data: UploadProfilePictureResponse = await res.json();
 
   if (res.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: res.statusText,
     });
@@ -251,7 +251,7 @@ export const getFileUrl = async (
 };
 
 export const requestPasswordReset = async (email: string) => {
-  toast.fire({
+  ToastComponent.fire({
     icon: "info",
     title: "Requesting password reset...",
   });
@@ -269,14 +269,14 @@ export const requestPasswordReset = async (email: string) => {
   console.log(data);
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
     return false;
   }
 
-  toast.fire({
+  ToastComponent.fire({
     icon: "success",
     title: "Password reset requested. Please check your email.",
   });
@@ -298,7 +298,7 @@ export const checkPasswordResetCode = async (code: string) => {
   const data = await response.json();
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });
@@ -322,7 +322,7 @@ export const resetPasswordWithCode = async (code: string, password: string) => {
   const data = await response.json();
 
   if (response.status !== 200) {
-    toast.fire({
+    ToastComponent.fire({
       icon: "error",
       title: data.message,
     });

frontend/src/app/(user)/user/me/page.tsx

@@ -18,6 +18,7 @@ import {
   getUserId,
   updateUser,
   getFileUrl,
+  ToastComponent,
 } from "@/api/user";
 import { useEffect, useRef, useState } from "react";
 import { User } from "@/types/user";
@@ -91,7 +92,6 @@ const ProfilePage = () => {
   }, [form]);
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
-    console.log(data);
     // remove unnecessary fields
     if (!data.password) delete data.password;
     if (data.password && data.password.length < 8) {
@@ -117,7 +117,7 @@ const ProfilePage = () => {
   ) => {
     console.log("Uploading profile picture...");
     try {
-      if (e.target.files) {
+      if (e.target.files && e.target.files.length > 0) {
         const imageFile = e.target.files[0];
         const formData = new FormData();
         formData.append("profilePicture", imageFile);
@@ -134,7 +134,6 @@ const ProfilePage = () => {
     } catch (error) {
       console.log(error);
     } finally {
-      console.log("Done");
       setIsLoading(false);
     }
   };