Skip to content

Commit

Permalink
Extract version update info dialog into component
Browse files Browse the repository at this point in the history
  • Loading branch information
@schroda
schroda committed May 3, 2024
1 parent 61b43b8 commit bbafe89
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 126 deletions.
69 changes: 10 additions & 59 deletions src/components/util/ServerUpdateChecker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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) {
Expand All @@ -70,48 +55,14 @@ export const ServerUpdateChecker = () => {
}

return (
<Dialog open={open} 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>
<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>
<VersionUpdateInfoDialog
info={t('global.update.label.info', {
channel: selectedServerChannelInfo.channel,
version: selectedServerChannelInfo.tag,
})}
actionTitle={t('chapter.action.download.add.label.action')}
actionUrl={selectedServerChannelInfo.url}
updateCheckerProps={['server', checkForUpdate, selectedServerChannelInfo?.tag]}
/>
);
};
110 changes: 110 additions & 0 deletions src/components/util/VersionUpdateInfoDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
90 changes: 23 additions & 67 deletions src/components/util/WebUIUpdateChecker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -118,68 +115,27 @@ export const WebUIUpdateChecker = () => {
const isUpdateInProgress = webUIUpdateState === UpdateState.Downloading;

return (
<Dialog open>
<DialogTitle>{t('global.update.label.available')}</DialogTitle>
<DialogContent>
<DialogContentText>
{t('settings.about.webui.label.info', {
version: webUIUpdateData.checkForWebUIUpdate.tag,
channel: webUIUpdateData.checkForWebUIUpdate.channel,
})}
</DialogContentText>
</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(() =>
makeToast(t('settings.about.webui.label.update_failure'), 'error'),
);
}}
variant="contained"
>
{isUpdateInProgress
? t('global.update.label.updating', { progress: updateStatus.progress })
: t('extension.action.label.update')}
</Button>
</Stack>
</Stack>
</DialogActions>
</Dialog>
<VersionUpdateInfoDialog
info={t('settings.about.webui.label.info', {
version: webUIUpdateData?.checkForWebUIUpdate.tag,
channel: webUIUpdateData?.checkForWebUIUpdate.channel,
})}
onAction={() =>
requestManager
.updateWebUI()
.response.catch(() => makeToast(t('settings.about.webui.label.update_failure'), 'error'))
}
actionTitle={
isUpdateInProgress
? t('global.update.label.updating', { progress: updateStatus.progress })
: t('extension.action.label.update')
}
updateCheckerProps={[
'webUI',
isAutoUpdateEnabled ? disabledUpdateCheck : checkForUpdate,
webUIUpdateData?.checkForWebUIUpdate.tag,
]}
/>
);
}

Expand Down

0 comments on commit bbafe89

Please sign in to comment.