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

linted before rebase

Browse Source
This commit is contained in:
kiwihodl 2025-04-17 13:00:58 -05:00 committed by austinkelsay
parent 07e94fbb40
commit ad218d8803
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
11 changed files with 384 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -6,4 +6,4 @@
"printWidth": 100, "printWidth": 100,
"bracketSpacing": true, "bracketSpacing": true,
"arrowParens": "avoid" "arrowParens": "avoid"
} }

49
src/components/ZapThreadsWrapper.js
View File

@ -1,13 +1,6 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from 'react';
const ZapThreadsWrapper = ({ const ZapThreadsWrapper = ({ anchor, user, relays, disable, className, isAuthorized }) => {
anchor,
user,
relays,
disable,
className,
isAuthorized,
}) => {
// Create a ref to store the reference to the <div> element // Create a ref to store the reference to the <div> element
const zapRef = useRef(null); const zapRef = useRef(null);
@ -18,37 +11,37 @@ const ZapThreadsWrapper = ({
} }
// Create a new <script> element // Create a new <script> element
const script = document.createElement("script"); const script = document.createElement('script');
// Set the source URL of the script to load the ZapThreads library // Set the source URL of the script to load the ZapThreads library
script.src = "https://unpkg.com/zapthreads/dist/zapthreads.iife.js"; script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
// Set the script to load asynchronously // Set the script to load asynchronously
script.async = true; script.async = true;
// Function to handle the script load event // Function to handle the script load event
const handleScriptLoad = () => { const handleScriptLoad = () => {
// Create a new <zap-threads> element // Create a new <zap-threads> element
const zapElement = document.createElement("zap-threads"); const zapElement = document.createElement('zap-threads');
zapElement.setAttribute("anchor", anchor); zapElement.setAttribute('anchor', anchor);
// Only set user if it exists and is not null // Only set user if it exists and is not null
if (user) { if (user) {
zapElement.setAttribute("user", user); zapElement.setAttribute('user', user);
} }
// Clean up relay URLs // Clean up relay URLs
const cleanRelays = relays const cleanRelays = relays
.split(",") .split(',')
.map((relay) => relay.trim()) .map(relay => relay.trim())
.filter((relay) => relay) .filter(relay => relay)
.join(","); .join(',');
zapElement.setAttribute("relays", cleanRelays); zapElement.setAttribute('relays', cleanRelays);
// Always set disable attribute, even if empty // Always set disable attribute, even if empty
zapElement.setAttribute("disable", disable || ""); zapElement.setAttribute('disable', disable || '');
// Add error handling // Add error handling
zapElement.addEventListener("error", (e) => { zapElement.addEventListener('error', e => {
console.error("ZapThreads error:", e); console.error('ZapThreads error:', e);
}); });
// Remove any existing <zap-threads> element // Remove any existing <zap-threads> element
@ -65,9 +58,9 @@ const ZapThreadsWrapper = ({
}; };
// Attach the handleScriptLoad function to the script's load event // Attach the handleScriptLoad function to the script's load event
script.addEventListener("load", handleScriptLoad); script.addEventListener('load', handleScriptLoad);
script.addEventListener("error", (e) => { script.addEventListener('error', e => {
console.error("Failed to load ZapThreads script:", e); console.error('Failed to load ZapThreads script:', e);
}); });
// Append the <script> element to the <body> of the document // Append the <script> element to the <body> of the document
@ -83,7 +76,7 @@ const ZapThreadsWrapper = ({
// Remove the <script> element from the <body> of the document // Remove the <script> element from the <body> of the document
document.body.removeChild(script); document.body.removeChild(script);
// Remove the load event listener from the script // Remove the load event listener from the script
script.removeEventListener("load", handleScriptLoad); script.removeEventListener('load', handleScriptLoad);
}; };
}, [anchor, user, relays, disable, isAuthorized]); }, [anchor, user, relays, disable, isAuthorized]);
@ -92,9 +85,7 @@ const ZapThreadsWrapper = ({
} }
// Render a <div> element and attach the zapRef to it // Render a <div> element and attach the zapRef to it
return ( return <div className={`overflow-x-hidden ${className || ''}`} ref={zapRef} />;
<div className={`overflow-x-hidden ${className || ""}`} ref={zapRef} />
);
}; };
export default ZapThreadsWrapper; export default ZapThreadsWrapper;

