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

Add retry logic to Library error handling

Browse Source
This commit is contained in:
schroda
2024-04-27 22:29:23 +02:00
parent 773d2b1026
commit 7531edbd59
4 changed files with 51 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MangaGrid.tsx
View File

@@ -9,7 +9,6 @@
import React, { ForwardedRef, forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import Grid, { GridTypeMap } from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
import { useLocation } from 'react-router-dom';
import { EmptyView } from '@/components/util/EmptyView';
@@ -212,9 +211,9 @@ const VerticalGrid = forwardRef(
},
);
export interface IMangaGridProps extends Omit<DefaultGridProps, 'GridItemContainer'> {
message?: string;
messageExtra?: JSX.Element;
export interface IMangaGridProps
extends Omit<DefaultGridProps, 'GridItemContainer'>,
Partial<React.ComponentProps<typeof EmptyView>> {
hasNextPage: boolean;
loadMore: () => void;
horizontal?: boolean | undefined;
@@ -237,6 +236,7 @@ export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
selectedMangaIds,
handleSelection,
mode,
retry,
} = props;
const gridRef = useRef<HTMLDivElement>(null);
@@ -314,20 +314,7 @@ export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
const hasNoItems = !isLoading && mangas.length === 0;
if (hasNoItems) {
if (noFaces) {
return (
<Box
sx={{
margin: 'auto',
}}
>
<Typography variant="h5">{message}</Typography>
{messageExtra}
</Box>
);
}
return <EmptyView message={message!} messageExtra={messageExtra} />;
return <EmptyView noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />;
}
return (
@@ -370,8 +357,3 @@ export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
</div>
);
};
MangaGrid.defaultProps = {
message: '',
messageExtra: undefined,
};

18
src/components/library/LibraryMangaGrid.tsx
View File

@@ -14,21 +14,18 @@ import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsCon
import { IMangaGridProps, MangaGrid } from '@/components/MangaGrid';
interface LibraryMangaGridProps
extends Required<Pick<IMangaGridProps, 'isSelectModeActive' | 'selectedMangaIds' | 'handleSelection'>> {
extends Required<Pick<IMangaGridProps, 'isSelectModeActive' | 'selectedMangaIds' | 'handleSelection'>>,
Pick<IMangaGridProps, 'retry' | 'message' | 'messageExtra'> {
mangas: TManga[];
showFilteredOutMessage: boolean;
isLoading: boolean;
message?: string;
}
export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
mangas,
showFilteredOutMessage,
isLoading,
message,
isSelectModeActive,
selectedMangaIds,
handleSelection,
messageExtra,
...gridProps
}) => {
const { t } = useTranslation();
@@ -42,15 +39,12 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
return (
<MangaGrid
mangas={mangas}
isLoading={isLoading}
{...gridProps}
hasNextPage={false}
loadMore={() => undefined}
message={showFilteredOutMessage ? t('library.error.label.no_matches') : message}
messageExtra={showFilteredOutMessage ? undefined : messageExtra}
gridLayout={options.gridLayout}
isSelectModeActive={isSelectModeActive}
selectedMangaIds={selectedMangaIds}
handleSelection={handleSelection}
/>
);
};

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

