Fix details page to prevent invoice reloading on tab change

src/pages/details/[slug]/index.js

@@ -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 { nip19, nip04 } from 'nostr-tools';
+import { nip19 } from 'nostr-tools';
 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 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 [processedEvent, setProcessedEvent] = useState({});
     const [author, setAuthor] = useState(null);
     const [nAddress, setNAddress] = useState(null);
-    const [paidResource, setPaidResource] = useState(false);
     const [decryptedContent, setDecryptedContent] = useState(null);
     const [authorView, setAuthorView] = useState(false);
     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 { encryptContent } = useEncryptContent();
+    const router = useRouter();
     const { showToast } = useToast();
 
-    const router = useRouter();
+    const fetchAuthor = useCallback(async (pubkey) => {
+        if (!pubkey) return;
+        const author = await ndk.getUser({ pubkey });
+        const profile = await author.fetchProfile();
+        const fields = await findKind0Fields(profile);
+        if (fields) {
+            setAuthor(fields);
+        }
+    }, [ndk]);
 
     useEffect(() => {
-        if (session) {
+        if (event?.d && !nAddress) {
-            setUser(session.user);
+            const naddr = nip19.naddrEncode({
+                pubkey: event.pubkey,
+                kind: event.kind,
+                identifier: event.d,
+                relayUrls: appConfig.defaultRelayUrls
+            });
+            setNAddress(naddr);
         }
-    }, [session]);
+    }, [event, nAddress]);
 
     useEffect(() => {
-        if (processedEvent.price) {
+        const fetchAndProcessEvent = async () => {
-            setPaidResource(true);
+            if (!router.isReady || !router.query.slug) return;
-        }
-    }, [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)
+                const { data } = nip19.decode(slug);
-
                 if (!data) {
                     showToast('error', 'Error', 'Resource not found');
+                    setLoading(false);
                     return;
                 }
-                
                 id = data?.identifier;
+                setNAddress(slug);
             } else {
                 id = slug;
             }
 
-            const fetchEvent = async (id, retryCount = 0) => {
-                setLoading(true);
-                setError(null);
             try {
                 await ndk.connect();
-
+                const event = await ndk.fetchEvent({ ids: [id] });
-                    const filter = {
-                        ids: [id]
-                    }
-
-                    const event = await ndk.fetchEvent(filter);
 
                 if (event) {
-                        setEvent(event);
+                    const parsedEvent = parseEvent(event);
-                        if (user && user.pubkey === event.pubkey) {
+                    setEvent(parsedEvent);
-                            setAuthorView(true);
+                    await fetchAuthor(event.pubkey);
-                            if (event.kind === 30402) {
+
-                                const decryptedContent = await decryptContent(event.content);
+                    const isAuthor = session?.user?.pubkey === event.pubkey;
-                                setDecryptedContent(decryptedContent);
+                    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 {
-                        if (retryCount < 1) {
+                    showToast('error', 'Error', 'Event not found');
-                            // 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) {
+                showToast('error', 'Error', 'Failed to fetch event. Please try again.');
-                        // 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) {
+        fetchAndProcessEvent();
-                fetchEvent(id);
+    }, [router.isReady, router.query, ndk, session, decryptContent, fetchAuthor, showToast]);
-            }
-        }
-    }, [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({
-                pubkey: processedEvent.pubkey,
-                kind: processedEvent.kind,
-                identifier: processedEvent.d,
-                relayUrls: appConfig.defaultRelayUrls
-            });
-            setNAddress(naddr);
-        }
-    }, [processedEvent]);
 
     const handlePaymentSuccess = async (response, newResource) => {
         if (response && response?.preimage) {
@@ -200,60 +118,42 @@ export default function Details() {
     }
 
     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 (
-        <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}
-                    paidResource={paidResource}
+                paidResource={!!event.price}
                 nAddress={nAddress}
                 decryptedContent={decryptedContent}
                 handlePaymentSuccess={handlePaymentSuccess}
                 handlePaymentError={handlePaymentError}
                 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'>
                     <ZapThreadsWrapper
                         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/"
                         disable="zaps"
                     />
                 </div>
             )}
-        </div>
+        </>
     );
-}
+};
+
+export default Details;