Fixed zaps, keeping open subscription

src/components/content/carousels/templates/CourseTemplate.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
@@ -11,7 +11,7 @@ const CourseTemplate = ({ course }) => {
     const [zapAmount, setZapAmount] = useState(0);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
-    const { zaps, zapsLoading, zapsError, refetchZaps } = useCoursesZapsQuery({ event: course })
+    const { zaps, zapsLoading, zapsError } = useCoursesZapsQuery({ event: course });
 
     useEffect(() => {
         if (!zaps || zapsLoading || zapsError) return;
@@ -63,8 +63,7 @@ const CourseTemplate = ({ course }) => {
                             formatTimestampToHowLongAgo(course.published_at)
                         ) : (
                             formatTimestampToHowLongAgo(course.created_at)
-                        )
-                        }
+                        )}
                     </p>
                     <ZapDisplay zapAmount={zapAmount} event={course} />
                 </div>
@@ -73,4 +72,4 @@ const CourseTemplate = ({ course }) => {
     );
 };
 
-export default CourseTemplate;
+export default CourseTemplate;

src/components/content/carousels/templates/ResourceTemplate.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
@@ -9,7 +9,7 @@ import ZapDisplay from "@/components/zaps/ZapDisplay";
 
 const ResourceTemplate = ({ resource }) => {
   const [zapAmount, setZapAmount] = useState(0);
-  const { zaps, zapsLoading, zapsError, refetchZaps } = useResourceZapsQuery({ event: resource })
+  const { zaps, zapsLoading, zapsError } = useResourceZapsQuery({ event: resource });
 
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
@@ -33,7 +33,7 @@ const ResourceTemplate = ({ resource }) => {
   }, [resource, zaps, zapsLoading, zapsError]);
 
   if (zapsLoading) return <div>Loading...</div>;
-    if (zapsError) return <div>Error: {zapsError}</div>;
+  if (zapsError) return <div>Error: {zapsError}</div>;
 
   return (
     <div
@@ -70,4 +70,4 @@ const ResourceTemplate = ({ resource }) => {
   );
 };
 
-export default ResourceTemplate;
+export default ResourceTemplate;

src/components/content/carousels/templates/WorkshopTemplate.js

@@ -1,17 +1,17 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { useWorkshopsZapsQuery } from "@/hooks/nostrQueries/useWorkshopsZapsQuery"
+import { useWorkshopsZapsQuery } from "@/hooks/nostrQueries/useWorkshopsZapsQuery";
 import { getSatAmountFromInvoice } from "@/utils/lightning";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 