@@ -27,9 +27,10 @@ interface IProps {
message: string;
messageExtra?: JSX.Element | string;
retry?: () => void;
noFaces?: boolean;
}
export function EmptyView({ message, messageExtra, retry }: IProps) {
export function EmptyView({ message, messageExtra, retry, noFaces }: IProps) {
const { t } = useTranslation();
const theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
@@ -47,9 +48,11 @@ export function EmptyView({ message, messageExtra, retry }: IProps) {
alignItems: 'center',
}}
>
<Typography variant="h3" gutterBottom>
{errorFace}
</Typography>
{!noFaces && (
<Typography variant="h3" gutterBottom>
{errorFace}
</Typography>
)}
{retry && <Button onClick={retry}>{t('global.button.retry')}</Button>}
<Typography variant="h5">{message}</Typography>
{messageExtra}

57
src/screens/Library.tsx
View File

@@ -9,7 +9,7 @@
import Chip from '@mui/material/Chip';
import Tab from '@mui/material/Tab';
import { styled } from '@mui/material/styles';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useQueryParam, NumberParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -31,6 +31,7 @@ import { PARTIAL_MANGA_FIELDS } from '@/lib/graphql/Fragments.ts';
import { MangaActionMenuItems } from '@/components/manga/MangaActionMenuItems.tsx';
import { TabsMenu } from '@/components/tabs/TabsMenu.tsx';
import { TabsWrapper } from '@/components/tabs/TabsWrapper.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
const TitleWithSizeTag = styled('span')({
display: 'flex',
@@ -49,7 +50,8 @@ export function Library() {
data: categoriesResponse,
error: tabsError,
loading: areCategoriesLoading,
} = requestManager.useGetCategories();
refetch: refetchCategories,
} = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
const tabsData = categoriesResponse?.categories.nodes.filter(
(category) => category.id !== 0 || (category.id === 0 && category.mangas.totalCount),
);
@@ -66,10 +68,16 @@ export function Library() {
data: categoryMangaResponse,
error: mangaError,
loading: mangaLoading,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab });
refetch: refetchCategoryMangas,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, notifyOnNetworkStatusChange: true });
const categoryMangas = categoryMangaResponse?.mangas.nodes ?? [];
const { visibleMangas: mangas, showFilteredOutMessage } = useGetVisibleLibraryMangas(categoryMangas);
const retryFetchCategoryMangas = useCallback(
() => refetchCategoryMangas().catch(defaultPromiseErrorHandler('Library::refetchCategoryMangas')),
[refetchCategoryMangas, activeTab],
);
const mangaIds = useMemo(() => mangas.map((manga) => manga.id), [mangas]);
const [isSelectModeActive, setIsSelectModeActive] = useState(false);
@@ -189,7 +197,8 @@ export function Library() {
return (
<EmptyView
message={t('category.error.label.request_failure')}
messageExtra={tabsError.message ?? tabsError}
messageExtra={tabsError.message}
retry={() => refetchCategories().catch(defaultPromiseErrorHandler('Library::refetchCategories'))}
/>
);
}
@@ -207,12 +216,14 @@ export function Library() {
<>
<LibraryMangaGrid
mangas={mangas}
message={t('library.error.label.empty')}
isLoading={activeTab != null && mangaLoading}
message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
messageExtra={mangaError?.message}
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}
isSelectModeActive={isSelectModeActive}
handleSelection={handleSelect}
showFilteredOutMessage={showFilteredOutMessage}
showFilteredOutMessage={!mangaError && showFilteredOutMessage}
retry={mangaError && retryFetchCategoryMangas}
/>
{selectionFab}
</>
@@ -238,23 +249,21 @@ export function Library() {
</TabsMenu>
{tabs.map((tab) => (
<TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
{tab === activeTab &&
(mangaError ? (
<EmptyView
message={t('manga.error.label.request_failure')}
messageExtra={mangaError.message ?? mangaError}
/>
) : (
<LibraryMangaGrid
mangas={mangas}
message={t('library.error.label.empty')}
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}
isSelectModeActive={isSelectModeActive}
handleSelection={handleSelect}
showFilteredOutMessage={showFilteredOutMessage}
/>
))}
{tab === activeTab && (
<LibraryMangaGrid
mangas={mangas}
message={
mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')
}
messageExtra={mangaError?.message}
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}
isSelectModeActive={isSelectModeActive}
handleSelection={handleSelect}
showFilteredOutMessage={!mangaError && showFilteredOutMessage}
retry={mangaError && retryFetchCategoryMangas}
/>
)}
</TabPanel>
))}
{selectionFab}