Extract version update info dialog into component

src/components/util/ServerUpdateChecker.tsx

@@ -6,20 +6,11 @@
  * 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 { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { getVersion } from '@/screens/settings/About.tsx';
 import { useUpdateChecker } from '@/util/useUpdateChecker.tsx';
+import { VersionUpdateInfoDialog } from '@/components/util/VersionUpdateInfoDialog.tsx';
 
 export const ServerUpdateChecker = () => {
     const { t } = useTranslation();
@@ -34,18 +25,12 @@ export const ServerUpdateChecker = () => {
     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);
-    };
-
     const updateChecker = useUpdateChecker('server', checkForUpdate, selectedServerChannelInfo?.tag);
 
     if (isCheckingForServerUpdate) {
@@ -70,48 +55,14 @@ export const ServerUpdateChecker = () => {
     }
 
     return (
-        <Dialog open={open} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
+        <VersionUpdateInfoDialog
-            <DialogTitle id="alert-dialog-title">{t('global.update.label.available')}</DialogTitle>
+            info={t('global.update.label.info', {
-            <DialogContent>
-                <DialogContentText id="alert-dialog-description">
-                    {t('global.update.label.info', {
                 channel: selectedServerChannelInfo.channel,
                 version: selectedServerChannelInfo.tag,
             })}
-                </DialogContentText>
+            actionTitle={t('chapter.action.download.add.label.action')}
-            </DialogContent>
+            actionUrl={selectedServerChannelInfo.url}
-            <DialogActions>
+            updateCheckerProps={['server', checkForUpdate, selectedServerChannelInfo?.tag]}
-                <PopupState variant="popover" popupId="server-update-checker-close-menu">
+        />
-                    {(popupState) => (
-                        <>
-                            <Button {...bindTrigger(popupState)}>{t('global.label.close')}</Button>
-                            <Menu {...bindMenu(popupState)}>
-                                <MenuItem
-                                    onClick={() => {
-                                        updateChecker.remindLater();
-                                        popupState.close();
-                                        handleClose();
-                                    }}
-                                >
-                                    {t('global.button.remind_later')}
-                                </MenuItem>
-                                <MenuItem
-                                    onClick={() => {
-                                        updateChecker.ignoreUpdate();
-                                        popupState.close();
-                                        handleClose();
-                                    }}
-                                >
-                                    {t('global.button.ignore')}
-                                </MenuItem>
-                            </Menu>
-                        </>
-                    )}
-                </PopupState>
-                <Button onClick={handleClose} variant="contained" href={selectedServerChannelInfo.url} target="_blank">
-                    {t('chapter.action.download.add.label.action')}
-                </Button>
-            </DialogActions>
-        </Dialog>
     );
 };

src/components/util/VersionUpdateInfoDialog.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useTranslation } from 'react-i18next';
+import Stack from '@mui/material/Stack';
+import { useUpdateChecker } from '@/util/useUpdateChecker.tsx';
+
+interface BaseProps {
+    info: string;
+    actionTitle: string;
+    updateCheckerProps: Parameters<typeof useUpdateChecker>;
+    changelogUrl?: string;
+}
+
+interface UrlActionProps extends BaseProps {
+    actionUrl: string;
+}
+
+interface ActionProps extends BaseProps {
+    onAction: () => void;
+}
+
+type VersionUpdateInfoDialogProps =
+    | (UrlActionProps & PropertiesNever<Pick<ActionProps, 'onAction'>>)
+    | (PropertiesNever<Pick<UrlActionProps, 'actionUrl'>> & ActionProps);
+
+export const VersionUpdateInfoDialog = ({
+    info,
+    actionUrl,
+    onAction,
+    actionTitle,
+    updateCheckerProps,
+    changelogUrl,
+}: VersionUpdateInfoDialogProps) => {
+    const { t } = useTranslation();
+
+    const updateChecker = useUpdateChecker(...updateCheckerProps);
+
+    if (!updateChecker.handleUpdate) {
+        return null;
+    }
+
+    return (
+        <Dialog open>
+            <DialogTitle>{t('global.update.label.available')}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>{info}</DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Stack sx={{ width: '100%' }} direction="row" justifyContent={changelogUrl ? 'space-between' : 'end'}>
+                    {changelogUrl && (
+                        <Button href={changelogUrl} target="_blank">
+                            {t('global.button.changelog')}
+                        </Button>
+                    )}
+                    <Stack direction="row">
+                        <PopupState variant="popover" popupId="update-checker-close-menu">
+                            {(popupState) => (
+                                <>
+                                    <Button {...bindTrigger(popupState)}>{t('global.label.close')}</Button>
+                                    <Menu {...bindMenu(popupState)}>
+                                        <MenuItem
+                                            onClick={() => {
+                                                updateChecker.remindLater();
+                                                popupState.close();
+                                            }}
+                                        >
+                                            {t('global.button.remind_later')}
+                                        </MenuItem>
+                                        <MenuItem
+                                            onClick={() => {
+                                                updateChecker.ignoreUpdate();
+                                                popupState.close();
+                                            }}
+                                        >
+                                            {t('global.button.ignore')}
+                                        </MenuItem>
+                                    </Menu>
+                                </>
+                            )}
+                        </PopupState>
+                        {actionUrl ? (
+                            <Button variant="contained" href={actionUrl} target="_blank">
+                                {actionTitle}
+                            </Button>
+                        ) : (
+                            <Button onClick={onAction} variant="contained">
+                                {actionTitle}
+                            </Button>
+                        )}
+                    </Stack>
+                </Stack>
+            </DialogActions>
+        </Dialog>
+    );
+};

src/components/util/WebUIUpdateChecker.tsx

@@ -14,17 +14,14 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { UpdateState, WebUiChannel, WebUiUpdateStatus } from '@/lib/graphql/generated/graphql.ts';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { ABOUT_WEBUI, WEBUI_UPDATE_CHECK } from '@/lib/graphql/Fragments.ts';
-import { useUpdateChecker } from '@/util/useUpdateChecker.tsx';
+import { VersionUpdateInfoDialog } from '@/components/util/VersionUpdateInfoDialog.tsx';
+import { useUpdateChecker } from '@/util/useUpdateChecker';
 
 const disabledUpdateCheck = () => Promise.resolve();
 
@@ -118,68 +115,27 @@ export const WebUIUpdateChecker = () => {
         const isUpdateInProgress = webUIUpdateState === UpdateState.Downloading;
 
         return (
-            <Dialog open>
+            <VersionUpdateInfoDialog
-                <DialogTitle>{t('global.update.label.available')}</DialogTitle>
+                info={t('settings.about.webui.label.info', {
-                <DialogContent>
+                    version: webUIUpdateData?.checkForWebUIUpdate.tag,
-                    <DialogContentText>
+                    channel: webUIUpdateData?.checkForWebUIUpdate.channel,
-                        {t('settings.about.webui.label.info', {
-                            version: webUIUpdateData.checkForWebUIUpdate.tag,
-                            channel: webUIUpdateData.checkForWebUIUpdate.channel,
                 })}
-                    </DialogContentText>
+                onAction={() =>
-                </DialogContent>
-                <DialogActions>
-                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
-                        <Button href={changelogUrl} target="_blank">
-                            {t('global.button.changelog')}
-                        </Button>
-                        <Stack direction="row">
-                            <PopupState variant="popover" popupId="webui-update-checker-close-menu">
-                                {(popupState) => (
-                                    <>
-                                        <Button {...bindTrigger(popupState)}>{t('global.label.close')}</Button>
-                                        <Menu {...bindMenu(popupState)}>
-                                            <MenuItem
-                                                onClick={() => {
-                                                    updateChecker.remindLater();
-                                                    popupState.close();
-                                                    setOpen(false);
-                                                }}
-                                            >
-                                                {t('global.button.remind_later')}
-                                            </MenuItem>
-                                            <MenuItem
-                                                onClick={() => {
-                                                    updateChecker.ignoreUpdate();
-                                                    popupState.close();
-                                                    setOpen(false);
-                                                }}
-                                            >
-                                                {t('global.button.ignore')}
-                                            </MenuItem>
-                                        </Menu>
-                                    </>
-                                )}
-                            </PopupState>
-                            <Button
-                                disabled={isUpdateInProgress}
-                                onClick={() => {
                     requestManager
                         .updateWebUI()
-                                        .response.catch(() =>
+                        .response.catch(() => makeToast(t('settings.about.webui.label.update_failure'), 'error'))
-                                            makeToast(t('settings.about.webui.label.update_failure'), 'error'),
+                }
-                                        );
+                actionTitle={
-                                }}
+                    isUpdateInProgress
-                                variant="contained"
-                            >
-                                {isUpdateInProgress
                         ? t('global.update.label.updating', { progress: updateStatus.progress })
-                                    : t('extension.action.label.update')}
+                        : t('extension.action.label.update')
-                            </Button>
+                }
-                        </Stack>
+                updateCheckerProps={[
-                    </Stack>
+                    'webUI',
-                </DialogActions>
+                    isAutoUpdateEnabled ? disabledUpdateCheck : checkForUpdate,
-            </Dialog>
+                    webUIUpdateData?.checkForWebUIUpdate.tag,
+                ]}
+            />
         );
     }