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">