Use gql for "subscriptions"

src/components/library/UpdateChecker.tsx

@@ -6,16 +6,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
-import { IUpdateStatus } from '@/typings';
 import requestManager from '@/lib/requests/RequestManager.ts';
 import makeToast from '@/components/util/Toast';
+import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
 
 interface IProgressProps {
     progress: number;
@@ -32,62 +32,44 @@ function Progress({ progress }: IProgressProps) {
     );
 }
 
-interface IUpdateCheckerProps {
-    handleFinishedUpdate: (time: number) => void;
-}
+const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undefined) => {
+    if (!status) {
+        return 0;
+    }
 
-function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
+    const finishedUpdates = status.failedJobs.mangas.totalCount + status.completeJobs.mangas.totalCount;
+    const totalMangas = finishedUpdates + status.pendingJobs.mangas.totalCount + status.runningJobs.mangas.totalCount;
+
+    const progress = 100 * (finishedUpdates / totalMangas);
+
+    return Number.isNaN(progress) ? 0 : progress;
+};
+
+function UpdateChecker() {
     const { t } = useTranslation();
 
-    const [loading, setLoading] = useState(false);
-    const [progress, setProgress] = useState(0);
+    const { data: updaterData } = requestManager.useUpdaterSubscription();
+    const status = updaterData?.updateStatusChanged;
+
+    const loading = !!status?.isRunning;
+    const progress = useMemo(
+        () => calcProgress(status),
+        [
+            status?.failedJobs.mangas.totalCount,
+            status?.completeJobs.mangas.totalCount,
+            status?.pendingJobs.mangas.totalCount,
+            status?.runningJobs.mangas.totalCount,
+        ],
+    );
 
     const onClick = async () => {
         try {
-            setLoading(true);
-            setProgress(0);
             await requestManager.startGlobalUpdate().response;
         } catch (e) {
             makeToast(t('global.error.label.update_failed'), 'error');
-            setLoading(false);
         }
     };
 
-    useEffect(() => {
-        const wsc = requestManager.getUpdateWebSocket();
-
-        // "loading" can't be used since it will be outdated once the state gets changed
-        // it could be used by adding it as a dependency of "useEffect" but then the socket would
-        // get closed and connected again every time it changes
-        let updateStarted = false;
-
-        wsc.onmessage = (e) => {
-            const { running, mangaStatusMap } = JSON.parse(e.data) as IUpdateStatus;
-            const { COMPLETE = [], RUNNING = [], PENDING = [] } = mangaStatusMap;
-
-            const currentProgress = 100 * (COMPLETE.length / (COMPLETE.length + RUNNING.length + PENDING.length));
-
-            const isUpdateFinished = currentProgress === 100;
-            const ignoreFaultyMessage = !updateStarted && !running && isUpdateFinished;
-
-            // for some reason the server sends 100% completed manga updates when connecting to the
-            // socket while no update is running
-            if (ignoreFaultyMessage) {
-                return;
-            }
-
-            updateStarted = running;
-            setLoading(running);
-            setProgress(Number.isNaN(currentProgress) ? 0 : currentProgress);
-
-            if (isUpdateFinished) {
-                handleFinishedUpdate(Date.now());
-            }
-        };
-
-        return () => wsc.close();
-    }, []);
-
     return (
         <IconButton onClick={onClick} disabled={loading}>
             {loading ? <Progress progress={progress} /> : <RefreshIcon />}