mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-22 16:51:34 +00:00
improvements to course display page
This commit is contained in:
austinkelsay
parent
2cd5117582
commit
fa257743ee
170
src/components/CourseDetails.js
Normal file
170
src/components/CourseDetails.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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%" }}
|
||||
>
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
@ -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>
|
||||
<h2 className="text-lg text-center whitespace-pre-line">{course?.description}</h2>
|
||||
<>
|
||||
<CourseDetails processedEvent={course} />
|
||||
{
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user