umami/components/common/UpdateNotice.js

59 lines
1.7 KiB
JavaScript
Raw Normal View History

2022-06-24 10:54:55 +02:00
import { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
2022-08-29 05:20:54 +02:00
import { setItem } from 'next-basics';
2022-06-24 10:54:55 +02:00
import ButtonLayout from 'components/layout/ButtonLayout';
import useStore, { checkVersion } from 'store/version';
2022-07-16 08:53:31 +02:00
import { REPO_URL, VERSION_CHECK } from 'lib/constants';
import { Button } from 'react-basics';
2022-06-24 10:54:55 +02:00
import styles from './UpdateNotice.module.css';
export default function UpdateNotice() {
2022-07-16 08:53:31 +02:00
const { latest, checked, hasUpdate, releaseUrl } = useStore();
2022-06-24 10:54:55 +02:00
const [dismissed, setDismissed] = useState(false);
const updateCheck = useCallback(() => {
setItem(VERSION_CHECK, { version: latest, time: Date.now() });
}, [latest]);
2020-09-30 06:22:08 +02:00
function handleViewClick() {
updateCheck();
2022-06-24 10:54:55 +02:00
setDismissed(true);
2022-09-21 15:19:18 +02:00
open(releaseUrl || REPO_URL, '_blank');
}
2020-09-30 06:22:08 +02:00
function handleDismissClick() {
updateCheck();
2022-06-24 10:54:55 +02:00
setDismissed(true);
2020-09-30 06:22:08 +02:00
}
2022-06-24 10:54:55 +02:00
useEffect(() => {
2022-08-09 23:58:27 +02:00
if (!checked) {
2022-06-24 10:54:55 +02:00
checkVersion();
}
}, [checked]);
2022-06-24 10:54:55 +02:00
2022-08-09 23:58:27 +02:00
if (!hasUpdate || dismissed) {
return null;
}
return (
<div className={styles.notice}>
<div className={styles.message}>
<FormattedMessage
id="message.new-version-available"
defaultMessage="A new version of umami {version} is available!"
values={{ version: `v${latest}` }}
/>
</div>
2022-03-03 23:23:57 +01:00
<ButtonLayout className={styles.buttons}>
2020-09-30 06:22:08 +02:00
<Button size="xsmall" variant="action" onClick={handleViewClick}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Button>
2020-09-30 06:22:08 +02:00
<Button size="xsmall" onClick={handleDismissClick}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.dismiss" defaultMessage="Dismiss" />
</Button>
</ButtonLayout>
</div>
);
}