Maintenance notices that come and go on time

import { useNotifications } from "@notificationstream/react";
import { useEffect, useState } from "react";

// Across the top of every page, for as long as a notice is live
export function MaintenanceBanner() {
  const { items } = useNotifications();
  const now = useNow(30_000);
  const notice = items.find(
    (n) => n.data?.display === "banner" && (n.expiresAt === null || n.expiresAt > now),
  );
  if (!notice) return null;
  return <Banner title={notice.title} body={notice.body} endsAt={notice.expiresAt} />;
}

// Re-renders on a timer, so the banner leaves right at expiresAt
function useNow(interval: number) {
  const [now, setNow] = useState(Date.now);
  useEffect(() => {
    const timer = setInterval(() => setNow(Date.now()), interval);
    return () => clearInterval(timer);
  }, [interval]);
  return now;
}

import { NotificationStream } from "@notificationstream/node";

const ns = new NotificationStream({ secretKey: process.env.NOTIFICATIONSTREAM_SECRET_KEY });

// An incident is opened: a banner for the customers in the affected region
export async function onIncidentOpened(incident) {
  const notice = await ns.notifications.create(
    {
      audience: { type: "tags", tags: [`region:${incident.region}`], match: "any" },
      category: "maintenance",
      contents: { en: { title: incident.title, body: incident.summary } },
      data: { display: "banner", incidentId: incident.id },
    },
    { idempotencyKey: `incident:${incident.id}:${incident.updatedAt}` },
  );
  await db.incidents.update(incident.id, { noticeId: notice.id });
}

// An update is posted: swap the banner for one with the new text
export async function onIncidentUpdated(incident) {
  await ns.notifications.cancel(incident.noticeId);
  await onIncidentOpened(incident);
}

// Resolved: take the banner back from every screen
export async function onIncidentResolved(incident) {
  await ns.notifications.cancel(incident.noticeId);
}