Add missing error handling

2024-04-27 22:28:55 +02:00
parent a447719309
commit 773d2b1026
20 changed files with 322 additions and 65 deletions
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -28,6 +28,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { GetAboutQuery, UpdateState } from '@/lib/graphql/generated/graphql.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';

 type AboutServer = GetAboutQuery['aboutServer'];

@@ -201,7 +202,7 @@ export function About() {

    useSetDefaultBackTo('settings');

-    const { data, loading } = requestManager.useGetAbout();
+    const { data, loading, error, refetch } = requestManager.useGetAbout({ notifyOnNetworkStatusChange: true });
    const { aboutServer, aboutWebUI } = data ?? {};

    const {
@@ -239,6 +240,16 @@ export function About() {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
+            />
+        );
+    }
+
    return (
        <List>
            <List
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -32,6 +32,8 @@ import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;

@@ -71,7 +73,12 @@ export function Backup() {

    useSetDefaultBackTo('settings');

-    const { data: settingsData, loading } = requestManager.useGetServerSettings();
+    const {
+        data: settingsData,
+        loading,
+        error,
+        refetch,
+    } = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
    const [mutateSettings] = requestManager.useUpdateServerSettings();

    const backupSettings = settingsData ? extractBackupSettings(settingsData.settings) : undefined;
@@ -228,6 +235,16 @@ export function Backup() {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Backup::refetch'))}
+            />
+        );
+    }
+
    return (
        <>
            <List sx={{ padding: 0 }}>
--- a/src/screens/settings/BrowseSettings.tsx
+++ b/src/screens/settings/BrowseSettings.tsx
@@ -24,6 +24,8 @@ import {
    useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;

@@ -46,7 +48,9 @@ export const BrowseSettings = () => {

    const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);

-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
    const serverSettings = data ? extractBrowseSettings(data.settings) : undefined;
    const [mutateSettings] = requestManager.useUpdateServerSettings();

@@ -66,6 +70,16 @@ export const BrowseSettings = () => {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('BrowseSettings::refetch'))}
+            />
+        );
+    }
+
    return (
        <List>
            <ListItem>
--- a/src/screens/settings/Categories.tsx
+++ b/src/screens/settings/Categories.tsx
@@ -35,6 +35,8 @@ import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { TCategory } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 const getItemStyle = (
    isDragging: boolean,
@@ -63,7 +65,7 @@ export function Categories() {
        };
    }, [t]);

-    const { data, loading } = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
+    const { data, loading, error, refetch } = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
    const categories = useMemo(() => {
        const res = [...(data?.categories.nodes ?? [])];
        if (res.length > 0 && res[0].name === 'Default') {
@@ -140,6 +142,16 @@ export function Categories() {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('category.error.label.request_failure')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Categories::refetch'))}
+            />
+        );
+    }
+
    return (
        <>
            <DragDropContext onDragEnd={onDragEnd}>
--- a/src/screens/settings/DefaultReaderSettings.tsx
+++ b/src/screens/settings/DefaultReaderSettings.tsx
@@ -7,8 +7,6 @@
 */

 import { useContext, useEffect } from 'react';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts';
@@ -21,6 +19,8 @@ import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions
 import { makeToast } from '@/components/util/Toast';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';

 export function DefaultReaderSettings() {
    const { t } = useTranslation();
@@ -35,7 +35,12 @@ export function DefaultReaderSettings() {
        };
    }, [t]);

-    const { metadata, settings, loading } = useDefaultReaderSettings();
+    const {
+        metadata,
+        settings,
+        loading,
+        request: { error, refetch },
+    } = useDefaultReaderSettings();

    useSetDefaultBackTo('settings');

@@ -48,17 +53,16 @@ export function DefaultReaderSettings() {
    };

    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
        return (
-            <Box
-                sx={{
-                    height: '100vh',
-                    width: '100vw',
-                    display: 'grid',
-                    placeItems: 'center',
-                }}
-            >
-                <CircularProgress thickness={5} />
-            </Box>
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DefaultReaderSettings::refetch'))}
+            />
        );
    }

--- a/src/screens/settings/DownloadSettings.tsx
+++ b/src/screens/settings/DownloadSettings.tsx
@@ -27,6 +27,8 @@ import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloa
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 type DownloadSettingsType = Pick<
    ServerSettings,
@@ -63,7 +65,9 @@ export const DownloadSettings = () => {
        };
    }, [t]);

-    const { data } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
    const downloadSettings = data ? extractDownloadSettings(data.settings) : undefined;
    const [mutateSettings] = requestManager.useUpdateServerSettings();
    const { settings: metadataSettings } = useMetadataServerSettings();
@@ -85,6 +89,16 @@ export const DownloadSettings = () => {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadSettings::refetch'))}
+            />
+        );
+    }
+
    return (
        <List>
            <TextSetting
--- a/src/screens/settings/ServerSettings.tsx
+++ b/src/screens/settings/ServerSettings.tsx
@@ -22,6 +22,8 @@ import { ServerSettings as GqlServerSettings } from '@/typings.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/components/settings/SelectSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 type ServerSettingsType = Pick<
    GqlServerSettings,
@@ -84,7 +86,9 @@ export const ServerSettings = () => {
        };
    }, [t]);

-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
    const serverSettings = data ? extractServerSettings(data.settings) : undefined;
    const [mutateSettings] = requestManager.useUpdateServerSettings();

@@ -107,6 +111,16 @@ export const ServerSettings = () => {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
+            />
+        );
+    }
+
    return (
        <List>
            <List
--- a/src/screens/settings/WebUISettings.tsx
+++ b/src/screens/settings/WebUISettings.tsx
@@ -24,6 +24,8 @@ import {
 } from '@/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 type WebUISettingsType = Pick<
    ServerSettings,
@@ -125,7 +127,9 @@ export const WebUISettings = () => {
        };
    }, [t]);

-    const { data, loading } = requestManager.useGetServerSettings();
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
    const webUISettings = data ? extractWebUISettings(data.settings) : undefined;
    const [mutateSettings] = requestManager.useUpdateServerSettings();

@@ -146,6 +150,16 @@ export const WebUISettings = () => {
        return <LoadingPlaceholder />;
    }

+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('WebUISettings::refetch'))}
+            />
+        );
+    }
+
    return (
        <List>
            <SelectSetting<WebUiFlavor>