Detect lessons in carousels and templates, fix lesson tracking

src/components/content/carousels/DocumentsCarousel.js

@@ -29,6 +29,7 @@ const responsiveOptions = [
 export default function DocumentsCarousel() {
     const [processedDocuments, setProcessedDocuments] = useState([]);
     const [paidLessons, setPaidLessons] = useState([]);
+    const [freeLessons, setFreeLessons] = useState([]);
     const { documents, documentsLoading, documentsError } = useDocuments()
     const windowWidth = useWindowWidth();
     const isMobileView = windowWidth <= 450;
@@ -40,6 +41,8 @@ export default function DocumentsCarousel() {
                 res.data.forEach(lesson => {
                     if (lesson?.resource?.price > 0) {
                         setPaidLessons(prev => [...prev, lesson?.resourceId]);
+                    } else {
+                        setFreeLessons(prev => [...prev, lesson?.resourceId]);
                     }
                 });
             }
@@ -91,7 +94,7 @@ export default function DocumentsCarousel() {
                 }}
                 itemTemplate={(item) => 
                         processedDocuments.length > 0 ? 
-                        <DocumentTemplate key={item.id} document={item} /> : 
+                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> : 
                         <TemplateSkeleton key={Math.random()} />
                 }
                 responsiveOptions={responsiveOptions} />

src/components/content/carousels/GenericCarousel.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import axios from 'axios';
 import { Carousel } from 'primereact/carousel';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate';
@@ -23,12 +24,21 @@ const responsiveOptions = [
 
 export default function GenericCarousel({items, selectedTopic, title}) {
     const [carousels, setCarousels] = useState([]);
+    const [lessons, setLessons] = useState([]);
 
     const memoizedItems = useMemo(() => items, [items]);
 
     useEffect(() => {
-        console.log("carousel update", carousels);
+        axios.get('/api/lessons').then(res => {
-    }, [carousels]);
+            if (res.data) {
+                res.data.forEach(lesson => {
+                    setLessons(prev => [...prev, lesson?.resourceId]);
+                });
+            }
+        }).catch(err => {
+            console.log('err', err);
+        });
+    }, []);
 
     const getItemsPerCarousel = useCallback(() => {
         const width = window.innerWidth;
@@ -65,9 +75,9 @@ export default function GenericCarousel({items, selectedTopic, title}) {
                     itemTemplate={(item) => {
                         if (carouselItems.length > 0) {
                             if (item.type === 'document') {
-                                return <DocumentTemplate key={item.id} document={item} />;
+                                return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
                             } else if (item.type === 'video') {
-                                return <VideoTemplate key={item.id} video={item} />;
+                                return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
                             } else if (item.type === 'course') {
                                 return <CourseTemplate key={item.id} course={item} />;
                             }

src/components/content/carousels/VideosCarousel.js

@@ -29,6 +29,7 @@ const responsiveOptions = [
 export default function VideosCarousel() {
     const [processedVideos, setProcessedVideos] = useState([]);
     const [paidLessons, setPaidLessons] = useState([]);
+    const [freeLessons, setFreeLessons] = useState([]);
     const { videos, videosLoading, videosError } = useVideos();
     const windowWidth = useWindowWidth();
     const isMobileView = windowWidth <= 450;
@@ -39,6 +40,8 @@ export default function VideosCarousel() {
                 res.data.forEach(lesson => {
                     if (lesson?.resource?.price > 0) {
                         setPaidLessons(prev => [...prev, lesson?.resourceId]);
+                    } else {
+                        setFreeLessons(prev => [...prev, lesson?.resourceId]);
                     }
                 });
             }
@@ -89,7 +92,7 @@ export default function VideosCarousel() {
                 itemTemplate={(item) => 
                     !processedVideos.length ? 
                     <TemplateSkeleton key={Math.random()} /> : 
-                    <VideoTemplate key={item.id} video={item} />
+                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
                 }
                 responsiveOptions={responsiveOptions}
             />

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

@@ -14,7 +14,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function DocumentTemplate({ document }) {
+export function DocumentTemplate({ document, isLesson }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -73,6 +73,7 @@ export function DocumentTemplate({ document }) {
             </div>
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2 max-w-[70%]">
+                    {isLesson && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                     {document?.topics?.map((topic, index) => (
                         <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
                             {topic}

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

@@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
-export function VideoTemplate({ video }) {
+export function VideoTemplate({ video, isLesson }) {
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
     const [nAddress, setNAddress] = useState(null);
     const [zapAmount, setZapAmount] = useState(0);
@@ -74,6 +74,7 @@ export function VideoTemplate({ video }) {
             </div>
             <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2 max-w-[70%]">
+                    {isLesson && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                     {video?.topics?.map((topic, index) => (
                         <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
                             {topic}

src/components/content/documents/DocumentDetails.js

@@ -13,7 +13,6 @@ import { getTotalFromZaps } from "@/utils/lightning";
 import { useSession } from "next-auth/react";
 import useWindowWidth from "@/hooks/useWindowWidth";
 import dynamic from "next/dynamic";
-import { auth } from "@getalby/sdk";
 
 const MDDisplay = dynamic(
     () => import("@uiw/react-markdown-preview"),
@@ -22,8 +21,9 @@ const MDDisplay = dynamic(
     }
 );
 
-const DocumentDetails = ({ processedEvent, topics, title, summary, image, price, author, paidResource, decryptedContent, nAddress, handlePaymentSuccess, handlePaymentError, authorView }) => {
+const DocumentDetails = ({ processedEvent, topics, title, summary, image, price, author, paidResource, decryptedContent, nAddress, handlePaymentSuccess, handlePaymentError, authorView, isLesson }) => {
     const [zapAmount, setZapAmount] = useState(0);
+    const [course, setCourse] = useState(null);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
@@ -39,6 +39,18 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
         }
     }, [zaps, processedEvent]);
 
+    useEffect(() => {
+        if (isLesson) {
+            axios.get(`/api/resources/${processedEvent.d}`).then(res => {
+                if (res.data && res.data.lessons[0]?.courseId) {
+                    setCourse(res.data.lessons[0]?.courseId);
+                }
+            }).catch(err => {
+                console.log('err', err);
+            });
+        }
+    }, [processedEvent.d, isLesson]);
+
     useEffect(() => {
         console.log("authorView", authorView);
     }, [authorView]);
@@ -132,9 +144,10 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
                     <div className="flex flex-row items-center justify-between w-full">
                         <h1 className='text-4xl font-bold text-white'>{title}</h1>
                         <div className="flex flex-wrap gap-2">
+                            {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
                             {topics && topics.length > 0 && (
                                 topics.map((topic, index) => (
-                                    <Tag className='text-white' key={index} value={topic}></Tag>
+                                    <Tag className='text-[#f8f8ff]' key={index} value={topic}></Tag>
                                 ))
                             )}
                         </div>
@@ -181,7 +194,8 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
                                 />
                             </div>
                         ) : (
-                            <div className="w-full flex flex-row justify-end">
+                            <div className="w-full flex flex-row justify-end gap-2">
+                                {course && <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`/course/${course}`, '_blank')} label="Open Course" tooltip="This is a lesson in a course" tooltipOptions={{ position: 'top' }} />}
                                 <GenericButton
                                     tooltip={isMobileView ? null : "View Nostr Note"}
                                     tooltipOptions={{ position: 'left' }}

src/components/content/videos/VideoDetails.js

@@ -21,8 +21,9 @@ const MDDisplay = dynamic(
     }
 );
 
-const VideoDetails = ({ processedEvent, topics, title, summary, image, price, author, paidResource, decryptedContent, nAddress, handlePaymentSuccess, handlePaymentError, authorView }) => {
+const VideoDetails = ({ processedEvent, topics, title, summary, image, price, author, paidResource, decryptedContent, nAddress, handlePaymentSuccess, handlePaymentError, authorView, isLesson }) => {
     const [zapAmount, setZapAmount] = useState(0);
+    const [course, setCourse] = useState(null);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
     const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
@@ -31,6 +32,18 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
     const windowWidth = useWindowWidth();
     const isMobileView = windowWidth <= 768;
 
+    useEffect(() => {
+        if (isLesson) {
+            axios.get(`/api/resources/${processedEvent.d}`).then(res => {
+                if (res.data && res.data.lessons[0]?.courseId) {
+                    setCourse(res.data.lessons[0]?.courseId);
+                }
+            }).catch(err => {
+                console.log('err', err);
+            });
+        }
+    }, [processedEvent.d, isLesson]);
+
     useEffect(() => {
         if (zaps.length > 0) {
             const total = getTotalFromZaps(zaps, processedEvent);
@@ -124,6 +137,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
                 <div className="w-full flex flex-col items-start justify-start mt-2 px-2">
                     <div className="flex flex-row items-center gap-2 w-full">
                         <h1 className='text-4xl'>{title}</h1>
+                        {isLesson && <Tag className="mt-2 text-white" value="lesson" />}
                         {topics && topics.length > 0 && (
                             topics.map((topic, index) => (
                                 <Tag className='mt-2 text-white' key={index} value={topic}></Tag>
@@ -165,11 +179,12 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
                             <div className='flex flex-row justify-center items-center space-x-2'>
                                 <GenericButton onClick={() => router.push(`/details/${nAddress}/edit`)} label="Edit" severity='warning' outlined />
                                 <GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
-                                <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={ isMobileView ? null : "View Nostr Event" } tooltipOptions={{ position: 'right' }} />
+                                <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={isMobileView ? null : "View Nostr Event"} tooltipOptions={{ position: 'right' }} />
                             </div>
                         ) : (
                             <div className='flex flex-row justify-center items-center space-x-2'>
-                                <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={ isMobileView ? null : "View Nostr Event" } tooltipOptions={{ position: paidResource ? 'left' : 'right' }} />
+                                {course && <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`/course/${course}`, '_blank')} label="Open Course" tooltip="This is a lesson in a course" tooltipOptions={{ position: 'top' }} />}
+                                <GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={isMobileView ? null : "View Nostr Event"} tooltipOptions={{ position: paidResource ? 'left' : 'right' }} />
                             </div>
                         )}
                     </div>

src/hooks/tracking/useTrackDocumentLesson.js

@@ -14,7 +14,6 @@ const useTrackDocumentLesson = ({ lessonId, courseId, readTime, paidCourse, decr
   useEffect(() => {
     if (session?.user?.role?.admin) {
       setIsAdmin(true);
-      setIsCompleted(true); // Automatically mark as completed for admins
     }
   }, [session]);
 

src/hooks/tracking/useTrackVideoLesson.js

@@ -14,7 +14,6 @@ const useTrackVideoLesson = ({lessonId, videoDuration, courseId, videoPlayed, pa
   useEffect(() => {
     if (session?.user?.role?.admin) {
       setIsAdmin(true);
-      setIsCompleted(true); // Automatically mark as completed for admins
     }
   }, [session]);
 

src/pages/content/index.js

@@ -12,7 +12,8 @@ import { useRouter } from 'next/router';
 
 const MenuTab = ({ items, selectedTopic, onTabChange }) => {
     const router = useRouter();
-    const allItems = ['All', ...items];
+    // spread the items except for 'document' 'video' and 'course'
+    const allItems = ['All', ...items.filter(item => item !== 'document' && item !== 'video' && item !== 'course')];
 
     const menuItems = allItems.map((item, index) => {
         let icon = 'pi pi-tag';

src/pages/details/[slug]/index.js

@@ -9,6 +9,7 @@ import { useDecryptContent } from "@/hooks/encryption/useDecryptContent";
 import { useToast } from "@/hooks/useToast";
 import { useRouter } from "next/router";
 import { ProgressSpinner } from 'primereact/progressspinner';
+import axios from 'axios';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import { appConfig } from "@/config/appConfig";
 
@@ -19,12 +20,25 @@ const Details = () => {
     const [decryptedContent, setDecryptedContent] = useState(null);
     const [authorView, setAuthorView] = useState(false);
     const [loading, setLoading] = useState(true);
+    const [lessons, setLessons] = useState([]);
     const { data: session } = useSession();
     const { ndk } = useNDKContext();
     const { decryptContent } = useDecryptContent();
     const router = useRouter();
     const { showToast } = useToast();
 
+    useEffect(() => {
+        axios.get('/api/lessons').then(res => {
+            if (res.data) {
+                res.data.forEach(lesson => {
+                    setLessons(prev => [...prev, lesson?.resourceId]);
+                });
+            }
+        }).catch(err => {
+            console.log('err', err);
+        });
+    }, []);
+
     const fetchAuthor = useCallback(async (pubkey) => {
         if (!pubkey) return;
         const author = await ndk.getUser({ pubkey });
@@ -140,6 +154,7 @@ const Details = () => {
                 price={event.price}
                 author={author}
                 paidResource={!!event.price}
+                isLesson={lessons.includes(event.d)}
                 nAddress={nAddress}
                 decryptedContent={decryptedContent}
                 handlePaymentSuccess={handlePaymentSuccess}