Extract fetch logic into parent setting components

src/components/settings/CategoriesInclusionSetting.tsx

@@ -23,6 +23,14 @@ import { IncludeOrExclude } from '@/lib/graphql/generated/graphql.ts';
 import { TCategory } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CheckboxContainer } from '@/components/settings/globalUpdate/CheckboxContainer.ts';
+import {
+    CategoryDownloadInclusionInfo,
+    CategoryIdInfo,
+    CategoryNameInfo,
+    CategoryUpdateInclusionInfo,
+} from '@/lib/data/Categories.ts';
+
+type CategoryType = CategoryIdInfo & CategoryNameInfo & CategoryUpdateInclusionInfo & CategoryDownloadInclusionInfo;
 
 const booleanToIncludeOrExcludeStatus = (status: boolean | null | undefined): IncludeOrExclude => {
     switch (status) {
@@ -52,19 +60,11 @@ const includeInUpdateStatusToBoolean = (status: IncludeOrExclude): boolean | nul
 };
 
 const getCategoryUpdateInfo = (
-    categories: TCategory[],
+    categories: CategoryType[],
     areIncluded: boolean,
     unsetCategories: number,
     allCategories: number,
-    error: any,
 ) => {
-    if (error) {
-        return translate('global.error.label.failed_to_load_data');
-    }
-    if (allCategories === -1) {
-        return translate('global.label.loading');
-    }
-
     const noSpecificallyIncludedCategories = areIncluded && !categories.length && unsetCategories;
     const includesAllCategories = categories.length === allCategories;
     if (noSpecificallyIncludedCategories || includesAllCategories) {
@@ -80,18 +80,20 @@ const getCategoryUpdateInfo = (
 
 type CategoryIncludeField = keyof Pick<TCategory, 'includeInUpdate' | 'includeInDownload'>;
 
-type CategoriesInclusionSettingProps = {
+export type CategoriesInclusionSettingProps = {
+    categories: CategoryType[];
     includeField: CategoryIncludeField;
     dialogText?: string;
 };
 
-export const CategoriesInclusionSetting = (props: CategoriesInclusionSettingProps) => {
+export const CategoriesInclusionSetting = ({
+    categories,
+    includeField,
+    dialogText,
+}: CategoriesInclusionSettingProps) => {
     const { t } = useTranslation();
 
-    const { includeField, dialogText } = props;
-    const { data, error: requestError } = requestManager.useGetCategories();
-    const categories = data?.categories.nodes;
-    const [dialogCategories, setDialogCategories] = useState<TCategory[]>(categories ?? []);
+    const [dialogCategories, setDialogCategories] = useState(categories);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
     useEffect(() => {
@@ -102,28 +104,23 @@ export const CategoriesInclusionSetting = (props: CategoriesInclusionSettingProp
         setDialogCategories(categories);
     }, [categories]);
 
-    const unsetCategories: TCategory[] =
-        categories?.filter((category) => category[includeField] === IncludeOrExclude.Unset) ?? [];
-    const excludedCategories: TCategory[] =
-        categories?.filter((category) => category[includeField] === IncludeOrExclude.Exclude) ?? [];
-    const includedCategories: TCategory[] =
-        categories?.filter((category) => category[includeField] === IncludeOrExclude.Include) ?? [];
+    const unsetCategories = categories.filter((category) => category[includeField] === IncludeOrExclude.Unset);
+    const excludedCategories = categories.filter((category) => category[includeField] === IncludeOrExclude.Exclude);
+    const includedCategories = categories.filter((category) => category[includeField] === IncludeOrExclude.Include);
     const excludedCategoriesText = getCategoryUpdateInfo(
         excludedCategories,
         false,
         unsetCategories.length,
-        categories?.length ?? -1,
-        requestError,
+        categories.length,
     );
     const includedCategoriesText = getCategoryUpdateInfo(
         includedCategories,
         true,
         unsetCategories.length,
-        categories?.length ?? -1,
-        requestError,
+        categories.length,
     );
 
-    const updateCategory = (category: TCategory) =>
+    const updateCategory = (category: CategoryType) =>
         requestManager.updateCategory(category.id, { [includeField]: category[includeField] }).response;
 
     const updateCategories = async () => {
@@ -150,7 +147,7 @@ export const CategoriesInclusionSetting = (props: CategoriesInclusionSettingProp
     };
 
     const closeDialog = () => {
-        setDialogCategories(categories ?? []);
+        setDialogCategories(categories);
         setIsDialogOpen(false);
     };
 
@@ -193,7 +190,7 @@ export const CategoriesInclusionSetting = (props: CategoriesInclusionSettingProp
                                     const categoryIndex = dialogCategories.findIndex(
                                         (category_) => category_ === category,
                                     );
-                                    const updatedDialogCategories: TCategory[] = [
+                                    const updatedDialogCategories = [
                                         ...dialogCategories.slice(0, categoryIndex),
                                         {
                                             ...category,

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -13,21 +13,21 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
-import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
-import { MetadataDownloadSettings } from '@/typings.ts';
+import { updateMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
+import { MetadataDownloadSettings, MetadataServerSettings } from '@/typings.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
 
 const MIN_LIMIT = 2;
 const MAX_LIMIT = 10;
 const DEFAULT_LIMIT = MIN_LIMIT;
 
-export const DownloadAheadSetting = () => {
+export const DownloadAheadSetting = ({
+    downloadAheadLimit,
+}: {
+    downloadAheadLimit: MetadataServerSettings['downloadAheadLimit'];
+}) => {
     const { t } = useTranslation();
 
-    const {
-        settings: { downloadAheadLimit },
-    } = useMetadataServerSettings();
-
     const shouldDownloadAhead = !!downloadAheadLimit;
     const [currentDownloadAheadLimit, persistDownloadAheadLimit] = usePersistedValue(
         'lastDownloadAheadLimit',

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 (

src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx

@@ -15,16 +15,21 @@ 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_VALUE = 23;
 const MIN_VALUE = 1;
 const MAX_VALUE = 23; // 1 month
 
-export const WebUIUpdateIntervalSetting = ({ disabled = false }: { disabled?: boolean }) => {
+export const WebUIUpdateIntervalSetting = ({
+    disabled = false,
+    updateCheckInterval,
+}: {
+    disabled?: boolean;
+    updateCheckInterval: ServerSettings['webUIUpdateCheckInterval'];
+}) => {
     const { t } = useTranslation();
 
-    const { data } = requestManager.useGetServerSettings();
-    const updateCheckInterval = data?.settings.webUIUpdateCheckInterval;
     const shouldAutoUpdate = !!updateCheckInterval;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
     const [currentUpdateCheckInterval, persistUpdateCheckInterval] = usePersistedValue(