mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-23 16:05:24 +00:00
Fix details page to prevent invoice reloading on tab change
This commit is contained in:
austinkelsay
parent
f730519f83
commit
7bc008e0e0
@ -1,189 +1,107 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useState, useCallback, useEffect } from "react";
|
||||||
import { useRouter } from 'next/router';
|
import DocumentDetails from "@/components/content/documents/DocumentDetails";
|
||||||
|
import VideoDetails from "@/components/content/videos/VideoDetails";
|
||||||
import { parseEvent, findKind0Fields } from '@/utils/nostr';
|
import { parseEvent, findKind0Fields } from '@/utils/nostr';
|
||||||
import { nip19, nip04 } from 'nostr-tools';
|
import { nip19 } from 'nostr-tools';
|
||||||
import { useSession } from 'next-auth/react';
|
import { useSession } from 'next-auth/react';
|
||||||
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
|
import { useNDKContext } from "@/context/NDKContext";
|
||||||
import { useToast } from '@/hooks/useToast';
|
import { useDecryptContent } from "@/hooks/encryption/useDecryptContent";
|
||||||
import { useNDKContext } from '@/context/NDKContext';
|
import { useToast } from "@/hooks/useToast";
|
||||||
import VideoDetails from '@/components/content/videos/VideoDetails';
|
import { useRouter } from "next/router";
|
||||||
import DocumentDetails from '@/components/content/documents/DocumentDetails';
|
|
||||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||||
import appConfig from "@/config/appConfig";
|
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
|
||||||
import { useDecryptContent } from '@/hooks/encryption/useDecryptContent';
|
import { appConfig } from "@/config/appConfig";
|
||||||
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
|
||||||
import 'primeicons/primeicons.css';
|
|
||||||
|
|
||||||
export default function Details() {
|
const Details = () => {
|
||||||
const [event, setEvent] = useState(null);
|
const [event, setEvent] = useState(null);
|
||||||
const [processedEvent, setProcessedEvent] = useState({});
|
|
||||||
const [author, setAuthor] = useState(null);
|
const [author, setAuthor] = useState(null);
|
||||||
const [nAddress, setNAddress] = useState(null);
|
const [nAddress, setNAddress] = useState(null);
|
||||||
const [paidResource, setPaidResource] = useState(false);
|
|
||||||
const [decryptedContent, setDecryptedContent] = useState(null);
|
const [decryptedContent, setDecryptedContent] = useState(null);
|
||||||
const [authorView, setAuthorView] = useState(false);
|
const [authorView, setAuthorView] = useState(false);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const { data: session } = useSession();
|
||||||
|
const { ndk } = useNDKContext();
|
||||||
const { ndk, addSigner } = useNDKContext();
|
|
||||||
const { data: session, update } = useSession();
|
|
||||||
const [user, setUser] = useState(null);
|
|
||||||
const { decryptContent } = useDecryptContent();
|
const { decryptContent } = useDecryptContent();
|
||||||
const { encryptContent } = useEncryptContent();
|
const router = useRouter();
|
||||||
const { showToast } = useToast();
|
const { showToast } = useToast();
|
||||||
|
|
||||||
const router = useRouter();
|
const fetchAuthor = useCallback(async (pubkey) => {
|
||||||
|
if (!pubkey) return;
|
||||||
useEffect(() => {
|
const author = await ndk.getUser({ pubkey });
|
||||||
if (session) {
|
const profile = await author.fetchProfile();
|
||||||
setUser(session.user);
|
const fields = await findKind0Fields(profile);
|
||||||
|
if (fields) {
|
||||||
|
setAuthor(fields);
|
||||||
}
|
}
|
||||||
}, [session]);
|
}, [ndk]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (processedEvent.price) {
|
if (event?.d && !nAddress) {
|
||||||
setPaidResource(true);
|
|
||||||
}
|
|
||||||
}, [processedEvent]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const decrypt = async () => {
|
|
||||||
if (paidResource && processedEvent.content) {
|
|
||||||
// Check if user is subscribed first
|
|
||||||
if (user?.role?.subscribed) {
|
|
||||||
const decryptedContent = await decryptContent(processedEvent.content);
|
|
||||||
setDecryptedContent(decryptedContent);
|
|
||||||
}
|
|
||||||
// If not subscribed, check if they have purchased
|
|
||||||
else if (user?.purchased?.some(purchase => purchase.resourceId === processedEvent.d)) {
|
|
||||||
const decryptedContent = await decryptContent(processedEvent.content);
|
|
||||||
setDecryptedContent(decryptedContent);
|
|
||||||
}
|
|
||||||
// If neither subscribed nor purchased, decryptedContent remains null
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
decrypt();
|
|
||||||
}, [user, paidResource, processedEvent]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (router.isReady) {
|
|
||||||
const { slug } = router.query;
|
|
||||||
|
|
||||||
|
|
||||||
if (!slug) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let id;
|
|
||||||
|
|
||||||
if (slug.includes("naddr")) {
|
|
||||||
const { data } = nip19.decode(slug)
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
showToast('error', 'Error', 'Resource not found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
id = data?.identifier;
|
|
||||||
} else {
|
|
||||||
id = slug;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchEvent = async (id, retryCount = 0) => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
await ndk.connect();
|
|
||||||
|
|
||||||
const filter = {
|
|
||||||
ids: [id]
|
|
||||||
}
|
|
||||||
|
|
||||||
const event = await ndk.fetchEvent(filter);
|
|
||||||
|
|
||||||
if (event) {
|
|
||||||
setEvent(event);
|
|
||||||
if (user && user.pubkey === event.pubkey) {
|
|
||||||
setAuthorView(true);
|
|
||||||
if (event.kind === 30402) {
|
|
||||||
const decryptedContent = await decryptContent(event.content);
|
|
||||||
setDecryptedContent(decryptedContent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (retryCount < 1) {
|
|
||||||
// Wait for 2 seconds before retrying
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
||||||
return fetchEvent(id, retryCount + 1);
|
|
||||||
} else {
|
|
||||||
setError("Event not found");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching event:', error);
|
|
||||||
if (retryCount < 1) {
|
|
||||||
// Wait for 2 seconds before retrying
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
||||||
return fetchEvent(id, retryCount + 1);
|
|
||||||
} else {
|
|
||||||
setError("Failed to fetch event. Please try again.");
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (ndk && id) {
|
|
||||||
fetchEvent(id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [router.isReady, router.query, ndk, user]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchAuthor = async (pubkey) => {
|
|
||||||
try {
|
|
||||||
await ndk.connect();
|
|
||||||
|
|
||||||
const filter = {
|
|
||||||
kinds: [0],
|
|
||||||
authors: [pubkey]
|
|
||||||
}
|
|
||||||
|
|
||||||
const author = await ndk.fetchEvent(filter);
|
|
||||||
if (author) {
|
|
||||||
const fields = await findKind0Fields(JSON.parse(author.content));
|
|
||||||
console.log("fields", fields);
|
|
||||||
setAuthor(fields);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching author:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (event && ndk) {
|
|
||||||
fetchAuthor(event.pubkey);
|
|
||||||
}
|
|
||||||
}, [ndk, event]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (event) {
|
|
||||||
const parsedEvent = parseEvent(event);
|
|
||||||
console.log("parsedEvent", parsedEvent);
|
|
||||||
setProcessedEvent(parsedEvent);
|
|
||||||
}
|
|
||||||
}, [event]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (processedEvent?.d) {
|
|
||||||
const naddr = nip19.naddrEncode({
|
const naddr = nip19.naddrEncode({
|
||||||
pubkey: processedEvent.pubkey,
|
pubkey: event.pubkey,
|
||||||
kind: processedEvent.kind,
|
kind: event.kind,
|
||||||
identifier: processedEvent.d,
|
identifier: event.d,
|
||||||
relayUrls: appConfig.defaultRelayUrls
|
relayUrls: appConfig.defaultRelayUrls
|
||||||
});
|
});
|
||||||
setNAddress(naddr);
|
setNAddress(naddr);
|
||||||
}
|
}
|
||||||
}, [processedEvent]);
|
}, [event, nAddress]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchAndProcessEvent = async () => {
|
||||||
|
if (!router.isReady || !router.query.slug) return;
|
||||||
|
|
||||||
|
const { slug } = router.query;
|
||||||
|
let id;
|
||||||
|
|
||||||
|
if (slug.includes("naddr")) {
|
||||||
|
const { data } = nip19.decode(slug);
|
||||||
|
if (!data) {
|
||||||
|
showToast('error', 'Error', 'Resource not found');
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
id = data?.identifier;
|
||||||
|
setNAddress(slug);
|
||||||
|
} else {
|
||||||
|
id = slug;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await ndk.connect();
|
||||||
|
const event = await ndk.fetchEvent({ ids: [id] });
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
const parsedEvent = parseEvent(event);
|
||||||
|
setEvent(parsedEvent);
|
||||||
|
await fetchAuthor(event.pubkey);
|
||||||
|
|
||||||
|
const isAuthor = session?.user?.pubkey === event.pubkey;
|
||||||
|
setAuthorView(isAuthor);
|
||||||
|
|
||||||
|
if (parsedEvent.price || (isAuthor && event.kind === 30402)) {
|
||||||
|
const shouldDecrypt = isAuthor ||
|
||||||
|
session?.user?.role?.subscribed ||
|
||||||
|
session?.user?.purchased?.some(purchase => purchase.resourceId === event.d);
|
||||||
|
|
||||||
|
if (shouldDecrypt) {
|
||||||
|
const decrypted = await decryptContent(event.content);
|
||||||
|
setDecryptedContent(decrypted);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showToast('error', 'Error', 'Event not found');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching event:', error);
|
||||||
|
showToast('error', 'Error', 'Failed to fetch event. Please try again.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchAndProcessEvent();
|
||||||
|
}, [router.isReady, router.query, ndk, session, decryptContent, fetchAuthor, showToast]);
|
||||||
|
|
||||||
const handlePaymentSuccess = async (response, newResource) => {
|
const handlePaymentSuccess = async (response, newResource) => {
|
||||||
if (response && response?.preimage) {
|
if (response && response?.preimage) {
|
||||||
@ -200,60 +118,42 @@ export default function Details() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
|
return <div className='w-full h-full flex items-center justify-center mt-24'><ProgressSpinner /></div>
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (!author || !event) return null;
|
||||||
return <div className="w-full mx-auto h-screen">
|
|
||||||
<div className="text-red-500 text-xl">{error}</div>
|
const DetailComponent = event.type === "document" ? DocumentDetails : VideoDetails;
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
{processedEvent && processedEvent.type !== "video" ? (
|
<DetailComponent
|
||||||
<DocumentDetails
|
processedEvent={event}
|
||||||
processedEvent={processedEvent}
|
topics={event.topics}
|
||||||
topics={processedEvent.topics}
|
title={event.title}
|
||||||
title={processedEvent.title}
|
summary={event.summary}
|
||||||
summary={processedEvent.summary}
|
image={event.image}
|
||||||
image={processedEvent.image}
|
price={event.price}
|
||||||
price={processedEvent.price}
|
author={author}
|
||||||
author={author}
|
paidResource={!!event.price}
|
||||||
paidResource={paidResource}
|
nAddress={nAddress}
|
||||||
nAddress={nAddress}
|
decryptedContent={decryptedContent}
|
||||||
decryptedContent={decryptedContent}
|
handlePaymentSuccess={handlePaymentSuccess}
|
||||||
handlePaymentSuccess={handlePaymentSuccess}
|
handlePaymentError={handlePaymentError}
|
||||||
handlePaymentError={handlePaymentError}
|
authorView={authorView}
|
||||||
authorView={authorView}
|
/>
|
||||||
/>
|
{typeof window !== 'undefined' && nAddress !== null && session?.user?.pubkey && (
|
||||||
) : (
|
|
||||||
<VideoDetails
|
|
||||||
processedEvent={processedEvent}
|
|
||||||
topics={processedEvent.topics}
|
|
||||||
title={processedEvent.title}
|
|
||||||
summary={processedEvent.summary}
|
|
||||||
image={processedEvent.image}
|
|
||||||
price={processedEvent.price}
|
|
||||||
author={author}
|
|
||||||
paidResource={paidResource}
|
|
||||||
decryptedContent={decryptedContent}
|
|
||||||
nAddress={nAddress}
|
|
||||||
handlePaymentSuccess={handlePaymentSuccess}
|
|
||||||
handlePaymentError={handlePaymentError}
|
|
||||||
authorView={authorView}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{typeof window !== 'undefined' && nAddress !== null && (
|
|
||||||
<div className='px-4'>
|
<div className='px-4'>
|
||||||
<ZapThreadsWrapper
|
<ZapThreadsWrapper
|
||||||
anchor={nAddress}
|
anchor={nAddress}
|
||||||
user={user?.pubkey || null}
|
user={session?.user?.pubkey || null}
|
||||||
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
|
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
|
||||||
disable="zaps"
|
disable="zaps"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default Details;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user