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'> {
+export interface IMangaGridProps
-    message?: string;
+    extends Omit<DefaultGridProps, 'GridItemContainer'>,
-    messageExtra?: JSX.Element;
+        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 <EmptyView noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />;
-            return (
-                <Box
-                    sx={{
-                        margin: 'auto',
-                    }}
-                >
-                    <Typography variant="h5">{message}</Typography>
-                    {messageExtra}
-                </Box>
-            );
-        }
-
-        return <EmptyView message={message!} messageExtra={messageExtra} />;
     }
 
     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,
+    messageExtra,
-    selectedMangaIds,
+    ...gridProps
-    handleSelection,
 }) => {
     const { t } = useTranslation();
 
@@ -42,15 +39,12 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
 
     return (
         <MangaGrid
-            mangas={mangas}
+            {...gridProps}
-            isLoading={isLoading}
             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',
             }}
         >
+            {!noFaces && (
                 <Typography variant="h3" gutterBottom>
                     {errorFace}
                 </Typography>
+            )}
             {retry && <Button onClick={retry}>{t('global.button.retry')}</Button>}
             <Typography variant="h5">{message}</Typography>
             {messageExtra}

src/screens/Library.tsx

@@ -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')}
+                    message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
-                    isLoading={activeTab != null && mangaLoading}
+                    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 &&
+                    {tab === activeTab && (
-                        (mangaError ? (
-                            <EmptyView
-                                message={t('manga.error.label.request_failure')}
-                                messageExtra={mangaError.message ?? mangaError}
-                            />
-                        ) : (
                         <LibraryMangaGrid
                             mangas={mangas}
-                                message={t('library.error.label.empty')}
+                            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}
                         />
-                        ))}
+                    )}
                 </TabPanel>
             ))}
             {selectionFab}