Broadcast Channels

broadcast-channels.ts

import { z } from 'zod';

import { Voter } from '@scc-voting/db/schemas/voter';

export const QRCodePrompted = z.object({
  action: z.literal('QRCodePrompted'),
  voter: Voter,
});

export const QRCodeDismissed = z.object({
  action: z.literal('QRCodeDismissed'),
});

export type QRCodePrompted = z.infer<typeof QRCodePrompted>;
export type QRCodeDismissed = z.infer<typeof QRCodeDismissed>;

export const connect = () => new BroadcastChannel('qr-events');

export const sendQRCodePrompted = (channel: BroadcastChannel, voter: Voter) => {
  channel.postMessage({
    action: 'QRCodePrompted',
    voter,
  });
};

export const sendQRCodeDismissed = (channel: BroadcastChannel) => {
  channel.postMessage({
    action: 'QRCodeDismissed',
  });
};

Kiosk.tsx

const Kiosk = () => {
  const [voter, setVoter] = useState<Voter | null>(null);

  useEffect(() => {
    const channel = connect();

    channel.onmessage = (event) => {
      const qrCodePrompted = QRCodePrompted.safeParse(event.data);
      const qrCodeDismissed = QRCodeDismissed.safeParse(event.data);

      if (qrCodePrompted.success) {
        setVoter(qrCodePrompted.data.voter);
      }

      if (qrCodeDismissed.success) {
        setVoter(null);
      }
    };

    return () => {
      channel.close();
    };
  }, []);
    
   return null
}