33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
import { Button, Notification } from "@mantine/core";
|
||
|
|
import { useCallback } from "react";
|
||
|
|
import { useAppDispatch, useAppSelector } from "../store";
|
||
|
|
import { resetUpdate, selectUpdateAvailable } from "../store/pwa";
|
||
|
|
|
||
|
|
export function InstallUpdateNotification() {
|
||
|
|
const updateAvailable = useAppSelector(selectUpdateAvailable);
|
||
|
|
const dispatch = useAppDispatch();
|
||
|
|
|
||
|
|
const onClose = useCallback(() => dispatch(resetUpdate()), [dispatch]);
|
||
|
|
|
||
|
|
const onUpdate = useCallback(async () => {
|
||
|
|
dispatch(resetUpdate());
|
||
|
|
|
||
|
|
const registration = await navigator.serviceWorker.getRegistration();
|
||
|
|
if (registration && registration.waiting) {
|
||
|
|
registration.waiting.postMessage({ type: "SKIP_WAITING" });
|
||
|
|
}
|
||
|
|
|
||
|
|
window.location.reload();
|
||
|
|
}, [dispatch]);
|
||
|
|
|
||
|
|
return updateAvailable ? (
|
||
|
|
<Notification title="Update available!" onClose={onClose}>
|
||
|
|
Click{" "}
|
||
|
|
<Button compact onClick={onUpdate}>
|
||
|
|
Update now
|
||
|
|
</Button>{" "}
|
||
|
|
to get the latest version.
|
||
|
|
</Notification>
|
||
|
|
) : null;
|
||
|
|
}
|