update thread

src/app/space/components/blocks/thread.tsx

@@ -1,3 +1,4 @@
+import { useLiveThread } from "@app/space/hooks/useLiveThread";
 import { getNoteByID, removeBlock } from "@libs/storage";
 import { Kind1 } from "@shared/notes/contents/kind1";
 import { Kind1063 } from "@shared/notes/contents/kind1063";
@@ -11,14 +12,15 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { parser } from "@utils/parser";
 
 export function ThreadBlock({ params }: { params: any }) {
+	useLiveThread(params.content);
+
 	const queryClient = useQueryClient();
 
-	const { status, data, isFetching } = useQuery(
-		["thread", params.content],
-		async () => {
-			return await getNoteByID(params.content);
-		},
-	);
+	const { status, data } = useQuery(["thread", params.content], async () => {
+		const res = await getNoteByID(params.content);
+		res["content"] = parser(res);
+		return res;
+	});
 
 	const block = useMutation({
 		mutationFn: (id: string) => {
@@ -29,13 +31,11 @@ export function ThreadBlock({ params }: { params: any }) {
 		},
 	});
 
-	const content = data ? parser(data) : null;
-
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
 			<TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
 			<div className="scrollbar-hide flex w-full h-full flex-col gap-1.5 pt-1.5 pb-20 overflow-y-auto">
-				{status === "loading" || isFetching ? (
+				{status === "loading" ? (
 					<div className="px-3 py-1.5">
 						<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
 							<NoteSkeleton />
@@ -46,13 +46,16 @@ export function ThreadBlock({ params }: { params: any }) {
 						<div className="rounded-md bg-zinc-900 px-5 pt-5">
 							<User pubkey={data.pubkey} time={data.created_at} />
 							<div className="mt-3">
-								{data.kind === 1 && <Kind1 content={content} />}
+								{data.kind === 1 && <Kind1 content={data.content} />}
 								{data.kind === 1063 && <Kind1063 metadata={data.tags} />}
-								<NoteMetadata id={params.content} eventPubkey={data.pubkey} />
+								<NoteMetadata
+									id={data.event_id || params.content}
+									eventPubkey={data.pubkey}
+								/>
 							</div>
 						</div>
 						<div className="mt-3 bg-zinc-900 rounded-md">
-							<NoteReplyForm id={data.id} />
+							<NoteReplyForm id={params.content} />
 						</div>
 					</div>
 				)}