plebdevs/src/hooks/nostrQueries/zaps/useZapsSubscription.js

import { useState, useEffect } from 'react';
import { useNDKContext } from "@/context/NDKContext";

export function useZapsSubscription({event}) {
  const [zaps, setZaps] = useState([]);
  const [zapsLoading, setZapsLoading] = useState(true);
  const [zapsError, setZapsError] = useState(null);
  const ndk = useNDKContext();

  useEffect(() => {
    let subscription;
    let isFirstZap = true;
    const zapIds = new Set(); // To keep track of zap IDs we've already seen

    async function subscribeToZaps() {
      try {
        const filters = [
          { kinds: [9735], "#e": [event.id] },
          { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
        ];
        await ndk.connect();
        console.log("filters", filters);
        subscription = ndk.subscribe(filters);

        subscription.on('event', (zapEvent) => {
          console.log("event", zapEvent);
          
          // Check if we've already seen this zap
          if (!zapIds.has(zapEvent.id)) {
            zapIds.add(zapEvent.id);
            setZaps((prevZaps) => [...prevZaps, zapEvent]);

            if (isFirstZap) {
              setZapsLoading(false);
              isFirstZap = false;
            }
          }
        });

        subscription.on('eose', () => {
          console.log("eose");
          // Only set loading to false if no zaps have been received yet
          if (isFirstZap) {
            setZapsLoading(false);
          }
        });

        await subscription.start();
      } catch (error) {
        console.error("Error subscribing to zaps:", error);
        setZapsError(error.message);
        setZapsLoading(false);
      }
    }

    if (event && Object.keys(event).length > 0) {
      subscribeToZaps();
    }

    return () => {
      if (subscription) {
        subscription.stop();
      }
    };
  }, [event, ndk]);

  return { zaps, zapsLoading, zapsError };
}