add network to account

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

@@ -0,0 +1,188 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+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 { 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 NetworkBlock() {
+  // subscribe for live update
+  useNewsfeed();
+
+  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: ['newsfeed-circle'],
+      queryFn: async ({ pageParam = 0 }) => {
+        return await getNotes(ITEM_PER_PAGE, pageParam);
+      },
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
+  const parentRef = useRef();
+
+  const rowVirtualizer = useVirtualizer({
+    count: hasNextPage ? notes.length + 1 : notes.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 500,
+    overscan: 2,
+  });
+
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+
+  useEffect(() => {
+    const [lastItem] = [...itemsVirtualizer].reverse();
+
+    if (!lastItem) {
+      return;
+    }
+
+    if (lastItem.index >= notes.length - 1 && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [notes.length, fetchNextPage, itemsVirtualizer]);
+
+  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={(root || reply) + (note.event_id || note.id) + index}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteThread event={note} root={root} reply={reply} />
+              </div>
+            );
+          } else {
+            return (
+              <div
+                key={(note.event_id || note.id) + index}
+                data-index={index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <NoteKind_1 event={note} skipMetadata={false} />
+              </div>
+            );
+          }
+        }
+        case 6:
+          return (
+            <div
+              key={(note.event_id || note.id) + index}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <Repost key={note.event_id} event={note} />
+            </div>
+          );
+        case 1063:
+          return (
+            <div
+              key={(note.event_id || note.id) + index}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKind_1063 key={note.event_id} event={note} />
+            </div>
+          );
+        default:
+          return (
+            <div
+              key={(note.event_id || note.id) + index}
+              data-index={index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <NoteKindUnsupport key={note.event_id} event={note} />
+            </div>
+          );
+      }
+    },
+    [notes]
+  );
+
+  return (
+    <div
+      ref={parentRef}
+      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
+    >
+      <TitleBar title="Network" />
+      <div className="h-full">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : itemsVirtualizer.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-white">
+                  You not have any posts to see yet
+                  <br />
+                  Follow more people to have more fun.
+                </p>
+                <Link
+                  to="/app/trending"
+                  className="inline-flex w-max rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
+                >
+                  Trending
+                </Link>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div
+            className="relative w-full"
+            style={{
+              height: `${totalSize}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-0 w-full"
+              style={{
+                transform: `translateY(${
+                  itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin
+                }px)`,
+              }}
+            >
+              {itemsVirtualizer.map((virtualRow) => renderItem(virtualRow.index))}
+            </div>
+          </div>
+        )}
+        {isFetchingNextPage && (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}