Extract fetch logic into parent setting components

src/components/settings/globalUpdate/GlobalUpdateSettings.tsx

@@ -12,7 +12,10 @@ import { useTranslation } from 'react-i18next';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
-import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
+import {
+    CategoriesInclusionSetting,
+    CategoriesInclusionSettingProps,
+} from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { GlobalUpdateSettingsEntries } from '@/components/settings/globalUpdate/GlobalUpdateSettingsEntries.tsx';
 import { GlobalUpdateSettingsInterval } from '@/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -21,11 +24,16 @@ import { ServerSettings } from '@/typings.ts';
 
 type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
 
-export const GlobalUpdateSettings = () => {
+export const GlobalUpdateSettings = ({
+    serverSettings,
+    categories,
+}: {
+    serverSettings: ServerSettings;
+    categories: CategoriesInclusionSettingProps['categories'];
+}) => {
     const { t } = useTranslation();
 
-    const { data } = requestManager.useGetServerSettings();
-    const updateMangas = !!data?.settings.updateMangas;
+    const { updateMangas } = serverSettings;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const updateSetting = async <Setting extends keyof LibrarySettingsType>(
@@ -47,9 +55,10 @@ export const GlobalUpdateSettings = () => {
                 </ListSubheader>
             }
         >
-            <GlobalUpdateSettingsInterval />
-            <GlobalUpdateSettingsEntries />
+            <GlobalUpdateSettingsInterval globalUpdateInterval={serverSettings.globalUpdateInterval} />
+            <GlobalUpdateSettingsEntries serverSettings={serverSettings} />
             <CategoriesInclusionSetting
+                categories={categories}
                 includeField="includeInUpdate"
                 dialogText={t('library.settings.global_update.categories.label.info')}
             />

src/components/settings/globalUpdate/GlobalUpdateSettingsEntries.tsx

@@ -33,15 +33,7 @@ const settingToTextMap: { [setting in keyof GlobalUpdateSkipEntriesSettings]: Tr
     excludeCompleted: 'library.settings.global_update.entries.label.completed',
 };
 
-const getSkipMangasText = (settings: GlobalUpdateSkipEntriesSettings | undefined, isLoading: boolean, error: any) => {
-    if (error) {
-        return translate('global.error.label.failed_to_load_data');
-    }
-
-    if (!settings || isLoading) {
-        return translate('global.label.loading');
-    }
-
+const getSkipMangasText = (settings: GlobalUpdateSkipEntriesSettings) => {
     const skipSettings: string[] = [];
 
     if (settings.excludeUnreadChapters) {
@@ -70,10 +62,10 @@ const extractSkipEntriesSettings = (serverSettings: ServerSettings): GlobalUpdat
     excludeUnreadChapters: serverSettings.excludeUnreadChapters,
 });
 
-export const GlobalUpdateSettingsEntries = () => {
+export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings: ServerSettings }) => {
     const { t } = useTranslation();
-    const { data, loading, error: requestError } = requestManager.useGetServerSettings();
-    const globalUpdateSettings = data ? extractSkipEntriesSettings(data.settings) : undefined;
+
+    const globalUpdateSettings = extractSkipEntriesSettings(serverSettings);
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const [dialogSettings, setDialogSettings] = useState<GlobalUpdateSkipEntriesSettings>(
@@ -81,7 +73,7 @@ export const GlobalUpdateSettingsEntries = () => {
     );
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
-    const skipEntriesText = getSkipMangasText(globalUpdateSettings, loading, requestError);
+    const skipEntriesText = getSkipMangasText(globalUpdateSettings);
 
     const updateSettings = async () => {
         const didSettingsChange =

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -15,16 +15,20 @@ 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';
+import { ServerSettings } from '@/typings.ts';
 
 const DEFAULT_INTERVAL_HOURS = 12;
 const MIN_INTERVAL_HOURS = 6;
 const MAX_INTERVAL_HOURS = 24 * 7 * 4; // 1 month
 
-export const GlobalUpdateSettingsInterval = () => {
+export const GlobalUpdateSettingsInterval = ({
+    globalUpdateInterval,
+}: {
+    globalUpdateInterval: ServerSettings['globalUpdateInterval'];
+}) => {
     const { t } = useTranslation();
 
-    const { data } = requestManager.useGetServerSettings();
-    const autoUpdateIntervalHours = data?.settings.globalUpdateInterval;
+    const autoUpdateIntervalHours = globalUpdateInterval;
     const doAutoUpdates = !!autoUpdateIntervalHours;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
     const [currentAutoUpdateIntervalHours, persistAutoUpdateIntervalHours] = usePersistedValue(
@@ -35,18 +39,18 @@ export const GlobalUpdateSettingsInterval = () => {
     );
 
     const updateSetting = useCallback(
-        (globalUpdateInterval: number) => {
+        (newGlobalUpdateInterval: number) => {
             persistAutoUpdateIntervalHours(
-                globalUpdateInterval === 0 ? currentAutoUpdateIntervalHours : globalUpdateInterval,
+                newGlobalUpdateInterval === 0 ? currentAutoUpdateIntervalHours : newGlobalUpdateInterval,
             );
-            mutateSettings({ variables: { input: { settings: { globalUpdateInterval } } } });
+            mutateSettings({ variables: { input: { settings: { globalUpdateInterval: newGlobalUpdateInterval } } } });
         },
         [currentAutoUpdateIntervalHours],
     );
 
     const setDoAutoUpdates = (enable: boolean) => {
-        const globalUpdateInterval = enable ? currentAutoUpdateIntervalHours : 0;
-        updateSetting(globalUpdateInterval);
+        const newGlobalUpdateInterval = enable ? currentAutoUpdateIntervalHours : 0;
+        updateSetting(newGlobalUpdateInterval);
     };
 
     return (