ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add missing error handling

Browse Source
This commit is contained in:
schroda
2024-04-27 22:28:55 +02:00
parent a447719309
commit 773d2b1026
20 changed files with 322 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/screens/DownloadQueue.tsx
View File

@@ -103,7 +103,12 @@ export const DownloadQueue: React.FC = () => {
const [reorderDownload, { reset: revertReorder }] = requestManager.useReorderChapterInDownloadQueue();
const { data: downloadStatusData, loading: isLoading } = requestManager.useGetDownloadStatus();
const {
data: downloadStatusData,
loading: isLoading,
error,
refetch,
} = requestManager.useGetDownloadStatus({ notifyOnNetworkStatusChange: true });
const downloaderData = downloadStatusData?.downloadStatus;
const queue = (downloaderData?.queue as DownloadType[]) ?? [];
@@ -203,7 +208,7 @@ export const DownloadQueue: React.FC = () => {
// bug: The folder and the last image downloaded are not deleted
requestManager.deleteDownloadedChapter(chapter.id).response,
]);
} catch (error) {
} catch (e) {
makeToast(t('download.queue.error.label.failed_to_remove'), 'error');
}
@@ -218,6 +223,16 @@ export const DownloadQueue: React.FC = () => {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadQueue::refetch'))}
/>
);
}
if (isQueueEmpty) {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}

16
src/screens/Extensions.tsx
View File

