Use gql for "subscriptions"

src/screens/DownloadQueue.tsx

@@ -18,31 +18,26 @@ import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { IChapter, IQueue } from '@/typings';
 import requestManager from '@/lib/requests/RequestManager.ts';
 import StrictModeDroppable from '@/lib/StrictModeDroppable';
 import makeToast from '@/components/util/Toast';
 import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
 import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
-import useSubscription from '@/components/library/useSubscription';
 import EmptyView from '@/components/util/EmptyView';
 import NavbarContext from '@/components/context/NavbarContext';
-
-const initialQueue = {
-    status: 'Stopped',
-    queue: [],
-} as IQueue;
+import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
 
 const DownloadQueue: React.FC = () => {
     const { t } = useTranslation();
 
-    const { data: queueState } = useSubscription<IQueue>('downloads');
-    const { queue, status } = queueState ?? initialQueue;
+    const { data: downloaderData } = requestManager.useDownloadSubscription();
+    const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
+    const status = downloaderData?.downloadChanged.state ?? 'STARTED';
 
     const { setTitle, setAction } = useContext(NavbarContext);
 
     const toggleQueueStatus = () => {
-        if (status === 'Stopped') {
+        if (status === 'STOPPED') {
             requestManager.startDownloads();
         } else {
             requestManager.stopDownloads();
@@ -60,8 +55,8 @@ const DownloadQueue: React.FC = () => {
         return <EmptyView message={t('download.queue.label.no_downloads')} />;
     }
 
-    const handleDelete = async (chapter: IChapter) => {
-        const isRunning = status === 'Started';
+    const handleDelete = async (chapter: ChapterType) => {
+        const isRunning = status === 'STARTED';
 
         try {
             if (isRunning) {
@@ -91,7 +86,7 @@ const DownloadQueue: React.FC = () => {
         <>
             <NavbarToolbar>
                 <IconButton onClick={toggleQueueStatus} size="large">
-                    {status === 'Stopped' ? <PlayArrowIcon /> : <PauseIcon />}
+                    {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
                 </IconButton>
             </NavbarToolbar>
             <DragDropContext onDragEnd={onDragEnd}>
@@ -100,8 +95,8 @@ const DownloadQueue: React.FC = () => {
                         <Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}>
                             {queue.map((item, index) => (
                                 <Draggable
-                                    key={`${item.mangaId}-${item.chapterIndex}`}
-                                    draggableId={`${item.mangaId}-${item.chapterIndex}`}
+                                    key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
+                                    draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
                                     index={index}
                                 >
                                     {(draggableProvided, snapshot) => (
@@ -129,7 +124,7 @@ const DownloadQueue: React.FC = () => {
                                                         <DragHandle />
                                                     </IconButton>
                                                     <Stack sx={{ flex: 1, ml: 1 }} direction="column">
-                                                        <Typography variant="h6">{item.manga.title}</Typography>
+                                                        <Typography variant="h6">{item.chapter.manga.title}</Typography>
                                                         <Typography variant="caption" display="block" gutterBottom>
                                                             {item.chapter.name}
                                                         </Typography>

src/screens/Library.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Chip, Tab, Tabs, styled, Box } from '@mui/material';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import requestManager from '@/lib/requests/RequestManager.ts';
@@ -63,7 +63,6 @@ export default function Library() {
     const { t } = useTranslation();
 
     const { options } = useLibraryOptionsContext();
-    const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now());
     const {
         data: categoriesResponse,
         error: tabsError,
@@ -85,7 +84,7 @@ export default function Library() {
         data: categoryMangaResponse,
         error: mangaError,
         loading: mangaLoading,
-    } = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab });
+    } = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, nextFetchPolicy: 'cache-only' });
     const mangas = (categoryMangaResponse?.category.mangas.nodes as unknown as MangaType[]) ?? [];
 
     const { setTitle, setAction } = useContext(NavbarContext);
@@ -102,7 +101,7 @@ export default function Library() {
             <>
                 <AppbarSearch />
                 <LibraryToolbarMenu />
-                <UpdateChecker handleFinishedUpdate={setLastLibraryUpdate} />
+                <UpdateChecker />
             </>,
         );
         return () => {
@@ -136,7 +135,6 @@ export default function Library() {
         return (
             <LibraryMangaGrid
                 mangas={mangas}
-                lastLibraryUpdate={lastLibraryUpdate}
                 message={t('library.error.label.empty')}
                 isLoading={activeTab != null && mangaLoading}
             />
@@ -183,7 +181,6 @@ export default function Library() {
                         ) : (
                             <LibraryMangaGrid
                                 mangas={mangas}
-                                lastLibraryUpdate={lastLibraryUpdate}
                                 message={t('library.error.label.empty')}
                                 isLoading={mangaLoading}
                             />

src/screens/Updates.tsx

@@ -13,18 +13,17 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import { GroupedVirtuoso } from 'react-virtuoso';
-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';
+import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
 
 const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
     // 64px header
@@ -96,11 +95,6 @@ const groupByDate = (updates: ChapterType[]): [date: string, items: number][] =>
     return [...dateToItemMap.entries()];
 };
 
-const initialQueue = {
-    status: 'Stopped',
-    queue: [],
-} as IQueue;
-
 const Updates: React.FC = () => {
     const { t } = useTranslation();
     const location = useLocation();
@@ -120,20 +114,8 @@ const Updates: React.FC = () => {
     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);
-
-    useEffect(() => {
-        const wsc = requestManager.getDownloadWebSocket();
-        wsc.onmessage = (e) => {
-            const data = JSON.parse(e.data) as IQueue;
-            setQueueState(data);
-        };
-
-        setWsClient(wsc);
-
-        return () => wsc.close();
-    }, []);
+    const { data: downloaderData } = requestManager.useDownloadSubscription();
+    const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
 
     useEffect(() => {
         setTitle(t('updates.title'));
@@ -146,7 +128,7 @@ const Updates: React.FC = () => {
             sourceOrder,
             manga: { id: mangaId },
         } = chapter;
-        return queue.find((q) => sourceOrder === q.chapterIndex && mangaId === q.mangaId);
+        return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.chapter.manga.id);
     };
 
     const downloadChapter = (chapter: ChapterType) => {