diff --git a/src/components/common/settings/SetText.tsx b/src/components/common/settings/SetText.tsx index 620318b2..add7d7ca 100644 --- a/src/components/common/settings/SetText.tsx +++ b/src/components/common/settings/SetText.tsx @@ -24,31 +24,47 @@ const SetText: FC = ({ 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 (