saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Detect lessons in carousels and templates, fix lesson tracking

Browse Source
This commit is contained in:
austinkelsay 2024-10-14 17:57:47 -05:00
parent fdd141379e
commit 86912b0b57
11 changed files with 79 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/content/carousels/DocumentsCarousel.js
View File

@ -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} />

18
src/components/content/carousels/GenericCarousel.js
View File

@ -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);
}, [carousels]);
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 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} />;
}

5
src/components/content/carousels/VideosCarousel.js
View File

@ -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}
/>

3
src/components/content/carousels/templates/DocumentTemplate.js
View File

@ -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}

3
src/components/content/carousels/templates/VideoTemplate.js
View File

@ -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}

22
src/components/content/documents/DocumentDetails.js
View File

@ -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' }}

21
src/components/content/videos/VideoDetails.js
View File

@ -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>

1
src/hooks/tracking/useTrackDocumentLesson.js
View File

@ -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]);

1
src/hooks/tracking/useTrackVideoLesson.js
View File

@ -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]);

3
src/pages/content/index.js
View File

@ -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';

15
src/pages/details/[slug]/index.js
View File

@ -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}