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

34
src/components/chapter/ChapterList.tsx
View File

@@ -7,7 +7,6 @@
*/
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
@@ -36,6 +35,8 @@ import { Chapters } from '@/lib/data/Chapters.ts';
import { ChaptersWithMeta } from '@/lib/data/ChaptersWithMeta.ts';
import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDownloadActionMenuItems.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
const ChapterListHeader = styled(Stack)(({ theme }) => ({
margin: 8,
@@ -77,7 +78,12 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
const queue = (downloaderData?.downloadStatus.queue as DownloadType[]) ?? [];
const [options, dispatch] = useChapterOptions(manga.id);
const { data: chaptersData, loading: isLoading } = requestManager.useGetMangaChapters(manga.id);
const {
data: chaptersData,
loading: isLoading,
error,
refetch,
} = requestManager.useGetMangaChapters(manga.id, { notifyOnNetworkStatusChange: true });
const chapters = useMemo(() => chaptersData?.chapters.nodes ?? [], [chaptersData?.chapters.nodes]);
const chapterIds = useMemo(() => chapters.map((chapter) => chapter.id), [chapters]);
@@ -134,15 +140,21 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
if (isLoading || (noChaptersFound && isRefreshing)) {
return (
<div
style={{
margin: '10px auto',
display: 'flex',
justifyContent: 'center',
}}
>
<CircularProgress thickness={5} />
</div>
<Stack sx={{ justifyContent: 'center', alignItems: 'center', position: 'relative', flexGrow: 1 }}>
<LoadingPlaceholder />
</Stack>
);
}
if (error) {
return (
<Stack sx={{ justifyContent: 'center', position: 'relative', flexGrow: 1 }}>
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('ChapterList::refetch'))}
/>
</Stack>
);
}

13
src/components/settings/DeviceSetting.tsx
View File

@@ -20,6 +20,8 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
import { Select } from '@/components/atoms/Select.tsx';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
export const DeviceSetting = () => {
const { t } = useTranslation();
@@ -41,6 +43,7 @@ export const DeviceSetting = () => {
metadata,
settings: { devices },
loading,
request: { error, refetch },
} = useMetadataServerSettings();
const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
@@ -67,6 +70,16 @@ export const DeviceSetting = () => {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyView
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('DeviceSetting::refetch'))}
/>
);
}
return (
<List>
<MutableListSetting

14
src/components/util/EmptyView.tsx
View File

@@ -11,8 +11,10 @@
import { useMemo } from 'react';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
@@ -24,30 +26,34 @@ function getRandomErrorFace() {
interface IProps {
message: string;
messageExtra?: JSX.Element | string;
retry?: () => void;
}
export function EmptyView({ message, messageExtra }: IProps) {
export function EmptyView({ message, messageExtra, retry }: IProps) {
const { t } = useTranslation();
const theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
const errorFace = useMemo(() => getRandomErrorFace(), []);
return (
<Box
<Stack
sx={{
position: 'absolute',
left: `calc(50% + ${isMobileWidth ? '0px' : theme.spacing(8 / 2)})`,
top: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center',
alignItems: 'center',
}}
>
<Typography variant="h3" gutterBottom>
{errorFace}
</Typography>
{retry && <Button onClick={retry}>{t('global.button.retry')}</Button>}
<Typography variant="h5">{message}</Typography>
{messageExtra}
</Box>
</Stack>
);
}

6
src/lib/metadata/metadataServerSettings.ts
View File

@@ -76,12 +76,14 @@ export const useMetadataServerSettings = (): {
metadata?: Metadata;
settings: MetadataServerSettings;
loading: boolean;
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
} => {
const { data, loading } = requestManager.useGetGlobalMeta();
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
const { data, loading } = request;
const metadata = convertFromGqlMeta(data?.metas.nodes);
const settings = getMetadataServerSettingsWithDefaultFallback(metadata);
return { metadata, settings, loading };
return { metadata, settings, loading, request };
};
export const getMetadataServerSettings = async (): Promise<MetadataServerSettings> => {

6
src/lib/metadata/readerSettings.ts
View File

@@ -54,12 +54,14 @@ export const useDefaultReaderSettings = (): {
metadata?: Metadata;
settings: IReaderSettings;
loading: boolean;
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
} => {
const { data, loading } = requestManager.useGetGlobalMeta();
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
const { data, loading } = request;
const metadata = convertFromGqlMeta(data?.metas.nodes);
const settings = getReaderSettingsWithDefaultValueFallback<IReaderSettings>(metadata);
return { metadata, settings, loading };
return { metadata, settings, loading, request };
};
/**

50
src/lib/requests/RequestManager.ts
View File

@@ -25,7 +25,7 @@ import {
useQuery,
useSubscription,
} from '@apollo/client';
import { OperationVariables } from '@apollo/client/core';
import { OperationVariables, Reference } from '@apollo/client/core';
import { useEffect, useMemo, useRef, useState } from 'react';
import { IRestClient, RestClient } from '@/lib/requests/client/RestClient.ts';
import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
@@ -269,7 +269,12 @@ import { DOWNLOAD_STATUS_SUBSCRIPTION } from '@/lib/graphql/subscriptions/Downlo
import { UPDATER_SUBSCRIPTION } from '@/lib/graphql/subscriptions/UpdaterSubscription.ts';
import { GET_SERVER_SETTINGS } from '@/lib/graphql/queries/SettingsQuery.ts';
import { UPDATE_SERVER_SETTINGS } from '@/lib/graphql/mutations/SettingsMutation.ts';
import { BASE_MANGA_FIELDS, FULL_DOWNLOAD_STATUS, FULL_EXTENSION_FIELDS } from '@/lib/graphql/Fragments.ts';
import {
BASE_MANGA_FIELDS,
FULL_DOWNLOAD_STATUS,
FULL_EXTENSION_FIELDS,
GLOBAL_METADATA,
} from '@/lib/graphql/Fragments.ts';
import { CLEAR_SERVER_CACHE } from '@/lib/graphql/mutations/ImageMutation.ts';
import { RESET_WEBUI_UPDATE_STATUS, UPDATE_WEBUI } from '@/lib/graphql/mutations/ServerInfoMutation.ts';
import { WEBUI_UPDATE_SUBSCRIPTION } from '@/lib/graphql/subscriptions/ServerInfoSubscription.ts';
@@ -1023,18 +1028,40 @@ export class RequestManager {
value: any,
options?: MutationOptions<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>,
): AbortableApolloMutationResponse<SetGlobalMetadataMutation> {
const result = this.doRequest<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>(
return this.doRequest<SetGlobalMetadataMutation, SetGlobalMetadataMutationVariables>(
GQLMethod.MUTATION,
SET_GLOBAL_METADATA,
{ input: { meta: { key, value: `${value}` } } },
options,
{
update(cache, { data }) {
cache.modify({
fields: {
metas(existingMetas, { readField }) {
if (!existingMetas) {
return existingMetas;
}
const exists = existingMetas.nodes.some(
// eslint-disable-next-line no-underscore-dangle
(meta: Reference) => readField('key', meta) === key,
);
if (exists) {
return existingMetas;
}
const newMetaRef = cache.writeFragment({
data: data!.setGlobalMeta.meta,
fragment: GLOBAL_METADATA,
});
return [...existingMetas, newMetaRef];
},
},
});
},
...options,
},
);
result.response.then(() => {
this.graphQLClient.client.cache.evict({ fieldName: 'metas' });
});
return result;
}
public useGetAbout(
@@ -1116,7 +1143,7 @@ export class RequestManager {
},
},
},
[this.cache.getFetchTimestampFor(EXTENSION_LIST_CACHE_KEY, undefined)],
[this.cache.getFetchTimestampFor(EXTENSION_LIST_CACHE_KEY, undefined), result.loading],
);
const wrappedMutate = async (mutateOptions: Parameters<typeof mutate>[0]) => {
@@ -2063,6 +2090,7 @@ export class RequestManager {
GQLMethod.USE_QUERY,
GET_CATEGORY_MANGAS,
{ id },
options as QueryHookOptions<GetCategoryMangasQuery, GetCategoryMangasQueryVariables>,
);
return {

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>