Add retry logic to Library error handling

src/components/MangaGrid.tsx

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

src/components/library/LibraryMangaGrid.tsx

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

src/components/util/EmptyView.tsx

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