myeasycms-v2/packages/features/notifications/src/hooks/use-notifications-stream.ts

import { useEffect } from 'react';

import { useQuery } from '@tanstack/react-query';

import { useSupabase } from '@kit/supabase/hooks/use-supabase';

type Notification = {
  id: number;
  body: string;
  dismissed: boolean;
  type: 'info' | 'warning' | 'error';
  created_at: string;
  link: string | null;
};

export function useNotificationsStream(params: {
  onNotifications: (notifications: Notification[]) => void;
  accountIds: string[];
  enabled: boolean;
}) {
  const client = useSupabase();

  const { data: subscription } = useQuery({
    enabled: params.enabled,
    queryKey: ['realtime-notifications', ...params.accountIds],
    queryFn: () => {
      const channel = client.channel('notifications-channel');

      return channel
        .on(
          'postgres_changes',
          {
            event: 'INSERT',
            schema: 'public',
            filter: `account_id=in.(${params.accountIds.join(', ')})`,
            table: 'notifications',
          },
          (payload) => {
            params.onNotifications([payload.new as Notification]);
          },
        )
        .subscribe();
    },
  });

  useEffect(() => {
    return () => {
      void subscription?.unsubscribe();
    };
  }, [subscription]);
}