Persist server settings when disabling them (#462)

Some settings use 0 as the disabled state.
In this case, the previous enabled value was lost.
To prevent this, the last value now gets saved and set again when enabling the setting again

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -12,6 +12,7 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
+import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
 
 const DEFAULT_LIMIT = 5;
 const MIN_LIMIT = 2;
@@ -24,13 +25,25 @@ export const DownloadAheadSetting = () => {
     const downloadAheadLimit = data?.settings.autoDownloadAheadLimit;
     const shouldDownloadAhead = !!downloadAheadLimit;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
+    const [currentDownloadAheadLimit, persistDownloadAheadLimit] = usePersistedValue(
+        'lastDownloadAheadLimit',
+        DEFAULT_LIMIT,
+        downloadAheadLimit,
+        getPersistedServerSetting,
+    );
 
-    const updateSetting = useCallback((autoDownloadAheadLimit: number) => {
-        mutateSettings({ variables: { input: { settings: { autoDownloadAheadLimit } } } });
-    }, []);
+    const updateSetting = useCallback(
+        (autoDownloadAheadLimit: number) => {
+            persistDownloadAheadLimit(
+                autoDownloadAheadLimit === 0 ? currentDownloadAheadLimit : autoDownloadAheadLimit,
+            );
+            mutateSettings({ variables: { input: { settings: { autoDownloadAheadLimit } } } });
+        },
+        [currentDownloadAheadLimit],
+    );
 
     const setDoAutoUpdates = (enable: boolean) => {
-        const globalUpdateInterval = enable ? DEFAULT_LIMIT : 0;
+        const globalUpdateInterval = enable ? currentDownloadAheadLimit : 0;
         updateSetting(globalUpdateInterval);
     };
 
@@ -51,12 +64,12 @@ export const DownloadAheadSetting = () => {
                 settingValue={
                     downloadAheadLimit !== undefined
                         ? t('download.settings.download_ahead.label.value', {
-                              chapters: downloadAheadLimit,
-                              count: downloadAheadLimit,
+                              chapters: currentDownloadAheadLimit,
+                              count: currentDownloadAheadLimit,
                           })
                         : undefined
                 }
-                value={downloadAheadLimit ?? DEFAULT_LIMIT}
+                value={currentDownloadAheadLimit}
                 minValue={MIN_LIMIT}
                 maxValue={MAX_LIMIT}
                 defaultValue={DEFAULT_LIMIT}

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -12,6 +12,7 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
+import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
 
 const DEFAULT_INTERVAL_HOURS = 12;
 const MIN_INTERVAL_HOURS = 6;
@@ -24,13 +25,25 @@ export const GlobalUpdateSettingsInterval = () => {
     const autoUpdateIntervalHours = data?.settings.globalUpdateInterval;
     const doAutoUpdates = !!autoUpdateIntervalHours;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
+    const [currentAutoUpdateIntervalHours, persistAutoUpdateIntervalHours] = usePersistedValue(
+        'lastGlobalUpdateInterval',
+        DEFAULT_INTERVAL_HOURS,
+        autoUpdateIntervalHours,
+        getPersistedServerSetting,
+    );
 
-    const updateSetting = useCallback((globalUpdateInterval: number) => {
-        mutateSettings({ variables: { input: { settings: { globalUpdateInterval } } } });
-    }, []);
+    const updateSetting = useCallback(
+        (globalUpdateInterval: number) => {
+            persistAutoUpdateIntervalHours(
+                globalUpdateInterval === 0 ? currentAutoUpdateIntervalHours : globalUpdateInterval,
+            );
+            mutateSettings({ variables: { input: { settings: { globalUpdateInterval } } } });
+        },
+        [currentAutoUpdateIntervalHours],
+    );
 
     const setDoAutoUpdates = (enable: boolean) => {
-        const globalUpdateInterval = enable ? DEFAULT_INTERVAL_HOURS : 0;
+        const globalUpdateInterval = enable ? currentAutoUpdateIntervalHours : 0;
         updateSetting(globalUpdateInterval);
     };
 
@@ -47,11 +60,11 @@ export const GlobalUpdateSettingsInterval = () => {
                 settingValue={
                     autoUpdateIntervalHours !== undefined
                         ? t('library.settings.global_update.auto_update.interval.label.value', {
-                              hours: autoUpdateIntervalHours,
+                              hours: currentAutoUpdateIntervalHours,
                           })
                         : undefined
                 }
-                value={autoUpdateIntervalHours ?? DEFAULT_INTERVAL_HOURS}
+                value={currentAutoUpdateIntervalHours}
                 minValue={MIN_INTERVAL_HOURS}
                 maxValue={MAX_INTERVAL_HOURS}
                 defaultValue={DEFAULT_INTERVAL_HOURS}

src/util/usePersistedValue.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useLocalStorage } from '@/util/useLocalStorage.tsx';
+
+export const getPersistedServerSetting = <T,>(serverValue: T | undefined, lastValue: T): T => {
+    const isDisabled = serverValue === 0;
+    if (isDisabled) {
+        return lastValue;
+    }
+
+    return serverValue ?? lastValue;
+};
+
+export const usePersistedValue = <T,>(
+    key: string,
+    defaultValue: T,
+    currentValue: T | undefined,
+    getCurrentValue: (currentValue: T | undefined, persistedValue: T) => T,
+): [T, (value: T) => void] => {
+    const [persistedValue, setPersistedValue] = useLocalStorage(key, defaultValue);
+
+    const value = getCurrentValue(currentValue, persistedValue);
+
+    return [value, setPersistedValue];
+};