@@ -39,6 +39,8 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx';
import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
const LANGUAGE = 0;
const EXTENSIONS = 1;
@@ -114,7 +116,7 @@ export function Extensions() {
const [query] = useQueryParam('query', StringParam);
const [refetchExtensions, setRefetchExtensions] = useState({});
const [fetchExtensions, { data, loading: isLoading, called }] = requestManager.useExtensionListFetch();
const [fetchExtensions, { data, loading: isLoading, error }] = requestManager.useExtensionListFetch();
const allExtensions = data?.fetchExtensions.extensions;
const handleExtensionUpdate = useCallback(() => setRefetchExtensions({}), []);
@@ -229,10 +231,20 @@ export function Extensions() {
[],
);
if (!allExtensions && (isLoading || !called)) {
if (isLoading) {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetch'))}
/>
);
}
const showAddRepoInfo = !allExtensions?.length && !areReposDefined;
if (showAddRepoInfo) {
return (

4
src/screens/Migration.tsx
View File

@@ -43,7 +43,9 @@ const getMigratableSources = (mangas?: TMigratableSourcesResult): TMigratableSou
export const Migration = () => {
const { t } = useTranslation();
const { data, loading, error } = requestManager.useGetMigratableSources();
const { data, loading, error } = requestManager.useGetMigratableSources({
notifyOnNetworkStatusChange: true,
});
const migratableSources = useMemo(() => getMigratableSources(data?.mangas.nodes), [data?.mangas.nodes]);
if (loading) {

48
src/screens/Reader.tsx
View File

@@ -32,6 +32,7 @@ import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { Chapters } from '@/lib/data/Chapters.ts';
import { EmptyView } from '@/components/util/EmptyView.tsx';
const getReaderComponent = (readerType: ReaderType) => {
switch (readerType) {
@@ -95,7 +96,12 @@ export function Reader() {
Number(chapterIndex) === loadedChapter.current?.sourceOrder &&
loadedChapter.current?.pageCount !== -1;
const manga = data?.manga ?? initialManga;
const { data: chapterData, loading: isChapterLoading } = requestManager.useGetMangaChapter(mangaId, chapterIndex);
const {
data: chapterData,
loading: isChapterLoading,
error: chapterError,
refetch: fetchChapter,
} = requestManager.useGetMangaChapter(mangaId, chapterIndex, { notifyOnNetworkStatusChange: true });
const arePagesUpdatedRef = useRef(false);
const {
@@ -124,20 +130,30 @@ export function Reader() {
loadedChapter.current = getLoadedChapter();
const chapter = loadedChapter.current ?? initialChapter;
const [fetchPages] = requestManager.useGetChapterPagesFetch(chapter.id);
const [fetchPages, { loading: arePagesLoading, error: pagesError }] = requestManager.useGetChapterPagesFetch(
chapter.id,
);
useEffect(() => {
const doFetchPages = () => {
const shouldFetchPages = !isChapterLoading && !chapter.isDownloaded;
if (shouldFetchPages) {
fetchPages().then(() => {
arePagesUpdatedRef.current = true;
});
fetchPages()
.then(() => {
arePagesUpdatedRef.current = true;
})
.catch(defaultPromiseErrorHandler('Reader::fetchPages'));
} else {
arePagesUpdatedRef.current = true;
}
};
useEffect(() => {
doFetchPages();
}, [chapter.id]);
const isLoading = isChapterLoading || !arePagesUpdatedRef.current;
const isLoading =
isChapterLoading || arePagesLoading || (!arePagesUpdatedRef.current && !chapterError && !pagesError);
const error = chapterError ?? pagesError;
const [wasLastPageReadSet, setWasLastPageReadSet] = useState(false);
const [curPage, setCurPage] = useState<number>(0);
const isLastPage = curPage === chapter.pageCount - 1;
@@ -416,6 +432,24 @@ export function Reader() {
);
}
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => {
if (chapterError) {
fetchChapter().catch(defaultPromiseErrorHandler('Reader::refetchChapter'));
}
if (pagesError) {
doFetchPages();
}
}}
/>
);
}
const pages = range(chapter.pageCount).map((index) => ({
index,
src: requestManager.getChapterPageUrl(mangaId, chapterIndex, index),

16
src/screens/SourceConfigure.tsx
View File

@@ -19,6 +19,8 @@ import { MultiSelectListPreference } from '@/components/sourceConfiguration/Mult
import { PreferenceProps } from '@/typings.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
function getPrefComponent(type: string) {
switch (type) {
@@ -52,7 +54,9 @@ export function SourceConfigure() {
}, [t]);
const { sourceId } = useParams<{ sourceId: string }>();
const { data, loading } = requestManager.useGetSource(sourceId);
const { data, loading, error, refetch } = requestManager.useGetSource(sourceId, {
notifyOnNetworkStatusChange: true,
});
const sourcePreferences = data?.source.preferences ?? [];
const updateValue =
@@ -65,6 +69,16 @@ export function SourceConfigure() {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('SourceConfigure::refetch'))}
/>
);
}
return (
<List sx={{ padding: 0 }}>
{sourcePreferences.map((it, index) => {

21
src/screens/Sources.tsx
View File

@@ -22,6 +22,8 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
import { SourceCard } from '@/components/SourceCard';
import { LangSelect } from '@/components/navbar/action/LangSelect';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
function sourceToLangList(sources: ISource[]) {
const result: string[] = [];
@@ -55,7 +57,12 @@ export function Sources() {
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
const { data, loading: isLoading } = requestManager.useGetSourceList();
const {
data,
loading: isLoading,
error,
refetch,
} = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
const sources = data?.sources.nodes;
const areSourcesFromDifferentRepos = useMemo(() => {
@@ -109,8 +116,18 @@ export function Sources() {
if (isLoading) return <LoadingPlaceholder />;
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))}
/>
);
}
if (sources?.length === 0) {
return <h3>{t('source.error.label.no_sources_found')}</h3>;
return <EmptyView message={t('source.error.label.no_sources_found')} />;
}
return (

13
src/screens/settings/About.tsx
View File

@@ -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

19
src/screens/settings/Backup.tsx
View File

@@ -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 }}>

16
src/screens/settings/BrowseSettings.tsx
View File

@@ -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>

14
src/screens/settings/Categories.tsx
View File

@@ -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}>

30
src/screens/settings/DefaultReaderSettings.tsx
View File

@@ -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'))}
/>
);
}

16
src/screens/settings/DownloadSettings.tsx
View File

@@ -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

16
src/screens/settings/ServerSettings.tsx
View File

@@ -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

16
src/screens/settings/WebUISettings.tsx
View File

@@ -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>