36
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -9,6 +9,7 @@ import {
} from '@/components/ui/card'; } from '@/components/ui/card';
import { Tag } from 'primereact/tag'; import { Tag } from 'primereact/tag';
import ZapDisplay from '@/components/zaps/ZapDisplay'; import ZapDisplay from '@/components/zaps/ZapDisplay';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import { nip19 } from 'nostr-tools'; import { nip19 } from 'nostr-tools';
import Image from 'next/image'; import Image from 'next/image';
import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription'; import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
@ -22,7 +23,7 @@ import useWindowWidth from '@/hooks/useWindowWidth';
import GenericButton from '@/components/buttons/GenericButton'; import GenericButton from '@/components/buttons/GenericButton';
import appConfig from '@/config/appConfig'; import appConfig from '@/config/appConfig';
import { BookOpen } from 'lucide-react'; import { BookOpen } from 'lucide-react';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper'; import { useSession } from 'next-auth/react';
export function CourseTemplate({ course, showMetaTags = true }) { export function CourseTemplate({ course, showMetaTags = true }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ const { zaps, zapsLoading, zapsError } = useZapsSubscription({
@ -74,6 +75,15 @@ export function CourseTemplate({ course, showMetaTags = true }) {
} }
}, [course]); }, [course]);
useEffect(() => {
if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
const shouldShowMetaTags = topic => { const shouldShowMetaTags = topic => {
if (!showMetaTags) { if (!showMetaTags) {
return !['lesson', 'document', 'video', 'course'].includes(topic); return !['lesson', 'document', 'video', 'course'].includes(topic);
@ -112,9 +122,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
</div> </div>
<CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700"> <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]"> <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
{course.name}
</CardTitle>
</div> </div>
<div className="text-[#f8f8ff]"> <div className="text-[#f8f8ff]">
<ZapDisplay <ZapDisplay
@ -125,7 +133,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
</div> </div>
</CardHeader> </CardHeader>
<CardContent <CardContent
className={`${isMobile ? 'px-3' : ''} pt-4 pb-2 w-full flex flex-row justify-between items-center`} className={`${
isMobile ? 'px-3' : ''
} pt-4 pb-2 w-full flex flex-row justify-between items-center`}
> >
<div className="flex flex-wrap gap-2 max-w-[65%]"> <div className="flex flex-wrap gap-2 max-w-[65%]">
{course && {course &&
@ -156,7 +166,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
)} )}
</CardContent> </CardContent>
<CardDescription <CardDescription
className={`${isMobile ? 'w-full p-3' : 'p-6'} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`} className={`${
isMobile ? 'w-full p-3' : 'p-6'
} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
display: '-webkit-box', display: '-webkit-box',
@ -173,7 +185,9 @@ export function CourseTemplate({ course, showMetaTags = true }) {
</p> </p>
</CardDescription> </CardDescription>
<CardFooter <CardFooter
className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? 'px-3' : ''}`} className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${
isMobile ? 'px-3' : ''
}`}
> >
<p className="text-sm text-gray-300"> <p className="text-sm text-gray-300">
{course?.published_at && course.published_at !== '' {course?.published_at && course.published_at !== ''
@ -194,22 +208,20 @@ export function CourseTemplate({ course, showMetaTags = true }) {
(!course?.price || (!course?.price ||
course.price === 0 || course.price === 0 ||
session?.user?.role?.subscribed || session?.user?.role?.subscribed ||
session?.user?.purchased?.some( session?.user?.purchased?.some(purchase => purchase.resourceId === course.d)) && (
(purchase) => purchase.resourceId === course.d
)) && (
<div className="px-4 pb-4"> <div className="px-4 pb-4">
{nsec || npub ? ( {nsec || npub ? (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={nsec || npub || null} user={nsec || npub || null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
/> />
) : ( ) : (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={npub} user={npub}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
/> />
)} )}

153
src/components/content/combined/CombinedDetails.js
View File

@ -1,25 +1,25 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from 'react';
import axios from "axios"; import axios from 'axios';
import { useToast } from "@/hooks/useToast"; import { useToast } from '@/hooks/useToast';
import { Tag } from "primereact/tag"; import { Tag } from 'primereact/tag';
import Image from "next/image"; import Image from 'next/image';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton"; import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from '@/components/zaps/ZapDisplay';
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from '@/components/buttons/GenericButton';
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from '@/hooks/useImageProxy';
import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription"; import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from '@/utils/lightning';
import { useSession } from "next-auth/react"; import { useSession } from 'next-auth/react';
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from '@/hooks/useWindowWidth';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
import { Toast } from "primereact/toast"; import { Toast } from 'primereact/toast';
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu"; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import appConfig from "@/config/appConfig"; import appConfig from '@/config/appConfig';
import { nip19 } from "nostr-tools"; import { nip19 } from 'nostr-tools';
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
ssr: false, ssr: false,
}); });
@ -57,65 +57,57 @@ const CombinedDetails = ({
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast("success", "Success", "Resource deleted successfully."); showToast('success', 'Success', 'Resource deleted successfully.');
router.push("/"); router.push('/');
} }
} catch (error) { } catch (error) {
if ( if (error.response?.data?.error?.includes('Invalid `prisma.resource.delete()`')) {
error.response?.data?.error?.includes(
"Invalid `prisma.resource.delete()`"
)
) {
showToast( showToast(
"error", 'error',
"Error", 'Error',
"Resource cannot be deleted because it is part of a course, delete the course first." 'Resource cannot be deleted because it is part of a course, delete the course first.'
); );
} else { } else {
showToast( showToast('error', 'Error', 'Failed to delete resource. Please try again.');
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: "Edit", label: 'Edit',
icon: "pi pi-pencil", icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: "Delete", label: 'Delete',
icon: "pi pi-trash", icon: 'pi pi-trash',
command: handleDelete, command: handleDelete,
}, },
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? "Course" : "Open Course", label: isMobileView ? 'Course' : 'Open Course',
icon: "pi pi-external-link", icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, "_blank"), command: () => window.open(`/course/${course}`, '_blank'),
}); });
} }
@ -123,13 +115,13 @@ const CombinedDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then((res) => { .then(res => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch((err) => { .catch(err => {
console.error("err", err); console.error('err', err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
@ -143,7 +135,7 @@ const CombinedDetails = ({
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
@ -154,7 +146,7 @@ const CombinedDetails = ({
if (session?.user?.role?.subscribed && decryptedContent) { if (session?.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip="You are subscribed so you can access all paid content" tooltip="You are subscribed so you can access all paid content"
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -169,14 +161,14 @@ const CombinedDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some((purchase) => purchase.courseId === course) session?.user?.purchased?.some(purchase => purchase.courseId === course)
) { ) {
const coursePurchase = session?.user?.purchased?.find( const coursePurchase = session?.user?.purchased?.find(
(purchase) => purchase.courseId === course purchase => purchase.courseId === course
); );
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`} tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid ${coursePurchase?.course?.price} sats`} label={`Paid ${coursePurchase?.course?.price} sats`}
@ -207,14 +199,10 @@ const CombinedDetails = ({
); );
} }
if ( if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -231,12 +219,7 @@ const CombinedDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return ( return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
<MDDisplay
className="p-2 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
@ -264,12 +247,7 @@ const CombinedDetails = ({
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return ( return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
<MDDisplay
className="p-4 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
@ -279,12 +257,7 @@ const CombinedDetails = ({
<div className="w-full"> <div className="w-full">
<Toast ref={toastRef} /> <Toast ref={toastRef} />
<div className="relative w-full h-[400px] mb-8"> <div className="relative w-full h-[400px] mb-8">
<Image <Image alt="background image" src={returnImageProxy(image)} fill className="object-cover" />
alt="background image"
src={returnImageProxy(image)}
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-20"></div> <div className="absolute inset-0 bg-black bg-opacity-20"></div>
</div> </div>
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0"> <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
@ -301,11 +274,9 @@ const CombinedDetails = ({
{topics?.map((topic, index) => ( {topics?.map((topic, index) => (
<Tag className="text-[#f8f8ff]" key={index} value={topic} /> <Tag className="text-[#f8f8ff]" key={index} value={topic} />
))} ))}
{isLesson && ( {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
<Tag size="small" className="text-[#f8f8ff]" value="lesson" />
)}
</div> </div>
{summary?.split("\n").map((line, index) => ( {summary?.split('\n').map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
<div className="flex items-center justify-between mt-8"> <div className="flex items-center justify-between mt-8">
@ -318,7 +289,7 @@ const CombinedDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{" "} By{' '}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -339,21 +310,19 @@ const CombinedDetails = ({
<div className="w-full mt-4">{renderPaymentMessage()}</div> <div className="w-full mt-4">{renderPaymentMessage()}</div>
{nAddress && ( {nAddress && (
<div className="mt-8"> <div className="mt-8">
{!paidResource || {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />
) : ( ) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg"> <div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400"> <p className="text-gray-400">
Comments are only available to content purchasers, Comments are only available to content purchasers, subscribers, and the content
subscribers, and the content creator. creator.
</p> </p>
</div> </div>
)} )}

19
src/components/content/courses/CourseDetails.js
View File

@ -21,6 +21,7 @@ import WelcomeModal from '@/components/onboarding/WelcomeModal';
import { ProgressSpinner } from 'primereact/progressspinner'; import { ProgressSpinner } from 'primereact/progressspinner';
import { Toast } from 'primereact/toast'; import { Toast } from 'primereact/toast';
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu'; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
export default function CourseDetails({ export default function CourseDetails({
processedEvent, processedEvent,
@ -122,7 +123,7 @@ export default function CourseDetails({
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
@ -130,14 +131,10 @@ export default function CourseDetails({
}, [session]); }, [session]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if ( if (session?.user && session.user?.role?.subscribed && decryptionPerformed) {
session?.user &&
session.user?.role?.subscribed &&
decryptionPerformed
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You are subscribed so you can access all paid content`} tooltip={`You are subscribed so you can access all paid content`}
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -291,15 +288,15 @@ export default function CourseDetails({
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />
) : ( ) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg"> <div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400"> <p className="text-gray-400">
Comments are only available to course purchasers, Comments are only available to course purchasers, subscribers, and the course
subscribers, and the course creator. creator.
</p> </p>
</div> </div>
) )
@ -308,7 +305,7 @@ export default function CourseDetails({
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />

166
src/components/content/courses/CourseLesson.js
View File

@ -1,38 +1,32 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from 'react';
import { Tag } from "primereact/tag"; import { Tag } from 'primereact/tag';
import Image from "next/image"; import Image from 'next/image';
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from '@/hooks/useImageProxy';
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from '@/utils/lightning';
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from '@/components/zaps/ZapDisplay';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { useZapsQuery } from '@/hooks/nostrQueries/zaps/useZapsQuery';
import { Toast } from "primereact/toast"; import { Toast } from 'primereact/toast';
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson"; import useTrackDocumentLesson from '@/hooks/tracking/useTrackDocumentLesson';
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from '@/hooks/useWindowWidth';
import { nip19 } from "nostr-tools"; import { nip19 } from 'nostr-tools';
import appConfig from "@/config/appConfig"; import appConfig from '@/config/appConfig';
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu"; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import { useSession } from "next-auth/react"; import { useSession } from 'next-auth/react';
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
ssr: false, ssr: false,
}); });
const CourseLesson = ({ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
lesson,
course,
decryptionPerformed,
isPaid,
setCompleted,
}) => {
const [zapAmount, setZapAmount] = useState(0); const [zapAmount, setZapAmount] = useState(0);
const [nAddress, setNAddress] = useState(null); const [nAddress, setNAddress] = useState(null);
const [nsec, setNsec] = useState(null); const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null); const [npub, setNpub] = useState(null);
const { zaps, zapsLoading, zapsError } = useZapsQuery({ const { zaps, zapsLoading, zapsError } = useZapsQuery({
event: lesson, event: lesson,
type: "lesson", type: 'lesson',
}); });
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const menuRef = useRef(null); const menuRef = useRef(null);
@ -41,46 +35,42 @@ const CourseLesson = ({
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const { data: session } = useSession(); const { data: session } = useSession();
const readTime = lesson?.content const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
? Math.max(30, Math.ceil(lesson.content.length / 20))
: 60;
const { isCompleted, isTracking, markLessonAsCompleted } = const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
useTrackDocumentLesson({ lessonId: lesson?.d,
lessonId: lesson?.d, courseId: course?.d,
courseId: course?.d, readTime,
readTime, paidCourse: isPaid,
paidCourse: isPaid, decryptionPerformed,
decryptionPerformed, });
});
const buildMenuItems = () => { const buildMenuItems = () => {
const items = []; const items = [];
const hasAccess = const hasAccess =
session?.user && session?.user && (!isPaid || decryptionPerformed || session.user.role?.subscribed);
(!isPaid || decryptionPerformed || session.user.role?.subscribed);
if (hasAccess) { if (hasAccess) {
items.push({ items.push({
label: "Mark as completed", label: 'Mark as completed',
icon: "pi pi-check-circle", icon: 'pi pi-check-circle',
command: async () => { command: async () => {
try { try {
await markLessonAsCompleted(); await markLessonAsCompleted();
setCompleted && setCompleted(lesson.id); setCompleted && setCompleted(lesson.id);
toastRef.current.show({ toastRef.current.show({
severity: "success", severity: 'success',
summary: "Success", summary: 'Success',
detail: "Lesson marked as completed", detail: 'Lesson marked as completed',
life: 3000, life: 3000,
}); });
} catch (error) { } catch (error) {
console.error("Failed to mark lesson as completed:", error); console.error('Failed to mark lesson as completed:', error);
toastRef.current.show({ toastRef.current.show({
severity: "error", severity: 'error',
summary: "Error", summary: 'Error',
detail: "Failed to mark lesson as completed", detail: 'Failed to mark lesson as completed',
life: 3000, life: 3000,
}); });
} }
@ -89,16 +79,16 @@ const CourseLesson = ({
} }
items.push({ items.push({
label: "Open lesson", label: 'Open lesson',
icon: "pi pi-arrow-up-right", icon: 'pi pi-arrow-up-right',
command: () => { command: () => {
window.open(`/details/${lesson.id}`, "_blank"); window.open(`/details/${lesson.id}`, '_blank');
}, },
}); });
items.push({ items.push({
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
if (lesson?.d) { if (lesson?.d) {
const addr = nip19.naddrEncode({ const addr = nip19.naddrEncode({
@ -107,7 +97,7 @@ const CourseLesson = ({
identifier: lesson.d, identifier: lesson.d,
relays: appConfig.defaultRelayUrls || [], relays: appConfig.defaultRelayUrls || [],
}); });
window.open(`https://habla.news/a/${addr}`, "_blank"); window.open(`https://habla.news/a/${addr}`, '_blank');
} }
}, },
}); });
@ -131,7 +121,7 @@ const CourseLesson = ({
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
@ -152,9 +142,7 @@ const CourseLesson = ({
const renderContent = () => { const renderContent = () => {
if (isPaid && decryptionPerformed) { if (isPaid && decryptionPerformed) {
return ( return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
<MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
);
} }
if (isPaid && !decryptionPerformed) { if (isPaid && !decryptionPerformed) {
return ( return (
@ -164,9 +152,7 @@ const CourseLesson = ({
); );
} }
if (lesson?.content) { if (lesson?.content) {
return ( return <MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />;
<MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
);
} }
return null; return null;
}; };
@ -179,28 +165,20 @@ const CourseLesson = ({
<div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]"> <div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
<div className="flex flex-row items-center justify-between w-full"> <div className="flex flex-row items-center justify-between w-full">
<h1 className="text-4xl">{lesson?.title}</h1> <h1 className="text-4xl">{lesson?.title}</h1>
<ZapDisplay <ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
zapAmount={zapAmount}
event={lesson}
zapsLoading={zapsLoading}
/>
</div> </div>
<div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4"> <div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
{lesson && {lesson &&
lesson.topics && lesson.topics &&
lesson.topics.length > 0 && lesson.topics.length > 0 &&
lesson.topics.map((topic, index) => ( lesson.topics.map((topic, index) => (
<Tag <Tag className="mr-2 text-white" key={index} value={topic}></Tag>
className="mr-2 text-white"
key={index}
value={topic}
></Tag>
))} ))}
</div> </div>
<div className="text-xl mt-6"> <div className="text-xl mt-6">
{lesson?.summary && ( {lesson?.summary && (
<div className="text-xl mt-4"> <div className="text-xl mt-4">
{lesson.summary.split("\n").map((line, index) => ( {lesson.summary.split('\n').map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
</div> </div>
@ -210,16 +188,13 @@ const CourseLesson = ({
<div className="flex flex-row w-fit items-center"> <div className="flex flex-row w-fit items-center">
<Image <Image
alt="avatar thumbnail" alt="avatar thumbnail"
src={returnImageProxy( src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
lesson.author?.avatar,
lesson.author?.pubkey
)}
width={50} width={50}
height={50} height={50}
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg"> <p className="text-lg">
Created by{" "} Created by{' '}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -256,26 +231,25 @@ const CourseLesson = ({
<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]"> <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]">
{renderContent()} {renderContent()}
</div> </div>
{nAddress !== null && {nAddress !== null && (!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
(!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && ( <div className="px-4">
<div className="px-4"> {nsec || npub ? (
{nsec || npub ? ( <ZapThreadsWrapper
<ZapThreadsWrapper anchor={nAddress}
anchor={nAddress} user={nsec || npub || null}
user={nsec || npub || null} relays={appConfig.defaultRelayUrls.join(',')}
relays={appConfig.defaultRelayUrls.join(",")} disable="zaps"
disable="zaps" />
/> ) : (
) : ( <ZapThreadsWrapper
<ZapThreadsWrapper anchor={nAddress}
anchor={nAddress} user={npub}
user={npub} relays={appConfig.defaultRelayUrls.join(',')}
relays={appConfig.defaultRelayUrls.join(",")} disable="zaps"
disable="zaps" />
/> )}
)} </div>
</div> )}
)}
</div> </div>
); );
}; };

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

@ -1,25 +1,25 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from 'react';
import axios from "axios"; import axios from 'axios';
import { useToast } from "@/hooks/useToast"; import { useToast } from '@/hooks/useToast';
import { Tag } from "primereact/tag"; import { Tag } from 'primereact/tag';
import Image from "next/image"; import Image from 'next/image';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton"; import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from '@/components/zaps/ZapDisplay';
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from '@/components/buttons/GenericButton';
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from '@/hooks/useImageProxy';
import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription"; import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from '@/utils/lightning';
import { useSession } from "next-auth/react"; import { useSession } from 'next-auth/react';
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from '@/hooks/useWindowWidth';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
import { Toast } from "primereact/toast"; import { Toast } from 'primereact/toast';
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu"; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import appConfig from "@/config/appConfig"; import appConfig from '@/config/appConfig';
import { nip19 } from "nostr-tools"; import { nip19 } from 'nostr-tools';
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
ssr: false, ssr: false,
}); });
@ -59,71 +59,63 @@ const DocumentDetails = ({
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast("success", "Success", "Resource deleted successfully."); showToast('success', 'Success', 'Resource deleted successfully.');
router.push("/"); router.push('/');
} }
} catch (error) { } catch (error) {
if ( if (
error.response && error.response &&
error.response.data && error.response.data &&
error.response.data.error.includes("Invalid `prisma.resource.delete()`") error.response.data.error.includes('Invalid `prisma.resource.delete()`')
) { ) {
showToast( showToast(
"error", 'error',
"Error", 'Error',
"Resource cannot be deleted because it is part of a course, delete the course first." 'Resource cannot be deleted because it is part of a course, delete the course first.'
); );
} else if ( } else if (error.response && error.response.data && error.response.data.error) {
error.response && showToast('error', 'Error', error.response.data.error);
error.response.data &&
error.response.data.error
) {
showToast("error", "Error", error.response.data.error);
} else { } else {
showToast( showToast('error', 'Error', 'Failed to delete resource. Please try again.');
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: "Edit", label: 'Edit',
icon: "pi pi-pencil", icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: "Delete", label: 'Delete',
icon: "pi pi-trash", icon: 'pi pi-trash',
command: handleDelete, command: handleDelete,
}, },
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? "Course" : "Open Course", label: isMobileView ? 'Course' : 'Open Course',
icon: "pi pi-external-link", icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, "_blank"), command: () => window.open(`/course/${course}`, '_blank'),
}); });
} }
@ -138,20 +130,20 @@ const DocumentDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then((res) => { .then(res => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch((err) => { .catch(err => {
console.error("err", err); console.error('err', err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
@ -162,7 +154,7 @@ const DocumentDetails = ({
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You are subscribed so you can access all paid content`} tooltip={`You are subscribed so you can access all paid content`}
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -178,15 +170,13 @@ const DocumentDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some((purchase) => purchase.courseId === course) session?.user?.purchased?.some(purchase => purchase.courseId === course)
) { ) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${ tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
session?.user?.purchased?.find( session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
(purchase) => purchase.courseId === course
)?.course?.price
} sats for the course.`} } sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid`} label={`Paid`}
@ -213,20 +203,16 @@ const DocumentDetails = ({
outlined outlined
size="small" size="small"
tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`} tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`}
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
/> />
); );
} }
if ( if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -243,12 +229,7 @@ const DocumentDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return ( return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />;
<MDDisplay
className="p-2 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
return ( return (
@ -274,12 +255,7 @@ const DocumentDetails = ({
); );
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return ( return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />;
<MDDisplay
className="p-4 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
}; };
@ -312,11 +288,9 @@ const DocumentDetails = ({
topics.map((topic, index) => ( topics.map((topic, index) => (
<Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag> <Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag>
))} ))}
{isLesson && ( {isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
<Tag size="small" className="text-[#f8f8ff]" value="lesson" />
)}
</div> </div>
{summary?.split("\n").map((line, index) => ( {summary?.split('\n').map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
<div className="flex items-center justify-between mt-8"> <div className="flex items-center justify-between mt-8">
@ -329,7 +303,7 @@ const DocumentDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{" "} By{' '}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -350,21 +324,19 @@ const DocumentDetails = ({
<div className="w-full mt-4">{renderPaymentMessage()}</div> <div className="w-full mt-4">{renderPaymentMessage()}</div>
{nAddress && ( {nAddress && (
<div className="mt-8"> <div className="mt-8">
{!paidResource || {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />
) : ( ) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg"> <div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400"> <p className="text-gray-400">
Comments are only available to content purchasers, Comments are only available to content purchasers, subscribers, and the content
subscribers, and the content creator. creator.
</p> </p>
</div> </div>
)} )}

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

@ -1,25 +1,25 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from 'react';
import axios from "axios"; import axios from 'axios';
import { useToast } from "@/hooks/useToast"; import { useToast } from '@/hooks/useToast';
import { Tag } from "primereact/tag"; import { Tag } from 'primereact/tag';
import Image from "next/image"; import Image from 'next/image';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton"; import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from '@/components/zaps/ZapDisplay';
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from '@/components/buttons/GenericButton';
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from '@/hooks/useImageProxy';
import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription"; import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from '@/utils/lightning';
import { useSession } from "next-auth/react"; import { useSession } from 'next-auth/react';
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from '@/hooks/useWindowWidth';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
import { Toast } from "primereact/toast"; import { Toast } from 'primereact/toast';
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu"; import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import appConfig from "@/config/appConfig"; import appConfig from '@/config/appConfig';
import { nip19 } from "nostr-tools"; import { nip19 } from 'nostr-tools';
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
ssr: false, ssr: false,
}); });
@ -59,71 +59,63 @@ const VideoDetails = ({
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast("success", "Success", "Resource deleted successfully."); showToast('success', 'Success', 'Resource deleted successfully.');
router.push("/"); router.push('/');
} }
} catch (error) { } catch (error) {
if ( if (
error.response && error.response &&
error.response.data && error.response.data &&
error.response.data.error.includes("Invalid `prisma.resource.delete()`") error.response.data.error.includes('Invalid `prisma.resource.delete()`')
) { ) {
showToast( showToast(
"error", 'error',
"Error", 'Error',
"Resource cannot be deleted because it is part of a course, delete the course first." 'Resource cannot be deleted because it is part of a course, delete the course first.'
); );
} else if ( } else if (error.response && error.response.data && error.response.data.error) {
error.response && showToast('error', 'Error', error.response.data.error);
error.response.data &&
error.response.data.error
) {
showToast("error", "Error", error.response.data.error);
} else { } else {
showToast( showToast('error', 'Error', 'Failed to delete resource. Please try again.');
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: "Edit", label: 'Edit',
icon: "pi pi-pencil", icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: "Delete", label: 'Delete',
icon: "pi pi-trash", icon: 'pi pi-trash',
command: handleDelete, command: handleDelete,
}, },
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: "View Nostr note", label: 'View Nostr note',
icon: "pi pi-globe", icon: 'pi pi-globe',
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, "_blank"); window.open(`https://habla.news/a/${nAddress}`, '_blank');
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? "Course" : "Open Course", label: isMobileView ? 'Course' : 'Open Course',
icon: "pi pi-external-link", icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, "_blank"), command: () => window.open(`/course/${course}`, '_blank'),
}); });
} }
@ -131,13 +123,13 @@ const VideoDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then((res) => { .then(res => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch((err) => { .catch(err => {
console.error("err", err); console.error('err', err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
@ -151,7 +143,7 @@ const VideoDetails = ({
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
@ -162,7 +154,7 @@ const VideoDetails = ({
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You are subscribed so you can access all paid content`} tooltip={`You are subscribed so you can access all paid content`}
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -177,21 +169,17 @@ const VideoDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some((purchase) => purchase.courseId === course) session?.user?.purchased?.some(purchase => purchase.courseId === course)
) { ) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${ tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
session?.user?.purchased?.find( session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
(purchase) => purchase.courseId === course
)?.course?.price
} sats for the course.`} } sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid ${ label={`Paid ${
session?.user?.purchased?.find( session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price
(purchase) => purchase.courseId === course
)?.course?.price
} sats`} } sats`}
severity="success" severity="success"
outlined outlined
@ -220,14 +208,10 @@ const VideoDetails = ({
); );
} }
if ( if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) {
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: "top" }} tooltipOptions={{ position: 'top' }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -244,12 +228,7 @@ const VideoDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return ( return <MDDisplay className="p-0 rounded-lg w-full" source={decryptedContent} />;
<MDDisplay
className="p-0 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
return ( return (
@ -258,8 +237,8 @@ const VideoDetails = ({
className="absolute inset-0 opacity-50" className="absolute inset-0 opacity-50"
style={{ style={{
backgroundImage: `url(${image})`, backgroundImage: `url(${image})`,
backgroundSize: "cover", backgroundSize: 'cover',
backgroundPosition: "center", backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-black bg-opacity-50"></div> <div className="absolute inset-0 bg-black bg-opacity-50"></div>
@ -282,12 +261,7 @@ const VideoDetails = ({
); );
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return ( return <MDDisplay className="p-0 rounded-lg w-full" source={processedEvent.content} />;
<MDDisplay
className="p-0 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
}; };
@ -297,9 +271,7 @@ const VideoDetails = ({
<Toast ref={toastRef} /> <Toast ref={toastRef} />
{renderContent()} {renderContent()}
<div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none"> <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
<div <div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}>
className={`w-full flex flex-col items-start justify-start mt-2 px-2`}
>
<div className="flex flex-col items-start gap-2 w-full"> <div className="flex flex-col items-start gap-2 w-full">
<div className="flex flex-row items-center justify-between gap-2 w-full"> <div className="flex flex-row items-center justify-between gap-2 w-full">
<h1 className="text-4xl flex-grow">{title}</h1> <h1 className="text-4xl flex-grow">{title}</h1>
@ -313,18 +285,14 @@ const VideoDetails = ({
{topics && {topics &&
topics.length > 0 && topics.length > 0 &&
topics.map((topic, index) => ( topics.map((topic, index) => (
<Tag <Tag className="mt-2 text-white" key={index} value={topic}></Tag>
className="mt-2 text-white"
key={index}
value={topic}
></Tag>
))} ))}
{isLesson && <Tag className="mt-2 text-white" value="lesson" />} {isLesson && <Tag className="mt-2 text-white" value="lesson" />}
</div> </div>
</div> </div>
<div className="flex flex-row items-center justify-between w-full"> <div className="flex flex-row items-center justify-between w-full">
<div className="my-4 max-mob:text-base max-tab:text-base"> <div className="my-4 max-mob:text-base max-tab:text-base">
{summary?.split("\n").map((line, index) => ( {summary?.split('\n').map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
</div> </div>
@ -339,7 +307,7 @@ const VideoDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{" "} By{' '}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -358,26 +326,22 @@ const VideoDetails = ({
</div> </div>
</div> </div>
</div> </div>
<div className="w-full flex justify-start mt-4"> <div className="w-full flex justify-start mt-4">{renderPaymentMessage()}</div>
{renderPaymentMessage()}
</div>
{nAddress && ( {nAddress && (
<div className="mt-8"> <div className="mt-8">
{!paidResource || {!paidResource || decryptedContent || session?.user?.role?.subscribed ? (
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddress} anchor={nAddress}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />
) : ( ) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg"> <div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400"> <p className="text-gray-400">
Comments are only available to content purchasers, Comments are only available to content purchasers, subscribers, and the content
subscribers, and the content creator. creator.
</p> </p>
</div> </div>
)} )}

1
src/config/appConfig.js
View File

@ -12,6 +12,7 @@ const appConfig = {
authorPubkeys: [ authorPubkeys: [
'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741', 'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345', 'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
'b9f4c34dc25b2ddd785c007bf6e12619bb1c9b8335b8d75d37bf76e97d1a0e31',
], ],
customLightningAddresses: [ customLightningAddresses: [
{ {

10
src/pages/api/lightning-address/callback/[slug].js
View File

@ -81,10 +81,12 @@ export default async function handler(req, res) {
}, },
} }
); );
res.status(200).json({ res
pr: response.data.invoice, .status(200)
verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`, .json({
}); pr: response.data.invoice,
verify: `${BACKEND_URL}/api/lightning-address/verify/${slug}/${response.data.payment_hash}`,
});
} catch (error) { } catch (error) {
console.error(error); console.error(error);
res.status(500).json({ error: 'Failed to generate invoice' }); res.status(500).json({ error: 'Failed to generate invoice' });

157
src/pages/course/[slug]/index.js
View File

@ -1,24 +1,24 @@
import React, { useEffect, useState, useCallback } from "react"; import React, { useEffect, useState, useCallback } from 'react';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import { parseCourseEvent, parseEvent, findKind0Fields } from "@/utils/nostr"; import { parseCourseEvent, parseEvent, findKind0Fields } from '@/utils/nostr';
import CourseDetails from "@/components/content/courses/CourseDetails"; import CourseDetails from '@/components/content/courses/CourseDetails';
import VideoLesson from "@/components/content/courses/VideoLesson"; import VideoLesson from '@/components/content/courses/VideoLesson';
import DocumentLesson from "@/components/content/courses/DocumentLesson"; import DocumentLesson from '@/components/content/courses/DocumentLesson';
import CombinedLesson from "@/components/content/courses/CombinedLesson"; import CombinedLesson from '@/components/content/courses/CombinedLesson';
import { useNDKContext } from "@/context/NDKContext"; import { useNDKContext } from '@/context/NDKContext';
import { useSession } from "next-auth/react"; import { useSession } from 'next-auth/react';
import axios from "axios"; import axios from 'axios';
import { nip04, nip19 } from "nostr-tools"; import { nip04, nip19 } from 'nostr-tools';
import { useToast } from "@/hooks/useToast"; import { useToast } from '@/hooks/useToast';
import { ProgressSpinner } from "primereact/progressspinner"; import { ProgressSpinner } from 'primereact/progressspinner';
import { Accordion, AccordionTab } from "primereact/accordion"; import { Accordion, AccordionTab } from 'primereact/accordion';
import { Tag } from "primereact/tag"; import { Tag } from 'primereact/tag';
import { useDecryptContent } from "@/hooks/encryption/useDecryptContent"; import { useDecryptContent } from '@/hooks/encryption/useDecryptContent';
import dynamic from "next/dynamic"; import dynamic from 'next/dynamic';
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import appConfig from "@/config/appConfig"; import appConfig from '@/config/appConfig';
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
ssr: false, ssr: false,
}); });
@ -36,10 +36,10 @@ const useCourseData = (ndk, fetchAuthor, router) => {
let id; let id;
const fetchCourseId = async () => { const fetchCourseId = async () => {
if (slug.includes("naddr")) { if (slug.includes('naddr')) {
const { data } = nip19.decode(slug); const { data } = nip19.decode(slug);
if (!data?.identifier) { if (!data?.identifier) {
showToast("error", "Error", "Resource not found"); showToast('error', 'Error', 'Resource not found');
return null; return null;
} }
return data.identifier; return data.identifier;
@ -48,21 +48,19 @@ const useCourseData = (ndk, fetchAuthor, router) => {
} }
}; };
const fetchCourse = async (courseId) => { const fetchCourse = async courseId => {
try { try {
await ndk.connect(); await ndk.connect();
const event = await ndk.fetchEvent({ "#d": [courseId] }); const event = await ndk.fetchEvent({ '#d': [courseId] });
if (!event) return null; if (!event) return null;
const author = await fetchAuthor(event.pubkey); const author = await fetchAuthor(event.pubkey);
const lessonIds = event.tags const lessonIds = event.tags.filter(tag => tag[0] === 'a').map(tag => tag[1].split(':')[2]);
.filter((tag) => tag[0] === "a")
.map((tag) => tag[1].split(":")[2]);
const parsedCourse = { ...parseCourseEvent(event), author }; const parsedCourse = { ...parseCourseEvent(event), author };
return { parsedCourse, lessonIds }; return { parsedCourse, lessonIds };
} catch (error) { } catch (error) {
console.error("Error fetching event:", error); console.error('Error fetching event:', error);
return null; return null;
} }
}; };
@ -97,11 +95,11 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
const { showToast } = useToast(); const { showToast } = useToast();
useEffect(() => { useEffect(() => {
if (lessonIds.length > 0) { if (lessonIds.length > 0) {
const fetchLesson = async (lessonId) => { const fetchLesson = async lessonId => {
try { try {
await ndk.connect(); await ndk.connect();
const filter = { const filter = {
"#d": [lessonId], '#d': [lessonId],
kinds: [30023, 30402], kinds: [30023, 30402],
authors: [pubkey], authors: [pubkey],
}; };
@ -109,11 +107,9 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
if (event) { if (event) {
const author = await fetchAuthor(event.pubkey); const author = await fetchAuthor(event.pubkey);
const parsedLesson = { ...parseEvent(event), author }; const parsedLesson = { ...parseEvent(event), author };
setLessons((prev) => { setLessons(prev => {
// Check if the lesson already exists in the array // Check if the lesson already exists in the array
const exists = prev.some( const exists = prev.some(lesson => lesson.id === parsedLesson.id);
(lesson) => lesson.id === parsedLesson.id
);
if (!exists) { if (!exists) {
return [...prev, parsedLesson]; return [...prev, parsedLesson];
} }
@ -121,16 +117,16 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
}); });
} }
} catch (error) { } catch (error) {
console.error("Error fetching event:", error); console.error('Error fetching event:', error);
} }
}; };
lessonIds.forEach((lessonId) => fetchLesson(lessonId)); lessonIds.forEach(lessonId => fetchLesson(lessonId));
} }
}, [lessonIds, ndk, fetchAuthor, pubkey]); }, [lessonIds, ndk, fetchAuthor, pubkey]);
useEffect(() => { useEffect(() => {
const newUniqueLessons = Array.from( const newUniqueLessons = Array.from(
new Map(lessons.map((lesson) => [lesson.id, lesson])).values() new Map(lessons.map(lesson => [lesson.id, lesson])).values()
); );
setUniqueLessons(newUniqueLessons); setUniqueLessons(newUniqueLessons);
}, [lessons]); }, [lessons]);
@ -148,16 +144,14 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
if (session?.user && paidCourse && !decryptionPerformed) { if (session?.user && paidCourse && !decryptionPerformed) {
setLoading(true); setLoading(true);
const canAccess = const canAccess =
session.user.purchased?.some( session.user.purchased?.some(purchase => purchase.courseId === course?.d) ||
(purchase) => purchase.courseId === course?.d
) ||
session.user?.role?.subscribed || session.user?.role?.subscribed ||
session.user?.pubkey === course?.pubkey; session.user?.pubkey === course?.pubkey;
if (canAccess && lessons.length > 0) { if (canAccess && lessons.length > 0) {
try { try {
const decryptedLessons = await Promise.all( const decryptedLessons = await Promise.all(
lessons.map(async (lesson) => { lessons.map(async lesson => {
const decryptedContent = await decryptContent(lesson.content); const decryptedContent = await decryptContent(lesson.content);
return { ...lesson, content: decryptedContent }; return { ...lesson, content: decryptedContent };
}) })
@ -165,7 +159,7 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
setLessons(decryptedLessons); setLessons(decryptedLessons);
setDecryptionPerformed(true); setDecryptionPerformed(true);
} catch (error) { } catch (error) {
console.error("Error decrypting lessons:", error); console.error('Error decrypting lessons:', error);
} }
} }
setLoading(false); setLoading(false);
@ -189,12 +183,12 @@ const Course = () => {
const [nsec, setNsec] = useState(null); const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null); const [npub, setNpub] = useState(null);
const setCompleted = useCallback((lessonId) => { const setCompleted = useCallback(lessonId => {
setCompletedLessons((prev) => [...prev, lessonId]); setCompletedLessons(prev => [...prev, lessonId]);
}, []); }, []);
const fetchAuthor = useCallback( const fetchAuthor = useCallback(
async (pubkey) => { async pubkey => {
const author = await ndk.getUser({ pubkey }); const author = await ndk.getUser({ pubkey });
const profile = await author.fetchProfile(); const profile = await author.fetchProfile();
const fields = await findKind0Fields(profile); const fields = await findKind0Fields(profile);
@ -237,7 +231,7 @@ const Course = () => {
useEffect(() => { useEffect(() => {
if (uniqueLessons.length > 0) { if (uniqueLessons.length > 0) {
const addresses = {}; const addresses = {};
uniqueLessons.forEach((lesson) => { uniqueLessons.forEach(lesson => {
const addr = nip19.naddrEncode({ const addr = nip19.naddrEncode({
pubkey: lesson.pubkey, pubkey: lesson.pubkey,
kind: lesson.kind, kind: lesson.kind,
@ -252,49 +246,37 @@ const Course = () => {
useEffect(() => { useEffect(() => {
if (session?.user?.privkey) { if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex"); const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
setNsec(nip19.nsecEncode(privkeyBuffer)); setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) { } else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey)); setNpub(nip19.npubEncode(session.user.pubkey));
} }
}, [session]); }, [session]);
const handleAccordionChange = (e) => { const handleAccordionChange = e => {
const newIndex = e.index === expandedIndex ? null : e.index; const newIndex = e.index === expandedIndex ? null : e.index;
setExpandedIndex(newIndex); setExpandedIndex(newIndex);
if (newIndex !== null) { if (newIndex !== null) {
router.push( router.push(`/course/${router.query.slug}?active=${newIndex}`, undefined, { shallow: true });
`/course/${router.query.slug}?active=${newIndex}`,
undefined,
{ shallow: true }
);
} else { } else {
router.push(`/course/${router.query.slug}`, undefined, { shallow: true }); router.push(`/course/${router.query.slug}`, undefined, { shallow: true });
} }
}; };
const handlePaymentSuccess = async (response) => { const handlePaymentSuccess = async response => {
if (response && response?.preimage) { if (response && response?.preimage) {
const updated = await update(); const updated = await update();
showToast( showToast('success', 'Payment Success', 'You have successfully purchased this course');
"success",
"Payment Success",
"You have successfully purchased this course"
);
} else { } else {
showToast( showToast('error', 'Error', 'Failed to purchase course. Please try again.');
"error",
"Error",
"Failed to purchase course. Please try again."
);
} }
}; };
const handlePaymentError = (error) => { const handlePaymentError = error => {
showToast( showToast(
"error", 'error',
"Payment Error", 'Payment Error',
`Failed to purchase course. Please try again. Error: ${error}` `Failed to purchase course. Please try again. Error: ${error}`
); );
}; };
@ -307,11 +289,8 @@ const Course = () => {
); );
} }
const renderLesson = (lesson) => { const renderLesson = lesson => {
if ( if (lesson.topics?.includes('video') && lesson.topics?.includes('document')) {
lesson.topics?.includes("video") &&
lesson.topics?.includes("document")
) {
return ( return (
<CombinedLesson <CombinedLesson
lesson={lesson} lesson={lesson}
@ -321,10 +300,7 @@ const Course = () => {
setCompleted={setCompleted} setCompleted={setCompleted}
/> />
); );
} else if ( } else if (lesson.type === 'video' && !lesson.topics?.includes('document')) {
lesson.type === "video" &&
!lesson.topics?.includes("document")
) {
return ( return (
<VideoLesson <VideoLesson
lesson={lesson} lesson={lesson}
@ -334,10 +310,7 @@ const Course = () => {
setCompleted={setCompleted} setCompleted={setCompleted}
/> />
); );
} else if ( } else if (lesson.type === 'document' && !lesson.topics?.includes('video')) {
lesson.type === "document" &&
!lesson.topics?.includes("video")
) {
return ( return (
<DocumentLesson <DocumentLesson
lesson={lesson} lesson={lesson}
@ -372,11 +345,11 @@ const Course = () => {
<AccordionTab <AccordionTab
key={index} key={index}
pt={{ pt={{
root: { className: "border-none" }, root: { className: 'border-none' },
header: { className: "border-none" }, header: { className: 'border-none' },
headerAction: { className: "border-none" }, headerAction: { className: 'border-none' },
content: { className: "border-none max-mob:px-0 max-tab:px-0" }, content: { className: 'border-none max-mob:px-0 max-tab:px-0' },
accordiontab: { className: "border-none" }, accordiontab: { className: 'border-none' },
}} }}
header={ header={
<div className="flex align-items-center justify-between w-full"> <div className="flex align-items-center justify-between w-full">
@ -394,21 +367,19 @@ const Course = () => {
{renderLesson(lesson)} {renderLesson(lesson)}
{nAddresses[lesson.id] && ( {nAddresses[lesson.id] && (
<div className="mt-8"> <div className="mt-8">
{!paidCourse || {!paidCourse || decryptionPerformed || session?.user?.role?.subscribed ? (
decryptionPerformed ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper <ZapThreadsWrapper
anchor={nAddresses[lesson.id]} anchor={nAddresses[lesson.id]}
user={session?.user ? nsec || npub : null} user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")} relays={appConfig.defaultRelayUrls.join(',')}
disable="zaps" disable="zaps"
isAuthorized={true} isAuthorized={true}
/> />
) : ( ) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg"> <div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400"> <p className="text-gray-400">
Comments are only available to course purchasers, Comments are only available to course purchasers, subscribers, and the
subscribers, and the course creator. course creator.
</p> </p>
</div> </div>
)} )}
@ -419,9 +390,7 @@ const Course = () => {
))} ))}
</Accordion> </Accordion>
<div className="mx-auto my-6"> <div className="mx-auto my-6">
{course?.content && ( {course?.content && <MDDisplay className="p-4 rounded-lg" source={course.content} />}
<MDDisplay className="p-4 rounded-lg" source={course.content} />
)}
</div> </div>
</> </>
); );