diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx index e5fa208f..87dbd82e 100644 --- a/src/components/note/parent.tsx +++ b/src/components/note/parent.tsx @@ -15,7 +15,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) { const [event, setEvent] = useState(null); const unsubscribe = useRef(null); - const content = event ? contentParser(event?.content, event.tags) : ''; + const content = event ? contentParser(event.content, event.tags) : ''; const fetchEvent = useCallback(async () => { const { createNote } = await import('@utils/bindings'); diff --git a/src/components/note/quote.tsx b/src/components/note/quote.tsx index 4e91f61b..d683a548 100644 --- a/src/components/note/quote.tsx +++ b/src/components/note/quote.tsx @@ -14,7 +14,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) { const [event, setEvent] = useState(null); const unsubscribe = useRef(null); - const content = contentParser(event.content, event.tags); + const content = event ? contentParser(event.content, event.tags) : ''; const fetchEvent = useCallback(async () => { const { createNote } = await import('@utils/bindings'); diff --git a/src/components/note/quoteRepost.tsx b/src/components/note/quoteRepost.tsx index a30ea812..d9ac2016 100644 --- a/src/components/note/quoteRepost.tsx +++ b/src/components/note/quoteRepost.tsx @@ -9,6 +9,8 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event: if (event.content.length > 0) { note = ; + } else { + note = ; } return note; diff --git a/src/components/note/rootNote.tsx b/src/components/note/rootNote.tsx index 515fc1f1..ea657c52 100644 --- a/src/components/note/rootNote.tsx +++ b/src/components/note/rootNote.tsx @@ -1,14 +1,20 @@ import NoteMetadata from '@components/note/metadata'; +import { RelayContext } from '@components/relaysProvider'; import { UserExtend } from '@components/user/extend'; import { contentParser } from '@utils/parser'; import { useRouter } from 'next/navigation'; -import { memo } from 'react'; +import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react'; export const RootNote = memo(function RootNote({ event }: { event: any }) { const router = useRouter(); - const content = contentParser(event.content, event.tags); + const [pool, relays]: any = useContext(RelayContext); + + const [data, setData] = useState(null); + const [content, setContent] = useState(''); + + const unsubscribe = useRef(null); const openUserPage = (e) => { e.stopPropagation(); @@ -24,26 +30,88 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) { } }; - return ( -
openThread(e)} className="relative z-10 flex flex-col"> -
openUserPage(e)}> - + const fetchEvent = useCallback( + async (id: string) => { + unsubscribe.current = pool.subscribe( + [ + { + ids: [id], + kinds: [1], + }, + ], + relays, + (event: any) => { + setData(event); + setContent(contentParser(event.content, event.tags)); + }, + undefined, + undefined, + { + unsubscribeOnEose: true, + } + ); + }, + [pool, relays] + ); + + useEffect(() => { + if (typeof event === 'object') { + setData(event); + setContent(contentParser(event.content, event.tags)); + } else { + fetchEvent(event); + } + }, [event, fetchEvent]); + + if (data) { + return ( +
openThread(e)} className="relative z-10 flex flex-col"> +
openUserPage(e)}> + +
+
+
+
+ {content} +
+
+
+
e.stopPropagation()} className="mt-5 pl-[52px]"> + +
-
-
-
- {content} + ); + } else { + return ( +
+
+
+
+
+
+
+ ยท +
+
+
+
+
+
+
+
+
+
+
+
+
-
e.stopPropagation()} className="mt-5 pl-[52px]"> - -
-
- ); + ); + } });