import React, { useEffect, useState, useRef } from "react"; import axios from "axios"; import { useToast } from "@/hooks/useToast"; import { Tag } from "primereact/tag"; import Image from "next/image"; import { useRouter } from "next/router"; import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton"; import ZapDisplay from "@/components/zaps/ZapDisplay"; import GenericButton from "@/components/buttons/GenericButton"; import { useImageProxy } from "@/hooks/useImageProxy"; import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription"; import { getTotalFromZaps } from "@/utils/lightning"; import { useSession } from "next-auth/react"; import useWindowWidth from "@/hooks/useWindowWidth"; import dynamic from "next/dynamic"; import { Toast } from "primereact/toast"; import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu"; import ZapThreadsWrapper from "@/components/ZapThreadsWrapper"; import appConfig from "@/config/appConfig"; import { nip19 } from "nostr-tools"; const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), { ssr: false, }); 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, }); const { data: session, status } = useSession(); const { showToast } = useToast(); const windowWidth = useWindowWidth(); const isMobileView = windowWidth <= 768; const menuRef = useRef(null); const toastRef = useRef(null); const [nsec, setNsec] = useState(null); const [npub, setNpub] = useState(null); const handleDelete = async () => { try { const response = await axios.delete(`/api/resources/${processedEvent.d}`); if (response.status === 204) { showToast("success", "Success", "Resource deleted successfully."); router.push("/"); } } catch (error) { if ( error.response && error.response.data && error.response.data.error.includes("Invalid `prisma.resource.delete()`") ) { showToast( "error", "Error", "Resource cannot be deleted because it is part of a course, delete the course first." ); } else if ( error.response && error.response.data && error.response.data.error ) { showToast("error", "Error", error.response.data.error); } else { showToast( "error", "Error", "Failed to delete resource. Please try again." ); } } }; const authorMenuItems = [ { label: "Edit", icon: "pi pi-pencil", command: () => router.push(`/details/${processedEvent.id}/edit`), }, { label: "Delete", icon: "pi pi-trash", command: handleDelete, }, { label: "View Nostr note", icon: "pi pi-globe", command: () => { window.open(`https://habla.news/a/${nAddress}`, "_blank"); }, }, ]; const userMenuItems = [ { label: "View Nostr note", icon: "pi pi-globe", command: () => { window.open(`https://habla.news/a/${nAddress}`, "_blank"); }, }, ]; if (course) { userMenuItems.unshift({ label: isMobileView ? "Course" : "Open Course", icon: "pi pi-external-link", command: () => window.open(`/course/${course}`, "_blank"), }); } useEffect(() => { if (zaps.length > 0) { const total = getTotalFromZaps(zaps, processedEvent); setZapAmount(total); } }, [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.error("err", err); }); } }, [processedEvent.d, isLesson]); 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 renderPaymentMessage = () => { if (session?.user && session.user?.role?.subscribed && decryptedContent) { return ( <GenericButton tooltipOptions={{ position: "top" }} tooltip={`You are subscribed so you can access all paid content`} icon="pi pi-check" label="Subscribed" severity="success" outlined size="small" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" /> ); } // if the user paid for the course that this lesson is in, show a message that says you have this lesson through the course and show how much you paid for the course if ( isLesson && course && session?.user?.purchased?.some((purchase) => purchase.courseId === course) ) { return ( <GenericButton tooltipOptions={{ position: "top" }} tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${ session?.user?.purchased?.find( (purchase) => purchase.courseId === course )?.course?.price } sats for the course.`} icon="pi pi-check" label={`Paid`} severity="success" outlined size="small" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" /> ); } if ( paidResource && decryptedContent && author && processedEvent?.pubkey !== session?.user?.pubkey && !session?.user?.role?.subscribed ) { return ( <GenericButton icon="pi pi-check" label={`Paid`} severity="success" outlined size="small" tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`} tooltipOptions={{ position: "top" }} className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" /> ); } if ( paidResource && author && processedEvent?.pubkey === session?.user?.pubkey ) { return ( <GenericButton tooltipOptions={{ position: "top" }} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} icon="pi pi-check" label={`Price ${processedEvent.price} sats`} severity="success" outlined size="small" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" /> ); } return null; }; const renderContent = () => { if (decryptedContent) { return ( <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} /> ); } if (paidResource && !decryptedContent) { return ( <div className="w-full px-4"> <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center"> <div className="mx-auto py-auto"> <i className="pi pi-lock text-[60px] text-red-500"></i> </div> <p className="text-center text-xl text-red-500 mt-4"> This content is paid and needs to be purchased before viewing. </p> <div className="flex flex-row items-center justify-center w-full mt-4"> <ResourcePaymentButton lnAddress={author?.lud16} amount={price} onSuccess={handlePaymentSuccess} onError={handlePaymentError} resourceId={processedEvent.d} /> </div> </div> </div> ); } if (processedEvent?.content) { return ( <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} /> ); } return null; }; return ( <div className="w-full"> <Toast ref={toastRef} /> <div className="relative w-full h-[400px] mb-8"> <Image alt="background image" src={returnImageProxy(image)} fill className="object-cover rounded-b-lg" /> <div className="absolute inset-0 bg-black bg-opacity-20"></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="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none"> <div className="flex flex-row items-center justify-between w-full"> <h1 className="text-4xl font-bold text-white">{title}</h1> <ZapDisplay zapAmount={zapAmount} event={processedEvent} zapsLoading={zapsLoading && zapAmount === 0} /> </div> <div className="flex flex-wrap gap-2 mt-2 mb-4"> {topics && topics.length > 0 && topics.map((topic, index) => ( <Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag> ))} {isLesson && ( <Tag size="small" className="text-[#f8f8ff]" value="lesson" /> )} </div> {summary?.split("\n").map((line, index) => ( <p key={index}>{line}</p> ))} <div className="flex items-center justify-between mt-8"> <div className="flex items-center"> <Image alt="avatar image" src={returnImageProxy(author?.avatar, author?.username)} width={50} height={50} className="rounded-full mr-4" /> <p className="text-lg text-white"> By{" "} <a rel="noreferrer noopener" target="_blank" className="text-blue-300 hover:underline" > {author?.username} </a> </p> </div> <div className="flex justify-end"> <MoreOptionsMenu menuItems={authorView ? authorMenuItems : userMenuItems} additionalLinks={processedEvent?.additionalLinks || []} isMobileView={isMobileView} /> </div> </div> <div className="w-full mt-4">{renderPaymentMessage()}</div> {nAddress && ( <div className="mt-8"> {!paidResource || decryptedContent || session?.user?.role?.subscribed ? ( <ZapThreadsWrapper anchor={nAddress} user={session?.user ? nsec || npub : null} relays={appConfig.defaultRelayUrls.join(",")} disable="zaps" isAuthorized={true} /> ) : ( <div className="text-center p-4 bg-gray-800/50 rounded-lg"> <p className="text-gray-400"> Comments are only available to content purchasers, subscribers, and the content creator. </p> </div> )} </div> )} </div> {renderContent()} </div> </div> ); }; export default DocumentDetails;