import { useEffect } from "react"; import { atom, useAtom } from "jotai"; import type { NotificationPayload } from "~/utils/web-push.server"; export default function useNotifications() { const [notificationData, setNotificationData] = useAtom(notificationDataAtom); useEffect(() => { const channel = new BroadcastChannel("notifications"); async function eventHandler(event: MessageEvent) { const payload: NotificationPayload = JSON.parse(event.data); setNotificationData(payload); } channel.addEventListener("message", eventHandler); return () => { channel.removeEventListener("message", eventHandler); channel.close(); }; }, [setNotificationData]); useEffect(() => { if (!notificationData) { return; } const timeout = setTimeout(() => setNotificationData(null), 5000); return () => clearTimeout(timeout); }, [notificationData, setNotificationData]); } export const notificationDataAtom = atom(null);