update replies

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

@@ -1,31 +1,20 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { useLiveThread } from '@app/space/hooks/useLiveThread';
+// import { useLiveThread } from '@app/space/hooks/useLiveThread';
+import { removeBlock } from '@libs/storage';
 
-import { getNoteByID, removeBlock } from '@libs/storage';
-
-import { NoteReplyForm } from '@shared/notes/replies/form';
+import { NoteContent, NoteStats, ThreadUser } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
-import { User } from '@shared/user';
 
-import { useAccount } from '@utils/hooks/useAccount';
-import { parser } from '@utils/parser';
+import { useEvent } from '@utils/hooks/useEvent';
 import { Block } from '@utils/types';
 
 export function ThreadBlock({ params }: { params: Block }) {
-  useLiveThread(params.content);
-
   const queryClient = useQueryClient();
 
-  const { account } = useAccount();
-  const { status, data } = useQuery(['thread', params.content], async () => {
-    const res = await getNoteByID(params.content);
-    res['content'] = parser(res);
-    return res;
-  });
+  const { status, data } = useEvent(params.content);
 
   const block = useMutation({
     mutationFn: (id: string) => {
@@ -36,33 +25,34 @@ export function ThreadBlock({ params }: { params: Block }) {
     },
   });
 
+  // subscribe to live reply
+  // useLiveThread(params.content);
+
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
       <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
       <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>
         ) : (
           <div className="h-min w-full px-3 py-1.5">
-            <div className="rounded-md bg-zinc-900 px-5 pt-5">
-              <User pubkey={data.pubkey} time={data.created_at} />
-              <div className="mt-3">
-                <Link to={`/app/note/${params.content}`}>Focus</Link>
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
+              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <div className="mt-2">
+                <NoteContent content={data.content} />
+              </div>
+              <div>
+                <NoteStats id={data.id} />
               </div>
-            </div>
-            <div className="mt-3 rounded-md bg-zinc-900">
-              {account && (
-                <NoteReplyForm rootID={params.content} userPubkey={account.pubkey} />
-              )}
             </div>
           </div>
         )}
         <div className="px-3">
-          <RepliesList parent_id={params.content} />
+          <RepliesList id={params.content} />
         </div>
       </div>
     </div>