-const WorkshopTemplate = ({workshop}) => {
+const WorkshopTemplate = ({ workshop }) => {
     const [zapAmount, setZapAmount] = useState(0);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
-    const { zaps, zapsLoading, zapsError, refetchZaps } = useWorkshopsZapsQuery({event: workshop});
+    const { zaps, zapsLoading, zapsError } = useWorkshopsZapsQuery({ event: workshop });
 
     useEffect(() => {
         if (!zaps || zapsLoading || zapsError) return;
@@ -22,9 +22,9 @@ const WorkshopTemplate = ({workshop}) => {
             if (zap.tags.find(tag => tag[0] === "e" && tag[1] === workshop.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${workshop.kind}:${workshop.id}:${workshop.d}`)) {
                 const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
                 const invoice = bolt11Tag ? bolt11Tag[1] : null;
-            if (invoice) {
-                const amount = getSatAmountFromInvoice(invoice);
-                total += amount;
+                if (invoice) {
+                    const amount = getSatAmountFromInvoice(invoice);
+                    total += amount;
                 }
             }
         });
@@ -35,9 +35,7 @@ const WorkshopTemplate = ({workshop}) => {
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
-        <div
-            className="flex flex-col items-center mx-auto px-4 mt-8 rounded-md"
-        >
+        <div className="flex flex-col items-center mx-auto px-4 mt-8 rounded-md">
             <div
                 onClick={() => router.push(`/details/${workshop.id}`)}
                 className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer"
@@ -68,4 +66,4 @@ const WorkshopTemplate = ({workshop}) => {
     );
 };
 
-export default WorkshopTemplate;
+export default WorkshopTemplate;

src/hooks/nostrQueries/useCoursesZapsQuery.js

@@ -1,51 +1,62 @@
 import { useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { useNDKContext } from '@/context/NDKContext';
 
 export function useCoursesZapsQuery({ event }) {
     const [isClient, setIsClient] = useState(false);
+    const [zaps, setZaps] = useState([]);
+    const [zapsLoading, setZapsLoading] = useState(true);
+    const [zapsError, setZapsError] = useState(null);
     const ndk = useNDKContext();
 
     useEffect(() => {
         setIsClient(true);
     }, []);
 
-    const fetchZapsFromNDK = async (event) => {
-        if (!ndk) {
-            console.error('NDK instance is null');
-            return [];
-        }
+    useEffect(() => {
+        if (!isClient || !ndk || !event) return;
 
-        if (!event) {
-            console.error('No event provided');
-            return [];
-        }
+        let subscription = null;
+        let isSubscribed = true;
 
-        try {
-            await ndk.connect();
-            let zaps = [];
+        const fetchZapsFromNDK = async () => {
+            try {
+                await ndk.connect();
+                const uniqueEvents = new Set();
 
-            const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
+                const filters = [
+                    { kinds: [9735], "#e": [event.id] },
+                    { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
+                ];
 
-            for (const filter of filters) {
-                const zapEvents = await ndk.fetchEvents(filter);
-                zapEvents.forEach(zap => zaps.push(zap));
+                subscription = ndk.subscribe(filters);
+
+                subscription.on('event', (zap) => {
+                    if (isSubscribed) {
+                        uniqueEvents.add(zap);
+                        setZaps(Array.from(uniqueEvents));
+                    }
+                });
+
+                subscription.on('eose', () => {
+                    setZaps(Array.from(uniqueEvents));
+                    setZapsLoading(false);
+                });
+
+            } catch (error) {
+                setZapsError('Error fetching zaps from NDK: ' + error);
+                setZapsLoading(false);
             }
+        };
 
-            return zaps;
-        } catch (error) {
-            console.error('Error fetching zaps from NDK:', error);
-            return [];
-        }
-    };
+        fetchZapsFromNDK();
 
-    const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
-        queryKey: ['coursesZaps', isClient, event],
-        queryFn: () => fetchZapsFromNDK(event),
-        staleTime: 1000 * 60 * 3, // 3 minutes
-        cacheTime: 1000 * 60 * 60, // 1 hour
-        enabled: isClient,
-    });
+        return () => {
+            isSubscribed = false;
+            if (subscription) {
+                subscription.stop();
+            }
+        };
+    }, [isClient, ndk, event]);
 
-    return { zaps, zapsLoading, zapsError, refetchZaps }
+    return { zaps, zapsLoading, zapsError };
 }

src/hooks/nostrQueries/useResourceZapsQuery.js

@@ -1,51 +1,62 @@
 import { useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { useNDKContext } from '@/context/NDKContext';
 
 export function useResourceZapsQuery({ event }) {
     const [isClient, setIsClient] = useState(false);
+    const [zaps, setZaps] = useState([]);
+    const [zapsLoading, setZapsLoading] = useState(true);
+    const [zapsError, setZapsError] = useState(null);
     const ndk = useNDKContext();
 
     useEffect(() => {
         setIsClient(true);
     }, []);
 
-    const fetchZapsFromNDK = async (event) => {
-        if (!ndk) {
-            console.error('NDK instance is null');
-            return [];
-        }
+    useEffect(() => {
+        if (!isClient || !ndk || !event) return;
 
-        if (!event) {
-            console.error('No event provided');
-            return [];
-        }
+        let subscription = null;
+        let isSubscribed = true;
 
-        try {
-            await ndk.connect();
-            let zaps = [];
+        const fetchZapsFromNDK = async () => {
+            try {
+                await ndk.connect();
+                const uniqueEvents = new Set();
 
-            const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
+                const filters = [
+                    { kinds: [9735], "#e": [event.id] },
+                    { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
+                ];
 
-            for (const filter of filters) {
-                const zapEvents = await ndk.fetchEvents(filter);
-                zapEvents.forEach(zap => zaps.push(zap));
+                subscription = ndk.subscribe(filters);
+
+                subscription.on('event', (zap) => {
+                    if (isSubscribed) {
+                        uniqueEvents.add(zap);
+                        setZaps(Array.from(uniqueEvents));
+                    }
+                });
+
+                subscription.on('eose', () => {
+                    setZaps(Array.from(uniqueEvents));
+                    setZapsLoading(false);
+                });
+
+            } catch (error) {
+                setZapsError('Error fetching zaps from NDK: ' + error);
+                setZapsLoading(false);
             }
+        };
 
-            return zaps;
-        } catch (error) {
-            console.error('Error fetching zaps from NDK:', error);
-            return [];
-        }
-    };
+        fetchZapsFromNDK();
 
-    const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
-        queryKey: ['resourceZaps', isClient, event],
-        queryFn: () => fetchZapsFromNDK(event),
-        staleTime: 1000 * 60 * 3, // 3 minutes
-        cacheTime: 1000 * 60 * 60, // 1 hour
-        enabled: isClient,
-    });
+        return () => {
+            isSubscribed = false;
+            if (subscription) {
+                subscription.stop();
+            }
+        };
+    }, [isClient, ndk, event]);
 
-    return { zaps, zapsLoading, zapsError, refetchZaps }
+    return { zaps, zapsLoading, zapsError };
 }

src/hooks/nostrQueries/useWorkshopsZapsQuery.js

@@ -1,51 +1,62 @@
 import { useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
 import { useNDKContext } from '@/context/NDKContext';
 
 export function useWorkshopsZapsQuery({ event }) {
     const [isClient, setIsClient] = useState(false);
+    const [zaps, setZaps] = useState([]);
+    const [zapsLoading, setZapsLoading] = useState(true);
+    const [zapsError, setZapsError] = useState(null);
     const ndk = useNDKContext();
 
     useEffect(() => {
         setIsClient(true);
     }, []);
 
-    const fetchZapsFromNDK = async (event) => {
-        if (!ndk) {
-            console.error('NDK instance is null');
-            return [];
-        }
+    useEffect(() => {
+        if (!isClient || !ndk || !event) return;
 
-        if (!event) {
-            console.error('No event provided');
-            return [];
-        }
+        let subscription = null;
+        let isSubscribed = true;
 
-        try {
-            await ndk.connect();
-            let zaps = [];
+        const fetchZapsFromNDK = async () => {
+            try {
+                await ndk.connect();
+                const uniqueEvents = new Set();
 
-            const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
+                const filters = [
+                    { kinds: [9735], "#e": [event.id] },
+                    { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
+                ];
 
-            for (const filter of filters) {
-                const zapEvents = await ndk.fetchEvents(filter);
-                zapEvents.forEach(zap => zaps.push(zap));
+                subscription = ndk.subscribe(filters);
+
+                subscription.on('event', (zap) => {
+                    if (isSubscribed) {
+                        uniqueEvents.add(zap);
+                        setZaps(Array.from(uniqueEvents));
+                    }
+                });
+
+                subscription.on('eose', () => {
+                    setZaps(Array.from(uniqueEvents));
+                    setZapsLoading(false);
+                });
+
+            } catch (error) {
+                setZapsError('Error fetching zaps from NDK: ' + error);
+                setZapsLoading(false);
             }
+        };
 
-            return zaps;
-        } catch (error) {
-            console.error('Error fetching zaps from NDK:', error);
-            return [];
-        }
-    };
+        fetchZapsFromNDK();
 
-    const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
-        queryKey: ['workshopsZaps', isClient, event],
-        queryFn: () => fetchZapsFromNDK(event),
-        staleTime: 1000 * 60 * 3, // 3 minutes
-        cacheTime: 1000 * 60 * 60, // 1 hour
-        enabled: isClient,
-    });
+        return () => {
+            isSubscribed = false;
+            if (subscription) {
+                subscription.stop();
+            }
+        };
+    }, [isClient, ndk, event]);
 
-    return { zaps, zapsLoading, zapsError, refetchZaps }
+    return { zaps, zapsLoading, zapsError };
 }