From 8911eaf676cc12e721418c4d0914b05e4aedc1c7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:36:16 +0530
Subject: [PATCH] fix: profile cover fix (#4010)

---
 web/components/core/image-picker-popover.tsx | 55 +++++++++++++-------
 web/pages/profile/index.tsx                  |  1 +
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index f8c247ce7..a4a55e702 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -40,13 +40,14 @@ type Props = {
   onChange: (data: string) => void;
   disabled?: boolean;
   tabIndex?: number;
+  isProfileCover?: boolean;
 };
 
 // services
 const fileService = new FileService();
 
 export const ImagePickerPopover: React.FC<Props> = observer((props) => {
-  const { label, value, control, onChange, disabled = false, tabIndex } = props;
+  const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
@@ -97,31 +98,47 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   const handleSubmit = async () => {
     setIsImageUploading(true);
 
-    if (!image || !workspaceSlug) return;
+    if (!image) return;
 
     const formData = new FormData();
     formData.append("asset", image);
     formData.append("attributes", JSON.stringify({}));
 
-    fileService
-      .uploadFile(workspaceSlug.toString(), formData)
-      .then((res) => {
-        const oldValue = value;
-        const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
+    const oldValue = value;
+    const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
 
-        const imageUrl = res.asset;
-        onChange(imageUrl);
-        setIsImageUploading(false);
-        setImage(null);
-        setIsOpen(false);
+    const uploadCallback = (res: any) => {
+      const imageUrl = res.asset;
+      onChange(imageUrl);
+      setIsImageUploading(false);
+      setImage(null);
+      setIsOpen(false);
+    };
 
-        if (isUnsplashImage) return;
-
-        if (oldValue && currentWorkspace) fileService.deleteFile(currentWorkspace.id, oldValue);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
+    if (isProfileCover) {
+      fileService
+        .uploadUserFile(formData)
+        .then((res) => {
+          uploadCallback(res);
+          if (isUnsplashImage) return;
+          if (oldValue && currentWorkspace) fileService.deleteUserFile(oldValue);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      if (!workspaceSlug) return;
+      fileService
+        .uploadFile(workspaceSlug.toString(), formData)
+        .then((res) => {
+          uploadCallback(res);
+          if (isUnsplashImage) return;
+          if (oldValue && currentWorkspace) fileService.deleteFile(currentWorkspace.id, oldValue);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
   };
 
   useEffect(() => {
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index a3b96bce7..6d2fe4d54 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -215,6 +215,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           onChange={(imageUrl) => onChange(imageUrl)}
                           control={control}
                           value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                          isProfileCover
                         />
                       )}
                     />