refactor note component

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

@@ -1,14 +1,16 @@
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { getNotesByAuthors, removeBlock } from '@libs/storage';
 
-import { Note } from '@shared/notes/note';
+import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
+import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
+import { LumeEvent } from '@utils/types';
+
 const ITEM_PER_PAGE = 10;
 
 export function FeedBlock({ params }: { params: any }) {
@@ -55,16 +57,70 @@ export function FeedBlock({ params }: { params: any }) {
     },
   });
 
-  const renderItem = (index: string | number) => {
-    const note = notes[index];
-
-    if (!note) return;
-    return (
-      <div key={index} data-index={index} ref={rowVirtualizer.measureElement}>
-        <Note event={note} />
-      </div>
-    );
-  };
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const note: LumeEvent = notes[index];
+      if (!note) return;
+      switch (note.kind) {
+        case 1: {
+          const root = note.tags.find((el) => el[3] === 'root')?.[1];
+          const reply = note.tags.find((el) => el[3] === 'reply')?.[1];
+          if (root || reply) {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteThread event={note} root={root} reply={reply} />
+              </div>
+            );
+          } else {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteKind_1 event={note} skipMetadata={false} />
+              </div>
+            );
+          }
+        }
+        case 6:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <Repost key={note.event_id} event={note} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKind_1063 key={note.event_id} event={note} />
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKindUnsupport key={note.event_id} event={note} />
+            </div>
+          );
+      }
+    },
+    [notes]
+  );
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">

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

@@ -1,18 +1,21 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useNewsfeed } from '@app/space/hooks/useNewsfeed';
 
 import { getNotes } from '@libs/storage';
 
-import { Note } from '@shared/notes/note';
+import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
+import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
 import { useNote } from '@stores/note';
 
+import { LumeEvent } from '@utils/types';
+
 const ITEM_PER_PAGE = 10;
 
 export function FollowingBlock() {
@@ -66,19 +69,76 @@ export function FollowingBlock() {
     toggleHasNewNote(false);
   };
 
-  const renderItem = (index: string | number) => {
-    const note = notes[index];
-    if (!note) return;
-    return (
-      <div
-        key={note.event_id || note.id}
-        data-index={index}
-        ref={rowVirtualizer.measureElement}
-      >
-        <Note event={note} />
-      </div>
-    );
-  };
+  const renderItem = useCallback(
+    (index: string | number) => {
+      const note: LumeEvent = notes[index];
+      if (!note) return;
+      switch (note.kind) {
+        case 1: {
+          let root: string;
+          let reply: string;
+          if (note.tags?.[0]?.[0] === 'e' && !note.tags?.[0]?.[3]) {
+            root = note.tags[0][1];
+          } else {
+            root = note.tags.find((el) => el[3] === 'root')?.[1];
+            reply = note.tags.find((el) => el[3] === 'reply')?.[1];
+          }
+          if (root || reply) {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteThread event={note} root={root} reply={reply} />
+              </div>
+            );
+          } else {
+            return (
+              <div
+                key={note.event_id || note.id}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteKind_1 event={note} skipMetadata={false} />
+              </div>
+            );
+          }
+        }
+        case 6:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <Repost key={note.event_id} event={note} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKind_1063 key={note.event_id} event={note} />
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={note.event_id || note.id}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKindUnsupport key={note.event_id} event={note} />
+            </div>
+          );
+      }
+    },
+    [notes]
+  );
 
   return (
     <div className="relative w-[400px] shrink-0 border-r border-zinc-900">

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

@@ -5,8 +5,6 @@ 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';
 import { NoteMetadata } from '@shared/notes/metadata';
 import { NoteReplyForm } from '@shared/notes/replies/form';
 import { RepliesList } from '@shared/notes/replies/list';
@@ -53,12 +51,6 @@ 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={data.content} />}
-                {data.kind === 1063 && <Kind1063 metadata={data.tags} />}
-                <NoteMetadata
-                  id={data.event_id || params.content}
-                  eventPubkey={data.pubkey}
-                />
                 <Link to={`/app/note/${params.content}`}>Focus</Link>
               </div>
             </div>