shellphone.app/app/features/core/hooks/use-notifications.ts

35 lines
937 B
TypeScript
Raw Normal View History

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);