From 836e496ee0c021b3a1fc37edbbf4213fed9ab3b1 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Mon, 3 Apr 2023 14:52:36 +0800
Subject: [PATCH] chore: allow remove user avatar (#1454)

---
 web/src/components/UpdateAccountDialog.tsx    | 40 ++++++++++-------
 .../UpdateCustomizedProfileDialog.tsx         | 44 ++++++++-----------
 2 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx
index 90b70c59..4256af52 100644
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@@ -36,6 +36,15 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
     destroy();
   };
 
+  const setPartialState = (partialState: Partial<State>) => {
+    setState((state) => {
+      return {
+        ...state,
+        ...partialState,
+      };
+    });
+  };
+
   const handleAvatarChanged = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
@@ -46,11 +55,8 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
       }
       try {
         const base64 = await convertFileToBase64(image);
-        setState((state) => {
-          return {
-            ...state,
-            avatarUrl: base64,
-          };
+        setPartialState({
+          avatarUrl: base64,
         });
       } catch (error) {
         console.error(error);
@@ -60,20 +66,14 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
   };
 
   const handleNicknameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
-        nickname: e.target.value as string,
-      };
+    setPartialState({
+      nickname: e.target.value as string,
     });
   };
 
   const handleUsernameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
-        username: e.target.value as string,
-      };
+    setPartialState({
+      username: e.target.value as string,
     });
   };
 
@@ -133,6 +133,16 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
             <UserAvatar className="!w-12 !h-12" avatarUrl={state.avatarUrl} />
             <input type="file" accept="image/*" className="absolute invisible w-full h-full inset-0" onChange={handleAvatarChanged} />
           </label>
+          {state.avatarUrl && (
+            <Icon.X
+              className="w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80"
+              onClick={() =>
+                setPartialState({
+                  avatarUrl: "",
+                })
+              }
+            />
+          )}
         </div>
         <p className="text-sm">
           {t("common.username")}
diff --git a/web/src/components/UpdateCustomizedProfileDialog.tsx b/web/src/components/UpdateCustomizedProfileDialog.tsx
index f904e84a..7b0373bc 100644
--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -19,53 +19,47 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
     destroy();
   };
 
-  const handleNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const setPartialState = (partialState: Partial<CustomizedProfile>) => {
     setState((state) => {
       return {
         ...state,
-        name: e.target.value as string,
+        ...partialState,
       };
     });
   };
 
+  const handleNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPartialState({
+      name: e.target.value as string,
+    });
+  };
+
   const handleLogoUrlChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
-        logoUrl: e.target.value as string,
-      };
+    setPartialState({
+      logoUrl: e.target.value as string,
     });
   };
 
   const handleDescriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
-        description: e.target.value as string,
-      };
+    setPartialState({
+      description: e.target.value as string,
     });
   };
 
   const handleLocaleSelectChange = (locale: Locale) => {
-    setState((state) => {
-      return {
-        ...state,
-        locale: locale,
-      };
+    setPartialState({
+      locale: locale,
     });
   };
 
   const handleAppearanceSelectChange = (appearance: Appearance) => {
-    setState((state) => {
-      return {
-        ...state,
-        appearance: appearance,
-      };
+    setPartialState({
+      appearance: appearance,
     });
   };
 
   const handleRestoreButtonClick = () => {
-    setState({
+    setPartialState({
       name: "memos",
       logoUrl: "/logo.webp",
       description: "",
@@ -114,9 +108,9 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
         <p className="text-sm mb-1 mt-2">Description</p>
         <input type="text" className="input-text" value={state.description} onChange={handleDescriptionChanged} />
         <p className="text-sm mb-1 mt-2">Server locale</p>
-        <LocaleSelect className="w-full" value={state.locale} onChange={handleLocaleSelectChange} />
+        <LocaleSelect className="!w-full" value={state.locale} onChange={handleLocaleSelectChange} />
         <p className="text-sm mb-1 mt-2">Server appearance</p>
-        <AppearanceSelect className="w-full" value={state.appearance} onChange={handleAppearanceSelectChange} />
+        <AppearanceSelect className="!w-full" value={state.appearance} onChange={handleAppearanceSelectChange} />
         <div className="mt-4 w-full flex flex-row justify-between items-center space-x-2">
           <div className="flex flex-row justify-start items-center">
             <button className="btn-normal" onClick={handleRestoreButtonClick}>