35 lines
937 B
TypeScript
35 lines
937 B
TypeScript
|
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();
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!notificationData) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const timeout = setTimeout(() => setNotificationData(null), 5000);
|
||
|
|
return () => clearTimeout(timeout);
|
||
|
|
}, [notificationData]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export const notificationDataAtom = atom<NotificationPayload | null>(null);
|