Fixing up course display, course details and lesson details under courses

src/components/course/CourseDetails.js

@@ -1,8 +1,5 @@
-"use client";
+import React, { useEffect, useState, useCallback } from 'react';
-import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { useNostr } from '@/hooks/useNostr';
-import { findKind0Fields } from '@/utils/nostr';
 import { useImageProxy } from '@/hooks/useImageProxy';
 import ZapDisplay from '@/components/zaps/ZapDisplay';
 import { getSatAmountFromInvoice } from '@/utils/lightning';
@@ -12,7 +9,11 @@ import { useLocalStorageWithEffect } from '@/hooks/useLocalStorage';
 import Image from 'next/image';
 import dynamic from 'next/dynamic';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
+import { useNDKContext } from "@/context/NDKContext";
+import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
+import { findKind0Fields } from '@/utils/nostr';
 import 'primeicons/primeicons.css';
+
 const MDDisplay = dynamic(
     () => import("@uiw/react-markdown-preview"),
     {
@@ -27,25 +28,36 @@ const BitcoinConnectPayButton = dynamic(
     }
 );
 
-export default function CourseDetails({processedEvent}) {
+export default function CourseDetails({ processedEvent }) {
     const [author, setAuthor] = useState(null);
     const [bitcoinConnect, setBitcoinConnect] = useState(false);
     const [nAddress, setNAddress] = useState(null);    
-    const [user] = useLocalStorageWithEffect('user', {});
-    const [zaps, setZaps] = useState([]);
     const [zapAmount, setZapAmount] = useState(0);
-    const { returnImageProxy } = useImageProxy();
-    const { fetchKind0, zapEvent, fetchZapsForEvent } = useNostr();
 
+    const [user] = useLocalStorageWithEffect('user', {});
+    const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
+    const { returnImageProxy } = useImageProxy();
     const router = useRouter();
+    const ndk = useNDKContext();
 
     const handleZapEvent = async () => {
         if (!processedEvent) return;
 
+        // Update zap event logic if necessary for NDK
         const response = await zapEvent(processedEvent);
 
         console.log('zap response:', response);
+    };
+
+    const fetchAuthor = useCallback(async (pubkey) => {
+        const author = await ndk.getUser({ pubkey });
+        const profile = await author.fetchProfile();
+        const fields = await findKind0Fields(profile);
+        console.log('fields:', fields);
+        if (fields) {
+            setAuthor(fields);
         }
+    }, [ndk]);
 
     useEffect(() => {
         if (typeof window === 'undefined') return;
@@ -58,18 +70,10 @@ export default function CourseDetails({processedEvent}) {
     }, []);
 
     useEffect(() => {
-        const fetchAuthor = async (pubkey) => {
-            const author = await fetchKind0(pubkey);
-            const fields = await findKind0Fields(author);
-            console.log('fields:', fields);
-            if (fields) {
-                setAuthor(fields);
-            }
-        }
         if (processedEvent) {
             fetchAuthor(processedEvent.pubkey);
         }
-    }, [fetchKind0, processedEvent]);
+    }, [fetchAuthor, processedEvent]);
 
     useEffect(() => {
         if (processedEvent?.d) {
@@ -97,16 +101,6 @@ export default function CourseDetails({processedEvent}) {
         setZapAmount(total);
     }, [zaps]);
 
-    useEffect(() => {
-        const fetchZaps = async () => {
-            if (processedEvent) {
-                const zaps = await fetchZapsForEvent(processedEvent);
-                setZaps(zaps);
-            }
-        }
-        fetchZaps();
-    }, [fetchZapsForEvent, processedEvent]);
-
     return (
         <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
             <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
@@ -118,8 +112,7 @@ export default function CourseDetails({processedEvent}) {
                                 processedEvent.topics.map((topic, index) => (
                                     <Tag className='mr-2 text-white' key={index} value={topic}></Tag>
                                 ))
-                            )
+                            )}
-                            }
                         </div>
                         <h1 className='text-4xl mt-6'>{processedEvent?.title}</h1>
                         <p className='text-xl mt-6'>{processedEvent?.summary}</p>
@@ -134,7 +127,7 @@ export default function CourseDetails({processedEvent}) {
                             <p className='text-lg'>
                                 Created by{' '}
                                 <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
-                                    {author?.username}
+                                    {author?.username || author?.name || author?.pubkey}
                                 </a>
                             </p>
                         </div>
@@ -155,7 +148,7 @@ export default function CourseDetails({processedEvent}) {
                                     </div>
                                 ) : (
                                     <div className='w-full flex justify-end'>
-                                        <ZapDisplay zapAmount={zapAmount} event={processedEvent} />
+                                        <ZapDisplay zapAmount={zapAmount} event={processedEvent} zapsLoading={zapsLoading} />
                                     </div>
                                 )}
                             </div>

src/components/course/CourseLesson.js

@@ -2,12 +2,10 @@ import React, { useEffect, useState } from "react";
 import { Tag } from "primereact/tag";
 import Image from "next/image";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { useNostr } from "@/hooks/useNostr";
 import { getSatAmountFromInvoice } from "@/utils/lightning";
-import { parseEvent } from "@/utils/nostr";
-import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 import dynamic from "next/dynamic";
+import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
 
 const BitcoinConnectPayButton = dynamic(
     () => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
@@ -25,10 +23,9 @@ const MDDisplay = dynamic(
 
 const CourseLesson = ({ lesson, course }) => {
     const [bitcoinConnect, setBitcoinConnect] = useState(false);
-    const [zaps, setZaps] = useState([]);
     const [zapAmount, setZapAmount] = useState(0);
 
-    const { fetchZapsForEvent } = useNostr();
+    const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: "lesson" });
     const { returnImageProxy } = useImageProxy();
 
     useEffect(() => {
@@ -46,29 +43,22 @@ const CourseLesson = ({ lesson, course }) => {
     }
 
     useEffect(() => {
-        if (!zaps || zaps.length === 0) return;
+        if (!zaps || zapsLoading || zapsError) return;
 
         let total = 0;
         zaps.forEach((zap) => {
+            if (zap.tags.find(tag => tag[0] === "e" && tag[1] === lesson.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${lesson.kind}:${lesson.id}:${lesson.d}`)) {
                 const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
                 const invoice = bolt11Tag ? bolt11Tag[1] : null;
                 if (invoice) {
                     const amount = getSatAmountFromInvoice(invoice);
                     total += amount;
                 }
+            }
         });
         setZapAmount(total);
-    }, [zaps]);
+    }, [zaps, zapsLoading, zapsError]);
 
-    useEffect(() => {
-        const fetchZaps = async () => {
-            if (lesson) {
-                const zaps = await fetchZapsForEvent(lesson);
-                setZaps(zaps);
-            }
-        }
-        fetchZaps();
-    }, [fetchZapsForEvent, lesson]);
     return (
         <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
             <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
@@ -79,8 +69,7 @@ const CourseLesson = ({ lesson, course }) => {
                                 lesson.topics.map((topic, index) => (
                                     <Tag className='mr-2 text-white' key={index} value={topic}></Tag>
                                 ))
-                            )
+                            )}
-                            }
                         </div>
                         <h1 className='text-4xl mt-6'>{lesson?.title}</h1>
                         <p className='text-xl mt-6'>{lesson?.summary}</p>
@@ -95,7 +84,7 @@ const CourseLesson = ({ lesson, course }) => {
                             <p className='text-lg'>
                                 Created by{' '}
                                 <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
-                                    {lesson.author?.username}
+                                    {lesson.author?.username || lesson.author?.name || lesson.author?.pubkey}
                                 </a>
                             </p>
                         </div>
@@ -116,7 +105,7 @@ const CourseLesson = ({ lesson, course }) => {
                                     </div>
                                 ) : (
                                     <div className="w-full flex justify-end">
-                                        <ZapDisplay zapAmount={zapAmount} event={parseEvent(course)} />
+                                        <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
                                     </div>
                                 )}
                             </div>

src/hooks/nostrQueries/zaps/useZapsQuery.js

@@ -20,9 +20,6 @@ export function useZapsQuery({ event, type }) {
             ];
 
             const events = await ndk.fetchEvents(filters, { closeOnEose: true });
-            if (event.id === "f679183f0e66878142186cf7d0ae44ab137dabed1dfcb28a609472afbb7c8d51") {
-                console.log('events', events);
-            }
             return events;
         } catch (error) {
             console.error('Error fetching zaps from NDK:', error);

src/pages/course/[slug].js

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { useRouter } from "next/router";
-import { useNostr } from "@/hooks/useNostr";
 import { parseCourseEvent, parseEvent, findKind0Fields } from "@/utils/nostr";
 import CourseDetails from "@/components/course/CourseDetails";
 import CourseLesson from "@/components/course/CourseLesson";
 import dynamic from 'next/dynamic';
+import { useNDKContext } from "@/context/NDKContext";
+
 const MDDisplay = dynamic(
     () => import("@uiw/react-markdown-preview"),
     {
@@ -18,58 +19,81 @@ const Course = () => {
     const [lessons, setLessons] = useState([]);
 
     const router = useRouter();
-    const { fetchSingleEvent, fetchSingleNaddrEvent, fetchKind0 } = useNostr();
+    const ndk = useNDKContext();
 
-    const { slug } = router.query;
+    const fetchAuthor = useCallback(async (pubkey) => {
-
+        const author = await ndk.getUser({ pubkey });
-    const fetchAuthor = async (pubkey) => {
+        const profile = await author.fetchProfile();
-        const author = await fetchKind0(pubkey);
+        const fields = await findKind0Fields(profile);
-        const fields = await findKind0Fields(author);
         if (fields) {
             return fields;
         }
-    }
+    }, [ndk]);
 
     useEffect(() => {
-        const getCourse = async () => {
+        if (router.isReady) {
-            if (slug) {
+            const { slug } = router.query;
-                const fetchedCourse = await fetchSingleEvent(slug);
+
-                const formattedCourse = parseCourseEvent(fetchedCourse);
+            const fetchCourse = async (slug) => {
-                const aTags = formattedCourse.tags.filter(tag => tag[0] === 'a');
+                try {
-                setCourse(formattedCourse);
+                    await ndk.connect();
-                if (aTags.length > 0) {
+
-                    const lessonIds = aTags.map(tag => tag[1]);
+                    const filter = {
-                    setLessonIds(lessonIds);
+                        ids: [slug]
                     }
+
+                    const event = await ndk.fetchEvent(filter);
+
+                    if (event) {
+                        const author = await fetchAuthor(event.pubkey);
+                        const aTags = event.tags.filter(tag => tag[0] === 'a');
+                        const lessonIds = aTags.map(tag => tag[1].split(':')[2]);
+                        setLessonIds(lessonIds);
+                        const parsedCourse = {
+                            ...parseCourseEvent(event),
+                            author
+                        };
+                        setCourse(parsedCourse);
+                    }
+                } catch (error) {
+                    console.error('Error fetching event:', error);
                 }
             };
-
+            if (ndk) {
-        if (slug && !course) {
+                fetchCourse(slug);
-            getCourse();
             }
-    }, [slug]);
+        }
+    }, [router.isReady, router.query, ndk, fetchAuthor]);
 
     useEffect(() => {
         if (lessonIds.length > 0) {
 
             const fetchLesson = async (lessonId) => {
                 try {
-                    const l = await fetchSingleNaddrEvent(lessonId.split(':')[2]);
+                    await ndk.connect();
-                    const author = await fetchAuthor(l.pubkey);
+
-                    const parsedLesson = parseEvent(l);
+                    const filter = {
-                    const lessonObj = {
+                        "#d": [lessonId]
-                        ...parsedLesson,
+                    }
+
+                    const event = await ndk.fetchEvent(filter);
+
+                    if (event) {
+                        const author = await fetchAuthor(event.pubkey);
+                        const parsedLesson = {
+                            ...parseEvent(event),
                             author
+                        };
+                        setLessons(prev => [...prev, parsedLesson]);
                     }
-                    setLessons(prev => [...prev, lessonObj]);
                 } catch (error) {
-                    console.error('Error fetching lesson:', error);
+                    console.error('Error fetching event:', error);
-                }
                 }
+            };
 
             lessonIds.forEach(lessonId => fetchLesson(lessonId));
         }
-    }, [lessonIds]);
+    }, [lessonIds, ndk, fetchAuthor]);
 
     return (
         <>

src/pages/details/[slug].js

@@ -38,7 +38,6 @@ export default function Details() {
     const [zapAmount, setZapAmount] = useState(null);
     const [paidResource, setPaidResource] = useState(false);
     const [decryptedContent, setDecryptedContent] = useState(null);
-    // const [user, setUser] = useState(null);
 
     const ndk = useNDKContext();
     const [user] = useLocalStorageWithEffect('user', {});
@@ -78,7 +77,7 @@ export default function Details() {
         }
     }
         decryptContent();
-    }, [user, paidResource]);
+    }, [user, paidResource, processedEvent]);
 
     useEffect(() => {
         if (router.isReady) {