Automatically check for server updates (#489)

src/App.tsx

@@ -35,6 +35,7 @@ import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
 import { DownloadSettings } from '@/screens/settings/DownloadSettings.tsx';
 import { ServerSettings } from '@/screens/settings/ServerSettings.tsx';
 import { WebUISettings } from '@/screens/settings/WebUISettings.tsx';
+import { ServerUpdateChecker } from '@/components/settings/ServerUpdateChecker.tsx';
 
 if (__DEV__) {
     // Adds messages only in a dev environment
@@ -43,6 +44,7 @@ if (__DEV__) {
 }
 export const App: React.FC = () => (
     <AppContext>
+        <ServerUpdateChecker />
         <CssBaseline />
         <DefaultNavBar />
         <Container

src/components/settings/ServerUpdateChecker.tsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import DialogContentText from '@mui/material/DialogContentText';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { getVersion } from '@/screens/settings/About.tsx';
+import { useLocalStorage } from '@/util/useLocalStorage.tsx';
+
+const UPDATE_CHECK_INTERVAL = 1000 * 60 * 60 * 24; // 1 day
+
+export const ServerUpdateChecker = () => {
+    const { t } = useTranslation();
+
+    const [lastUpdateCheck, setLastUpdateCheck] = useLocalStorage('lastAutomatedServerUpdateCheck', Date.now());
+
+    const {
+        data: serverUpdateCheckData,
+        loading: isCheckingForServerUpdate,
+        error: serverUpdateCheckError,
+        refetch: checkForUpdate,
+    } = requestManager.useCheckForServerUpdate({ notifyOnNetworkStatusChange: true, fetchPolicy: 'cache-only' });
+
+    const { data } = requestManager.useGetAbout();
+    const { aboutServer } = data ?? {};
+
+    const [open, setOpen] = useState(true);
+
+    const selectedServerChannelInfo = serverUpdateCheckData?.checkForServerUpdates?.find(
+        (channel) => channel.channel === aboutServer?.buildType,
+    );
+    const version = aboutServer ? getVersion(aboutServer) : undefined;
+    const isServerUpdateAvailable = !!selectedServerChannelInfo?.tag && selectedServerChannelInfo.tag !== version;
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        const remainingTimeTillNextUpdateCheck = Date.now() - lastUpdateCheck;
+
+        let timeout: NodeJS.Timeout | undefined;
+        const scheduleUpdateCheck = (timeoutMS: number) => {
+            timeout = setTimeout(() => {
+                checkForUpdate().catch(() => {});
+                setLastUpdateCheck(Date.now());
+                scheduleUpdateCheck(UPDATE_CHECK_INTERVAL);
+            }, timeoutMS);
+        };
+
+        scheduleUpdateCheck(remainingTimeTillNextUpdateCheck);
+
+        return () => clearTimeout(timeout);
+    }, []);
+
+    if (isCheckingForServerUpdate) {
+        return null;
+    }
+
+    if (serverUpdateCheckError) {
+        return null;
+    }
+
+    if (!isServerUpdateAvailable) {
+        return null;
+    }
+
+    const isAboutPage = window.location.pathname === '/settings/about';
+    if (isAboutPage) {
+        return null;
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">{t('global.update.label.available')}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {t('global.update.label.info', {
+                        channel: selectedServerChannelInfo.channel,
+                        version: selectedServerChannelInfo.tag,
+                    })}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>{t('global.label.close')}</Button>
+                <Button onClick={handleClose} variant="contained" href={selectedServerChannelInfo.url} target="_blank">
+                    {t('chapter.action.download.add.label.action')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

src/i18n/locale/en.json

@@ -307,6 +307,7 @@
     "label": {
       "browse": "Browse",
       "client": "Client",
+      "close": "Close",
       "disabled": "Disabled",
       "discord": "Discord",
       "display": "Display",
@@ -345,6 +346,7 @@
         "available": "Update available",
         "check_failure": "Could not check for update",
         "checking": "Checking for update",
+        "info": "Server version {{version}} ({{channel}}) available for download",
         "up_to_date": "This is the latest version",
         "update_failure": "Update failed",
         "updating": "{{progress}}% | Updating…"

src/screens/settings/About.tsx

@@ -28,7 +28,7 @@ import { makeToast } from '@/components/util/Toast.tsx';
 
 type AboutServer = GetAboutQuery['aboutServer'];
 
-const getVersion = (aboutServer: AboutServer) => {
+export const getVersion = (aboutServer: AboutServer) => {
     if (aboutServer.buildType === 'Stable') return `${aboutServer.version}`;
     return `${aboutServer.version}-${aboutServer.revision}`;
 };