feat: delete app setting when empty (#86)

fix: save one setting at a time (#86)

src/components/common/settings/SetText.tsx

@@ -24,31 +24,47 @@ const SetText: FC<Prop> = ({
   const [resourceText, setResourceText] = useState(
     DEFAULT_TEXT_RESOURCE_SETTING.text,
   );
-  const { patchAppSetting, postAppSetting, appSettingArray } =
+  const { patchAppSetting, postAppSetting, deleteAppSetting, appSettingArray } =
     useAppSettingContext();
 
+  // This state is used to avoid to erase changes if another setting is saved.
+  // This is due because the useQuery get all settings. So when a SetText update the setting
+  // using mutations, all the settings are fetched again, causing the erase the current unsaved state.
+  const [isClean, setIsClean] = useState(true);
+
   const onChange = ({ target }: { target: { value: string } }): void => {
     setResourceText(target.value);
+    setIsClean(false);
   };
 
-  const textResourceSetting = appSettingArray.find(
+  const textResourceSetting = appSettingArray?.find(
     (s) => s.name === resourceKey,
   ) as TextResourceSetting;
 
   useEffect(() => {
-    const { text } = textResourceSetting?.data || DEFAULT_TEXT_RESOURCE_SETTING;
-    setResourceText(text);
-  }, [textResourceSetting]);
+    if (isClean) {
+      const { text } =
+        textResourceSetting?.data || DEFAULT_TEXT_RESOURCE_SETTING;
+      setResourceText(text);
+    }
+  }, [isClean, textResourceSetting]);
 
   const handleClickSaveText = (): void => {
     if (textResourceSetting) {
-      patchAppSetting({
+      const payloadAppSetting = {
         data: { text: resourceText },
         id: textResourceSetting.id,
-      });
+      };
+      if (resourceText) {
+        patchAppSetting(payloadAppSetting);
+      } else {
+        deleteAppSetting(payloadAppSetting);
+      }
     } else {
       postAppSetting({ data: { text: resourceText }, name: resourceKey });
     }
+
+    setIsClean(true);
   };
 
   return (