refactor: defer thumbnail saving on save button

Author: kim

src/modules/settings/ChatbotSettings.tsx

@@ -24,6 +24,7 @@ import ChatbotAvatar from '../common/ChatbotAvatar';
 import { useChatbotAvatar } from '../common/useChatbotAvatar';
 import { ChatbotEditionView } from './chatbot/ChatbotEditingView';
 import { ChatbotPromptDisplay } from './chatbot/ChatbotPromptDisplay';
+import { useSaveAvatar } from './useNewAvatar';
 
 const useChatbotSetting = () => {
   const { mutateAsync: postSetting } = mutations.usePostAppSetting();
@@ -70,16 +71,21 @@ function ChatbotSettings() {
 
   const { saveSetting, chatbotCue, chatbotName, initialPrompt, chatbotAvatar } =
     useChatbotSetting();
+  const saveNewAvatar = useSaveAvatar();
 
   const [isEditing, setIsEditing] = useState(false);
 
   const doneEditing = (): void => {
     setIsEditing(false);
   };
 
-  const handleOnSave = async (data: ChatbotPromptSettings) => {
+  const handleOnSave = async (data: ChatbotPromptSettings, avatar?: Blob) => {
     await saveSetting(data);
 
+    if (avatar) {
+      await saveNewAvatar(avatar);
+    }
+
     // close the editing view
     doneEditing();
   };

src/modules/settings/chatbot/ChatbotAvatarEditor.tsx

@@ -4,8 +4,6 @@ import { Badge, IconButton, styled } from '@mui/material';
 
 import { PenIcon } from 'lucide-react';
 
-import { CHATBOT_AVATAR_APP_SETTING_NAME } from '@/config/appSetting';
-import { mutations } from '@/config/queryClient';
 import ChatbotAvatar from '@/modules/common/ChatbotAvatar';
 import { useChatbotAvatar } from '@/modules/common/useChatbotAvatar';
 
@@ -30,33 +28,22 @@ const EditButton = styled(IconButton)(() => ({
   },
 }));
 
-export function ChatbotAvatarEditor() {
+export function ChatbotAvatarEditor({
+  onChange,
+}: Readonly<{ onChange: (avatar: Blob) => void }>) {
   const fileInput = useRef<HTMLInputElement>(null);
-  const { mutateAsync: uploadThumbnail } = mutations.useUploadAppSettingFile();
-  const { mutateAsync: deleteAvatar } = mutations.useDeleteAppSetting();
-  const {
-    avatar,
-    avatarSetting,
-    isLoading: isAvatarLoading,
-  } = useChatbotAvatar();
-  const [isUploading, setIsUploading] = useState(false);
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = async (e) => {
+  // currently saved avatar
+  const { avatar, isLoading: isAvatarLoading } = useChatbotAvatar();
+
+  // local avatar to display
+  const [newAvatar, setNewAvatar] = useState<Blob>();
+
+  const onSelect: ChangeEventHandler<HTMLInputElement> = (e) => {
     if (e.target.files) {
-      setIsUploading(true);
-      try {
-        await uploadThumbnail({
-          file: e.target.files[0],
-          name: CHATBOT_AVATAR_APP_SETTING_NAME,
-        });
-        // delete previous avatar
-        if (avatarSetting) {
-          await deleteAvatar({ id: avatarSetting.id });
-        }
-      } catch (error) {
-        console.error(error);
-      }
-      setIsUploading(false);
+      const file = e.target.files[0];
+      onChange(file);
+      setNewAvatar(file);
     }
   };
 
@@ -65,7 +52,6 @@ export function ChatbotAvatarEditor() {
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       badgeContent={
         <EditButton
-          disabled={isUploading}
           type="button"
           color="info"
           onClick={() => {
@@ -75,7 +61,7 @@ export function ChatbotAvatarEditor() {
           <PenIcon />
           <VisuallyHiddenInput
             ref={fileInput}
-            onChange={onChange}
+            onChange={onSelect}
             type="file"
             accept="image/png, image/jpeg, image/jpg"
           />
@@ -85,8 +71,8 @@ export function ChatbotAvatarEditor() {
     >
       <ChatbotAvatar
         size="medium"
-        avatar={avatar}
-        isLoading={isAvatarLoading || isUploading}
+        avatar={newAvatar || avatar}
+        isLoading={isAvatarLoading}
       />
     </Badge>
   );

src/modules/settings/chatbot/ChatbotEditingView.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Button, Stack, TextField } from '@mui/material';
 
-import type { ChatbotPromptSettings } from '@/config/appSetting';
+import { type ChatbotPromptSettings } from '@/config/appSetting';
 import { TextArea } from '@/modules/common/TextArea';
 
 import { ChatbotAvatarEditor } from './ChatbotAvatarEditor';
@@ -16,7 +16,7 @@ type Props = {
     cue: string;
     prompt: string;
   };
-  onSave: (data: ChatbotPromptSettings) => void;
+  onSave: (data: ChatbotPromptSettings, avatar?: Blob) => Promise<void>;
 };
 
 function ChatbotEditionView({
@@ -27,6 +27,8 @@ function ChatbotEditionView({
   const [prompt, setPrompt] = useState(initialValue.prompt);
   const [cue, setCue] = useState(initialValue.cue);
   const [name, setName] = useState(initialValue.name);
+  const [newAvatar, setNewAvatar] = useState<Blob>();
+  const [isSaving, setIsSaving] = useState(false);
 
   const [unsavedChanges, setUnsavedChanges] = useState(false);
 
@@ -45,14 +47,23 @@ function ChatbotEditionView({
     setUnsavedChanges(true);
   };
 
-  const handleSave = (): void => {
+  const onChangeAvatar = (avatar: Blob) => {
+    setNewAvatar(avatar);
+    setUnsavedChanges(true);
+  };
+
+  const handleSave = async () => {
     if (prompt) {
+      setIsSaving(true);
+
       const data: ChatbotPromptSettings = {
         initialPrompt: prompt,
         chatbotCue: cue,
         chatbotName: name,
       };
-      onSave(data);
+      await onSave(data, newAvatar);
+
+      setIsSaving(false);
     }
   };
 
@@ -64,7 +75,7 @@ function ChatbotEditionView({
         alignItems="center"
         gap={2}
       >
-        <ChatbotAvatarEditor />
+        <ChatbotAvatarEditor onChange={onChangeAvatar} />
         <TextField
           name={t('CHATBOT_NAME_LABEL')}
           label={t('CHATBOT_NAME_LABEL')}
@@ -100,8 +111,9 @@ function ChatbotEditionView({
       <Box alignSelf="flex-end">
         <Button
           onClick={handleSave}
-          disabled={!unsavedChanges}
+          disabled={!unsavedChanges || isSaving}
           variant="outlined"
+          loading={isSaving}
         >
           {unsavedChanges ? t('SAVE_LABEL') : t('SAVED_LABEL')}
         </Button>

src/modules/settings/useNewAvatar.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import { CHATBOT_AVATAR_APP_SETTING_NAME } from '@/config/appSetting';
+import { mutations } from '@/config/queryClient';
+
+import { useChatbotAvatar } from '../common/useChatbotAvatar';
+
+export const useSaveAvatar = () => {
+  const { mutateAsync: uploadThumbnail } = mutations.useUploadAppSettingFile();
+  const { mutateAsync: deleteAvatar } = mutations.useDeleteAppSetting();
+  const { avatarSetting } = useChatbotAvatar();
+
+  const uploadNewAvatar = useCallback(
+    async (newAvatar: Blob) => {
+      try {
+        await uploadThumbnail({
+          file: newAvatar,
+          name: CHATBOT_AVATAR_APP_SETTING_NAME,
+        });
+        // delete previous avatar
+        if (avatarSetting) {
+          await deleteAvatar({ id: avatarSetting.id });
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [avatarSetting, deleteAvatar, uploadThumbnail],
+  );
+
+  return uploadNewAvatar;
+};