chore: allow remove user avatar (#1454)

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,
+        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,
+    setPartialState({
       nickname: e.target.value as string,
-      };
     });
   };
 
   const handleUsernameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
+    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")}

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,
+    setPartialState({
       logoUrl: e.target.value as string,
-      };
     });
   };
 
   const handleDescriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState((state) => {
-      return {
-        ...state,
+    setPartialState({
       description: e.target.value as string,
-      };
     });
   };
 
   const handleLocaleSelectChange = (locale: Locale) => {
-    setState((state) => {
-      return {
-        ...state,
+    setPartialState({
       locale: locale,
-      };
     });
   };
 
   const handleAppearanceSelectChange = (appearance: Appearance) => {
-    setState((state) => {
-      return {
-        ...state,
+    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}>