add network to account

src/app/events/index.tsx

@@ -0,0 +1,51 @@
+import { useParams } from 'react-router-dom';
+
+import {
+  NoteActions,
+  NoteContent,
+  NoteReplyForm,
+  NoteStats,
+  ThreadUser,
+} from '@shared/notes';
+import { RepliesList } from '@shared/notes/replies/list';
+import { NoteSkeleton } from '@shared/notes/skeleton';
+
+import { useAccount } from '@utils/hooks/useAccount';
+import { useEvent } from '@utils/hooks/useEvent';
+
+export function EventScreen() {
+  const { id } = useParams();
+  const { account } = useAccount();
+  const { status, data } = useEvent(id);
+
+  return (
+    <div className="mx-auto w-[600px]">
+      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pt-11">
+        {status === 'loading' ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <NoteSkeleton />
+            </div>
+          </div>
+        ) : (
+          <div className="h-min w-full px-3 pt-1.5">
+            <div className="rounded-xl bg-white/10 px-3 pt-3">
+              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <div className="mt-2">
+                <NoteContent content={data.content} />
+              </div>
+              <div>
+                <NoteActions id={data.id} pubkey={data.pubkey} noOpenThread={true} />
+                <NoteStats id={data.id} />
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="px-3">
+          <NoteReplyForm id={id} pubkey={account.pubkey} />
+          <RepliesList id={id} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/note/index.tsx

@@ -1,49 +0,0 @@
-import { useParams } from 'react-router-dom';
-
-import { useLiveThread } from '@app/space/hooks/useLiveThread';
-
-import { NoteMetadata } from '@shared/notes/metadata';
-import { NoteReplyForm } from '@shared/notes/replies/form';
-import { RepliesList } from '@shared/notes/replies/list';
-import { NoteSkeleton } from '@shared/notes/skeleton';
-import { User } from '@shared/user';
-
-import { useAccount } from '@utils/hooks/useAccount';
-import { useEvent } from '@utils/hooks/useEvent';
-
-export function NoteScreen() {
-  const { id } = useParams();
-  const { account } = useAccount();
-  const { status, data } = useEvent(id);
-
-  useLiveThread(id);
-
-  return (
-    <div className="mx-auto w-[600px]">
-      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-16">
-        {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md bg-white/10 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">
-                <NoteMetadata id={data.event_id || id} />
-              </div>
-            </div>
-            <div className="mt-3 rounded-md bg-zinc-900">
-              {account && <NoteReplyForm rootID={id} userPubkey={account.pubkey} />}
-            </div>
-          </div>
-        )}
-        <div className="px-3">
-          <RepliesList id={id} />
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/root.tsx

@@ -27,27 +27,39 @@ export function Root() {
   const { ndk, relayUrls, fetcher } = useNDK();
   const { status, account } = useAccount();
 
-  async function getFollows() {
-    const authors: string[] = [];
+  async function fetchNetwork() {
+    const network = new Set<string>();
 
+    // fetch user's follows
     const user = ndk.getUser({ hexpubkey: account.pubkey });
     const follows = await user.follows();
-
     follows.forEach((follow: NDKUser) => {
-      authors.push(nip19.decode(follow.npub).data as string);
+      network.add(nip19.decode(follow.npub).data as string);
     });
 
-    // update follows in db
-    await updateAccount('follows', authors, account.pubkey);
+    // update user's follows in db
+    await updateAccount('follows', [...network]);
 
-    return authors;
+    // fetch network
+    for (const item of network) {
+      const user = ndk.getUser({ hexpubkey: item });
+      const follows = await user.follows();
+      follows.forEach((follow: NDKUser) => {
+        network.add(nip19.decode(follow.npub).data as string);
+      });
+    }
+
+    // update user's network in db
+    await updateAccount('network', [...network]);
+
+    return [...network];
   }
 
   async function fetchNotes() {
     try {
-      const follows = await getFollows();
+      const network = await fetchNetwork();
 
-      if (follows.length > 0) {
+      if (network.length > 0) {
         let since: number;
         if (totalNotes === 0 || lastLogin === 0) {
           since = nHoursAgo(48);
@@ -57,7 +69,7 @@ export function Root() {
 
         const events = fetcher.allEventsIterator(
           relayUrls,
-          { kinds: [1], authors: follows },
+          { kinds: [1], authors: network },
           { since: since },
           { skipVerification: true }
         );

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

@@ -16,7 +16,7 @@ import { LumeEvent } from '@utils/types';
 
 const ITEM_PER_PAGE = 10;
 
-export function FollowingBlock() {
+export function NetworkBlock() {
   // subscribe for live update
   useNewsfeed();
 
@@ -130,7 +130,7 @@ export function FollowingBlock() {
       ref={parentRef}
       className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
     >
-      <TitleBar title="Your Circle" />
+      <TitleBar title="Network" />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">

src/app/space/index.tsx

@@ -2,9 +2,9 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
 import { FeedBlock } from '@app/space/components/blocks/feed';
-import { FollowingBlock } from '@app/space/components/blocks/following';
 import { HashtagBlock } from '@app/space/components/blocks/hashtag';
 import { ImageBlock } from '@app/space/components/blocks/image';
+import { NetworkBlock } from '@app/space/components/blocks/network';
 import { ThreadBlock } from '@app/space/components/blocks/thread';
 import { UserBlock } from '@app/space/components/blocks/user';
 import { FeedModal } from '@app/space/components/modals/feed';
@@ -53,7 +53,7 @@ export function SpaceScreen() {
 
   return (
     <div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
-      <FollowingBlock />
+      <NetworkBlock />
       {status === 'loading' ? (
         <div className="flex w-[350px] shrink-0 flex-col">
           <div className="flex w-full flex-1 items-center justify-center p-3">