revite/src/components/common/UpdateIndicator.tsx

import { Download } from "@styled-icons/boxicons-regular";

import { useContext, useEffect, useState } from "preact/hooks";

import { internalSubscribe } from "../../lib/eventEmitter";

import { ThemeContext } from "../../context/Theme";

import IconButton from "../ui/IconButton";

import { updateSW } from "../../main";

var pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true));

export default function UpdateIndicator() {
	const [pending, setPending] = useState(pendingUpdate);

	useEffect(() => {
		return internalSubscribe("PWA", "update", () => setPending(true));
	});

	if (!pending) return null;
	const theme = useContext(ThemeContext);

	return (
		<IconButton onClick={() => updateSW(true)}>
			<Download size={22} color={theme.success} />
		</IconButton>
	);
}