Files
desktop/app/components/UpdateAlert/UpdateAlert.tsx

72 lines
3.0 KiB
TypeScript

import { Button, MantineRadius } from "@mantine/core";
import { IconRefresh } from "@tabler/icons-react";
import { AnimatedRoundedProgress } from "../AnimatedRoundedProgress/AnimatedRoundedProgress";
import { useUpdater } from "@/app/providers/UpdateProvider/useUpdater";
import { UpdateStatus } from "@/app/providers/UpdateProvider/UpdateProvider";
import { useEffect } from "react";
interface UpdateAlertProps {
radius?: MantineRadius;
}
/**
* Компонент для отображения кнопки обновлений если оно доступно, и прогресса загрузки если обновление уже скачивается
*/
export function UpdateAlert(props : UpdateAlertProps) {
const radius = props.radius || 0;
const {
kernelUpdateUrl,
downloadProgress,
updateStatus,
downloadLastApplicationUpdate,
restartAppForUpdateApply,
checkForUpdates
} = useUpdater();
useEffect(() => {
checkForUpdates();
}, []);
return (
<>
{updateStatus == UpdateStatus.KERNEL_UPDATE_NEED && <>
<Button h={45} leftSection={
<IconRefresh size={15}/>
} onClick={() => {
window.shell.openExternal(kernelUpdateUrl);
}} fullWidth variant={'gradient'} gradient={{ from: 'red', to: 'orange', deg: 233 }} radius={radius}>
Kernel update required
</Button>
</>}
{updateStatus == UpdateStatus.APP_UPDATE_AVAILABLE && <>
<Button h={45} onClick={downloadLastApplicationUpdate} leftSection={
<IconRefresh size={15}/>
} fullWidth variant={'gradient'} gradient={{ from: 'blue', to: 'green', deg: 233 }} radius={radius}>
New version available
</Button>
</>}
{updateStatus == UpdateStatus.DOWNLOADING && <>
<Button h={45} leftSection={
<AnimatedRoundedProgress value={downloadProgress} />
} fullWidth variant={'gradient'} gradient={{ from: 'blue', to: 'green', deg: 233 }} radius={radius}>
Downloading... {downloadProgress}%
</Button>
</>}
{updateStatus == UpdateStatus.COMPILE && <>
<Button h={45} leftSection={
<AnimatedRoundedProgress value={50} />
} onClick={restartAppForUpdateApply} fullWidth variant={'gradient'} gradient={{ from: 'teal', to: 'lime', deg: 233 }} radius={radius}>
Installing...
</Button>
</>}
{updateStatus == UpdateStatus.READY_FOR_RESTART && <>
<Button h={45} onClick={restartAppForUpdateApply} fullWidth variant={'gradient'} gradient={{ from: 'teal', to: 'lime', deg: 233 }} radius={radius}>
Restart to apply update
</Button>
</>}
</>
);
}