improvements to course display page

src/components/CourseDetails.js

@@ -0,0 +1,170 @@
+"use client";
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useNostr } from '@/hooks/useNostr';
+import { parseEvent, findKind0Fields, hexToNpub } from '@/utils/nostr';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { Button } from 'primereact/button';
+import { Tag } from 'primereact/tag';
+import { nip19 } from 'nostr-tools';
+import { useLocalStorageWithEffect } from '@/hooks/useLocalStorage';
+import Image from 'next/image';
+import dynamic from 'next/dynamic';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
+import 'primeicons/primeicons.css';
+const MDDisplay = dynamic(
+    () => import("@uiw/react-markdown-preview"),
+    {
+        ssr: false,
+    }
+);
+
+const BitcoinConnectPayButton = dynamic(
+    () => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
+    {
+        ssr: false,
+    }
+);
+
+export default function CourseDetails({processedEvent}) {
+    const [author, setAuthor] = useState(null);
+    const [bitcoinConnect, setBitcoinConnect] = useState(false);
+    const [nAddress, setNAddress] = useState(null);
+    const [user] = useLocalStorageWithEffect('user', {});
+    console.log('user:', user);
+    const { returnImageProxy } = useImageProxy();
+    const { fetchSingleEvent, fetchKind0, zapEvent } = useNostr();
+
+    const router = useRouter();
+
+    const handleZapEvent = async () => {
+        if (!processedEvent) return;
+
+        const response = await zapEvent(processedEvent);
+
+        console.log('zap response:', response);
+    }
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const bitcoinConnectConfig = window.localStorage.getItem('bc:config');
+
+        if (bitcoinConnectConfig) {
+            setBitcoinConnect(true);
+        }
+    }, []);
+
+    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]);
+
+    useEffect(() => {
+        if (processedEvent?.d) {
+            const naddr = nip19.naddrEncode({
+                pubkey: processedEvent.pubkey,
+                kind: processedEvent.kind,
+                identifier: processedEvent.d,
+            });
+            console.log('naddr:', naddr);
+            setNAddress(naddr);
+        }
+    }, [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'>
+                <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-mob:pl-2' onClick={() => router.push('/')} />
+                <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
+                    <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
+                        <div className='pt-2 flex flex-row justify-start w-full'>
+                            {processedEvent && processedEvent.topics && processedEvent.topics.length > 0 && (
+                                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>
+                        <div className='flex flex-row w-full mt-6 items-center'>
+                            <Image
+                                alt="avatar thumbnail"
+                                src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+                                width={50}
+                                height={50}
+                                className="rounded-full mr-4"
+                            />
+                            <p className='text-lg'>
+                                Created by{' '}
+                                <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
+                                    {author?.username}
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
+                        {processedEvent && (
+                            <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
+                                <Image
+                                    alt="resource thumbnail"
+                                    src={returnImageProxy(processedEvent.image)}
+                                    width={344}
+                                    height={194}
+                                    className="w-[344px] h-[194px] object-cover object-top rounded-lg"
+                                />
+                                {bitcoinConnect ? (
+                                    <div>
+                                        <BitcoinConnectPayButton onClick={handleZapEvent} />
+                                    </div>
+                                ) : (
+                                    <div>
+                                        <Button
+                                            icon="pi pi-bolt"
+                                            label="Zap"
+                                            severity="success"
+                                            outlined
+                                            onClick={handleZapEvent}
+                                            pt={{
+                                                button: {
+                                                    icon: ({ context }) => ({
+                                                        className: 'bg-yellow-500'
+                                                    })
+                                                }
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            {typeof window !== 'undefined' && nAddress !== null && (
+                <div className='px-24'>
+                    <ZapThreadsWrapper
+                        anchor={nAddress}
+                        user={user?.pubkey || null}
+                        relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://nostr.mutinywallet.com/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
+                        disable=""
+                    />
+                </div>
+            )}
+            <div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
+                {
+                    processedEvent?.content && <MDDisplay source={processedEvent.content} />
+                }
+            </div>
+        </div>
+    );
+}

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

@@ -32,7 +32,7 @@ const CourseTemplate = (course) => {
             className="flex flex-col items-center mx-auto px-4 mt-8 rounded-md"
         >
             <div
-                onClick={() => router.push(`/details/${course.id}`)}
+                onClick={() => router.push(`/course/${course.id}`)}
                 className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer"
                 style={{ paddingBottom: "56.25%" }}
             >

src/hooks/useNostr.js

@@ -97,6 +97,32 @@ export function useNostr() {
         [subscribe]
     );
 
+    const fetchSingleNaddrEvent = useCallback(
+        async (id) => {
+            try {
+                const event = await new Promise((resolve, reject) => {
+                    subscribe(
+                        [{ "#d": [id] }],
+                        {
+                            onevent: (event) => {
+                                resolve(event);
+                            },
+                            onerror: (error) => {
+                                console.error('Failed to fetch event:', error);
+                                reject(error);
+                            },
+                        }
+                    );
+                });
+                return event;
+            } catch (error) {
+                console.error('Failed to fetch event:', error);
+                return null;
+            }
+        },
+        [subscribe]
+    );
+
     const querySyncQueue = useRef([]);
     const lastQuerySyncTime = useRef(0);
 
@@ -535,5 +561,5 @@ export function useNostr() {
         [publish]
     );
 
-    return { subscribe, publish, fetchSingleEvent, fetchZapsForEvent, fetchKind0, fetchResources, fetchWorkshops, fetchCourses, zapEvent, fetchZapsForEvents, publishResource, publishCourse };
+    return { subscribe, publish, fetchSingleEvent, fetchSingleNaddrEvent, fetchZapsForEvent, fetchKind0, fetchResources, fetchWorkshops, fetchCourses, zapEvent, fetchZapsForEvents, publishResource, publishCourse };
 }

src/pages/course/[slug].js

@@ -1,7 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useNostr } from "@/hooks/useNostr";
-import { parseCourseEvent } from "@/utils/nostr";
+import { parseCourseEvent, parseEvent, findKind0Fields } from "@/utils/nostr";
+import { useImageProxy } from "@/hooks/useImageProxy";
+import { Button } from "primereact/button";
+import { Tag } from "primereact/tag";
+import Image from "next/image";
+import CourseDetails from "@/components/CourseDetails";
+import { nip19 } from "nostr-tools";
 import dynamic from 'next/dynamic';
 const MDDisplay = dynamic(
     () => import("@uiw/react-markdown-preview"),
@@ -9,21 +15,63 @@ const MDDisplay = dynamic(
         ssr: false,
     }
 );
+const BitcoinConnectPayButton = dynamic(
+    () => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
+    {
+        ssr: false,
+    }
+);
 
 const Course = () => {
     const [course, setCourse] = useState(null);
+    const [lessonIds, setLessonIds] = useState([]);
+    const [lessons, setLessons] = useState([]);
+    const [bitcoinConnect, setBitcoinConnect] = useState(false);
 
     const router = useRouter();
-    const { fetchSingleEvent } = useNostr();
+    const { fetchSingleEvent, fetchSingleNaddrEvent, fetchKind0 } = useNostr();
+    const { returnImageProxy } = useImageProxy();
 
     const { slug } = router.query;
 
+    const fetchAuthor = async (pubkey) => {
+        const author = await fetchKind0(pubkey);
+        const fields = await findKind0Fields(author);
+        if (fields) {
+            return fields;
+        }
+    }
+
+    const handleZapEvent = async () => {
+        if (!event) return;
+
+        const response = await zapEvent(event);
+
+        console.log('zap response:', response);
+    }
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const bitcoinConnectConfig = window.localStorage.getItem('bc:config');
+
+        if (bitcoinConnectConfig) {
+            setBitcoinConnect(true);
+        }
+    }, []);
+
     useEffect(() => {
         const getCourse = async () => {
             if (slug) {
                 const fetchedCourse = await fetchSingleEvent(slug);
                 const formattedCourse = parseCourseEvent(fetchedCourse);
+                const aTags = formattedCourse.tags.filter(tag => tag[0] === 'a');
                 setCourse(formattedCourse);
+                if (aTags.length > 0) {
+                    const lessonIds = aTags.map(tag => tag[1]);
+                    setLessonIds(lessonIds);
+                    console.log("LESSON IDS", lessonIds);
+                }
             }
         };
 
@@ -32,16 +80,119 @@ const Course = () => {
         }
     }, [slug]);
 
+    useEffect(() => {
+        if (lessonIds.length > 0) {
+
+            const fetchLesson = async (lessonId) => {
+                try {
+                    const l = await fetchSingleNaddrEvent(lessonId.split(':')[2]);
+                    const author = await fetchAuthor(l.pubkey);
+                    const parsedLesson = parseEvent(l);
+                    const lessonObj = {
+                        ...parsedLesson,
+                        author
+                    }
+                    setLessons(prev => [...prev, lessonObj]);
+                } catch (error) {
+                    console.error('Error fetching lesson:', error);
+                }
+            }
+
+            lessonIds.forEach(lessonId => fetchLesson(lessonId));
+        }
+    }, [lessonIds]);
+
+    useEffect(() => {
+        console.log("AHHHHH", lessons);
+    }, [lessons])
+
     return (
-        <div className="flex flex-col justify-center mx-12">
+        <>
-            <h1 className="my-6 text-3xl text-center font-bold">{course?.name}</h1>
+            <CourseDetails processedEvent={course} />
-            <h2 className="text-lg text-center whitespace-pre-line">{course?.description}</h2>
+            {
+
+                lessons.length > 0 && lessons.map((lesson, index) => (
+                    <div key={index} 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'>
+                            <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
+                                <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
+                                    <div className='pt-2 flex flex-row justify-start w-full'>
+                                        {lesson && lesson.topics && lesson.topics.length > 0 && (
+                                            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>
+                                    <div className='flex flex-row w-full mt-6 items-center'>
+                                        <Image
+                                            alt="avatar thumbnail"
+                                            src={returnImageProxy(lesson.author?.avatar)}
+                                            width={50}
+                                            height={50}
+                                            className="rounded-full mr-4"
+                                        />
+                                        <p className='text-lg'>
+                                            Created by{' '}
+                                            <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
+                                                {lesson.author?.username}
+                                            </a>
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
+                                    {lesson && (
+                                        <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
+                                            <Image
+                                                alt="resource thumbnail"
+                                                src={returnImageProxy(lesson.image)}
+                                                width={344}
+                                                height={194}
+                                                className="w-[344px] h-[194px] object-cover object-top rounded-lg"
+                                            />
+                                            {bitcoinConnect ? (
+                                                <div>
+                                                    <BitcoinConnectPayButton onClick={handleZapEvent} />
+                                                </div>
+                                            ) : (
+                                                <div>
+                                                    <Button
+                                                        icon="pi pi-bolt"
+                                                        label="Zap"
+                                                        severity="success"
+                                                        outlined
+                                                        onClick={handleZapEvent}
+                                                        pt={{
+                                                            button: {
+                                                                icon: ({ context }) => ({
+                                                                    className: 'bg-yellow-500'
+                                                                })
+                                                            }
+                                                        }}
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        <div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
+                            {
+                                lesson?.content && <MDDisplay source={lesson.content} />
+                            }
+                        </div>
+                    </div>
+                ))
+            }
             <div className="mx-auto my-6">
                 {
                     course?.content && <MDDisplay source={course.content} />
                 }
             </div>
-        </div>
+        </>
     );
 }
 

src/pages/details/[slug].js

@@ -123,7 +123,7 @@ export default function Details() {
                         <p className='text-xl mt-6'>{processedEvent?.summary}</p>
                         <div className='flex flex-row w-full mt-6 items-center'>
                             <Image
-                                alt="resource thumbnail"
+                                alt="avatar image"
                                 src={returnImageProxy(author?.avatar)}
                                 width={50}
                                 height={50}
@@ -145,7 +145,7 @@ export default function Details() {
                                     src={returnImageProxy(processedEvent.image)}
                                     width={344}
                                     height={194}
-                                    className="object-cover object-center rounded-lg"
+                                    className="w-[344px] h-[194px] object-cover object-top rounded-lg"
                                 />
                                 {bitcoinConnect ? (
                                     <div>

src/utils/nostr.js

@@ -52,6 +52,12 @@ export const parseEvent = (event) => {
             case 'summary':
                 eventData.summary = tag[1];
                 break;
+            case 'description':
+                eventData.summary = tag[1];
+                break;
+            case 'name':
+                eventData.title = tag[1];
+                break;
             case 'image':
                 eventData.image = tag[1];
                 break;
@@ -61,6 +67,13 @@ export const parseEvent = (event) => {
             case 'author':
                 eventData.author = tag[1];
                 break;
+            // How do we get topics / tags?
+            case 'l':
+                // Grab index 1 and any subsequent elements in the array
+                tag.slice(1).forEach(topic => {
+                    eventData.topics.push(topic);
+                });
+                break;
             case 'd':
                 eventData.d = tag[1];
                 break;