From 30a5c8ea8b0235aeeb6b4489ba7f53436c1c7f39 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 8 Jun 2024 13:17:42 -0400
Subject: [PATCH] feat: Add ability to remove team logo/profile picture

---
 app/scenes/Settings/Details.tsx               |  4 +--
 app/scenes/Settings/Profile.tsx               |  4 +--
 app/scenes/Settings/components/ImageInput.tsx | 30 ++++++++++++-------
 .../Settings/components/ImageUpload.tsx       |  2 +-
 server/routes/api/users/users.ts              |  2 +-
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx
index 090c3a05a..1e6c7e45c 100644
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -97,7 +97,7 @@ function Details() {
     []
   );
 
-  const handleAvatarUpload = async (avatarUrl: string) => {
+  const handleAvatarChange = async (avatarUrl: string) => {
     await team.save({ avatarUrl });
     toast.success(t("Logo updated"));
   };
@@ -152,7 +152,7 @@ function Details() {
             )}
           >
             <ImageInput
-              onSuccess={handleAvatarUpload}
+              onSuccess={handleAvatarChange}
               onError={handleAvatarError}
               model={team}
               borderRadius={0}
diff --git a/app/scenes/Settings/Profile.tsx b/app/scenes/Settings/Profile.tsx
index 41ae340e6..5c5f127b5 100644
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -33,7 +33,7 @@ const Profile = () => {
     setName(ev.target.value);
   };
 
-  const handleAvatarUpload = async (avatarUrl: string) => {
+  const handleAvatarChange = async (avatarUrl: string) => {
     await user.save({ avatarUrl });
     toast.success(t("Profile picture updated"));
   };
@@ -59,7 +59,7 @@ const Profile = () => {
           description={t("Choose a photo or image to represent yourself.")}
         >
           <ImageInput
-            onSuccess={handleAvatarUpload}
+            onSuccess={handleAvatarChange}
             onError={handleAvatarError}
             model={user}
           />
diff --git a/app/scenes/Settings/components/ImageInput.tsx b/app/scenes/Settings/components/ImageInput.tsx
index 51fd1c1ca..062a736ea 100644
--- a/app/scenes/Settings/components/ImageInput.tsx
+++ b/app/scenes/Settings/components/ImageInput.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Avatar, { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
+import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
 
@@ -10,24 +11,31 @@ type Props = ImageUploadProps & {
   model: IAvatar;
 };
 
-export default function ImageInput({ model, ...rest }: Props) {
+export default function ImageInput({ model, onSuccess, ...rest }: Props) {
   const { t } = useTranslation();
 
   return (
-    <ImageBox>
-      <ImageUpload {...rest}>
-        <StyledAvatar model={model} size={AvatarSize.XXLarge} />
-        <Flex auto align="center" justify="center" className="upload">
-          {t("Upload")}
-        </Flex>
-      </ImageUpload>
-    </ImageBox>
+    <Flex gap={8} justify="space-between">
+      <ImageBox>
+        <ImageUpload onSuccess={onSuccess} {...rest}>
+          <StyledAvatar model={model} size={AvatarSize.XXLarge} />
+          <Flex auto align="center" justify="center" className="upload">
+            {t("Upload")}
+          </Flex>
+        </ImageUpload>
+      </ImageBox>
+      {model.avatarUrl && (
+        <Button onClick={() => onSuccess(null)} neutral>
+          {t("Remove")}
+        </Button>
+      )}
+    </Flex>
   );
 }
 
 const avatarStyles = `
-  width: 64px;
-  height: 64px;
+  width: ${AvatarSize.XXLarge}px;
+  height: ${AvatarSize.XXLarge}px;
 `;
 
 const StyledAvatar = styled(Avatar)`
diff --git a/app/scenes/Settings/components/ImageUpload.tsx b/app/scenes/Settings/components/ImageUpload.tsx
index 9c8345db3..89447a1a7 100644
--- a/app/scenes/Settings/components/ImageUpload.tsx
+++ b/app/scenes/Settings/components/ImageUpload.tsx
@@ -18,7 +18,7 @@ import { compressImage } from "~/utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "~/utils/files";
 
 export type Props = {
-  onSuccess: (url: string) => void | Promise<void>;
+  onSuccess: (url: string | null) => void | Promise<void>;
   onError: (error: string) => void;
   submitText?: string;
   borderRadius?: number;
diff --git a/server/routes/api/users/users.ts b/server/routes/api/users/users.ts
index dbff1ce3c..d31fdace7 100644
--- a/server/routes/api/users/users.ts
+++ b/server/routes/api/users/users.ts
@@ -212,7 +212,7 @@ router.post(
     if (name) {
       user.name = name;
     }
-    if (avatarUrl) {
+    if (avatarUrl !== undefined) {
       user.avatarUrl = avatarUrl;
     }
     if (language) {