[Codegen] Use gql for "loading chapters"

src/screens/Updates.tsx

@@ -18,12 +18,13 @@ import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import { GroupedVirtuoso } from 'react-virtuoso';
-import { IChapter, IMangaChapter, IQueue } from '@/typings';
+import { IQueue } from '@/typings';
 import requestManager from '@/lib/requests/RequestManager.ts';
 import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
 import EmptyView from '@/components/util/EmptyView';
 import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
 import NavbarContext from '@/components/context/NavbarContext';
+import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 
 const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
     // 64px header
@@ -81,14 +82,14 @@ function getDateString(date: Date) {
     return date.toLocaleDateString();
 }
 
-const groupByDate = (updates: IMangaChapter[]): [date: string, items: number][] => {
+const groupByDate = (updates: ChapterType[]): [date: string, items: number][] => {
     if (!updates.length) {
         return [];
     }
 
     const dateToItemMap = new Map<string, number>();
     updates.forEach((item) => {
-        const date = getDateString(epochToDate(item.chapter.fetchedAt));
+        const date = getDateString(epochToDate(Number(item.fetchedAt)));
         dateToItemMap.set(date, (dateToItemMap.get(date) ?? 0) + 1);
     });
 
@@ -106,19 +107,18 @@ const Updates: React.FC = () => {
 
     const { setTitle, setAction } = useContext(NavbarContext);
     const {
-        data: pages = [{ hasNextPage: false, page: [] }],
-        isLoading,
-        size: loadedPages,
-        setSize: setPages,
-    } = requestManager.useGetRecentlyUpdatedChapters();
-    const { hasNextPage } = pages[pages.length - 1];
-    const updateEntries = useMemo(
-        () => pages.map((page) => page.page).reduce((lastPageChapters, chapters) => [...lastPageChapters, ...chapters]),
-        [pages],
-    );
+        data: chapterUpdateData,
+        loading: isLoading,
+        fetchMore,
+    } = requestManager.useGetRecentlyUpdatedChapters(undefined, {
+        fetchPolicy: 'cache-and-network',
+        notifyOnNetworkStatusChange: true,
+    });
+    const hasNextPage = !!chapterUpdateData?.chapters.pageInfo.hasNextPage;
+    const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
+    const updateEntries = (chapterUpdateData?.chapters.nodes as ChapterType[]) ?? [];
     const groupedUpdates = useMemo(() => groupByDate(updateEntries), [updateEntries]);
     const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
-
     const [, setWsClient] = useState<WebSocket>();
     const [{ queue }, setQueueState] = useState<IQueue>(initialQueue);
 
@@ -140,12 +140,15 @@ const Updates: React.FC = () => {
         setAction(null);
     }, [t]);
 
-    const downloadForChapter = (chapter: IChapter) => {
-        const { index, mangaId } = chapter;
-        return queue.find((q) => index === q.chapterIndex && mangaId === q.mangaId);
+    const downloadForChapter = (chapter: ChapterType) => {
+        const {
+            sourceOrder,
+            manga: { id: mangaId },
+        } = chapter;
+        return queue.find((q) => sourceOrder === q.chapterIndex && mangaId === q.mangaId);
     };
 
-    const downloadChapter = (chapter: IChapter) => {
+    const downloadChapter = (chapter: ChapterType) => {
         requestManager.addChapterToDownloadQueue(chapter.id);
     };
 
@@ -154,8 +157,8 @@ const Updates: React.FC = () => {
             return;
         }
 
-        setPages(loadedPages + 1);
-    }, [hasNextPage, loadedPages]);
+        fetchMore({ variables: { offset: updateEntries.length } });
+    }, [hasNextPage, endCursor]);
 
     if (!isLoading && updateEntries.length === 0) {
         return <EmptyView message={t('updates.error.label.no_updates_available')} />;
@@ -179,7 +182,8 @@ const Updates: React.FC = () => {
                 </StyledGroupHeader>
             )}
             itemContent={(index) => {
-                const { chapter, manga } = updateEntries[index];
+                const chapter = updateEntries[index];
+                const { manga } = chapter;
                 const download = downloadForChapter(chapter);
 
                 return (
@@ -187,7 +191,7 @@ const Updates: React.FC = () => {
                         <Card>
                             <CardActionArea
                                 component={Link}
-                                to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
+                                to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
                                 state={location.state}
                             >
                                 <CardContent
@@ -208,7 +212,7 @@ const Updates: React.FC = () => {
                                                 marginRight: 2,
                                                 imageRendering: 'pixelated',
                                             }}
-                                            src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)}
+                                            src={requestManager.getValidImgUrlFor(manga.thumbnailUrl ?? '')}
                                         />
                                         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                             <Typography variant="h5" component="h2">
@@ -220,7 +224,7 @@ const Updates: React.FC = () => {
                                         </Box>
                                     </Box>
                                     {download && <DownloadStateIndicator download={download} />}
-                                    {download == null && !chapter.downloaded && (
+                                    {download == null && !chapter.isDownloaded && (
                                         <IconButton
                                             onClick={(e) => {
                                                 e.stopPropagation();