From 12e28edad3f530f80639d5d15dfd8272d81b043b Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 28 Apr 2023 16:36:28 +0700
Subject: [PATCH] update chat

---
 src/app/chat/components/item.tsx              | 46 +++++++++++++++++
 src/app/chat/components/list.tsx              | 36 +++++++++++++
 src/app/chat/components/self.tsx              | 51 +++++++++++++++++++
 src/app/chat/pages/index.page.tsx             |  2 +
 .../newsfeed/pages/following/index.page.tsx   | 11 +---
 src/shared/navigation.tsx                     |  5 +-
 6 files changed, 141 insertions(+), 10 deletions(-)
 create mode 100644 src/app/chat/components/item.tsx
 create mode 100644 src/app/chat/components/list.tsx
 create mode 100644 src/app/chat/components/self.tsx

diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx
new file mode 100644
index 00000000..b8bd7aa3
--- /dev/null
+++ b/src/app/chat/components/item.tsx
@@ -0,0 +1,46 @@
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import { twMerge } from 'tailwind-merge';
+
+export default function ChatsListItem({ pubkey }: { pubkey: string }) {
+  const pageContext = usePageContext();
+
+  const searchParams: any = pageContext.urlParsed.search;
+  const pagePubkey = searchParams.pubkey;
+
+  const { user, isError, isLoading } = useProfile(pubkey);
+
+  return (
+    <>
+      {isError && <div>error</div>}
+      {isLoading && !user ? (
+        <div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
+          <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
+          <div>
+            <div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
+          </div>
+        </div>
+      ) : (
+        <a
+          href={`/app/chat?pubkey=${pubkey}`}
+          className={twMerge(
+            'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
+            pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
+          )}
+        >
+          <div className="relative h-5 w-5 shrink-0 rounded">
+            <img src={user.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded bg-white object-cover" />
+          </div>
+          <div>
+            <h5 className="truncate text-sm font-medium text-zinc-400">
+              {user.display_name || user.name || shortenKey(pubkey)}
+            </h5>
+          </div>
+        </a>
+      )}
+    </>
+  );
+}
diff --git a/src/app/chat/components/list.tsx b/src/app/chat/components/list.tsx
new file mode 100644
index 00000000..8b7ea009
--- /dev/null
+++ b/src/app/chat/components/list.tsx
@@ -0,0 +1,36 @@
+import ChatsListItem from '@lume/app/chat/components/item';
+import ChatsListSelfItem from '@lume/app/chat/components/self';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
+import { getChats } from '@lume/utils/storage';
+
+import useSWR from 'swr';
+
+const fetcher = ([, account]) => getChats(account);
+
+export default function ChatsList() {
+  const { account, isLoading, isError } = useActiveAccount();
+  const { data: chats, error }: any = useSWR(!isLoading && !isError && account ? ['chats', account] : null, fetcher);
+
+  return (
+    <div className="flex flex-col gap-px">
+      <>
+        <ChatsListSelfItem />
+        {error && <div>failed to fetch</div>}
+        {!chats ? (
+          <>
+            <div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
+              <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
+              <div className="h-3 w-full animate-pulse bg-zinc-800"></div>
+            </div>
+            <div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
+              <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
+              <div className="h-3 w-full animate-pulse bg-zinc-800"></div>
+            </div>
+          </>
+        ) : (
+          chats.map((item: { pubkey: string }) => <ChatsListItem key={item.pubkey} pubkey={item.pubkey} />)
+        )}
+      </>
+    </div>
+  );
+}
diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx
new file mode 100644
index 00000000..e97a2a29
--- /dev/null
+++ b/src/app/chat/components/self.tsx
@@ -0,0 +1,51 @@
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import { twMerge } from 'tailwind-merge';
+
+export default function ChatsListSelfItem() {
+  const pageContext = usePageContext();
+
+  const searchParams: any = pageContext.urlParsed.search;
+  const pagePubkey = searchParams.pubkey;
+
+  const { account, isLoading, isError } = useActiveAccount();
+  const profile = account ? JSON.parse(account.metadata) : null;
+
+  return (
+    <>
+      {isError && <div>error</div>}
+      {isLoading && !account ? (
+        <div className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5">
+          <div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800"></div>
+          <div>
+            <div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-sm font-medium"></div>
+          </div>
+        </div>
+      ) : (
+        <a
+          href={`/app/chat?pubkey=${account.pubkey}`}
+          className={twMerge(
+            'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
+            pagePubkey === account.pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
+          )}
+        >
+          <div className="relative h-5 w-5 shrink-0 rounded">
+            <img
+              src={profile?.picture || DEFAULT_AVATAR}
+              alt={account.pubkey}
+              className="h-5 w-5 rounded bg-white object-cover"
+            />
+          </div>
+          <div>
+            <h5 className="truncate text-sm font-medium text-zinc-400">
+              {profile?.display_name || profile?.name || shortenKey(account.pubkey)} (you)
+            </h5>
+          </div>
+        </a>
+      )}
+    </>
+  );
+}
diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx
index 8f0fdb9e..69741796 100644
--- a/src/app/chat/pages/index.page.tsx
+++ b/src/app/chat/pages/index.page.tsx
@@ -31,11 +31,13 @@ export function Page() {
           kinds: [4],
           authors: [key],
           '#p': [account.pubkey],
+          limit: 20,
         },
         {
           kinds: [4],
           authors: [account.pubkey],
           '#p': [key],
+          limit: 20,
         },
       ],
       FULL_RELAYS,
diff --git a/src/app/newsfeed/pages/following/index.page.tsx b/src/app/newsfeed/pages/following/index.page.tsx
index a1391e35..3bcc705b 100644
--- a/src/app/newsfeed/pages/following/index.page.tsx
+++ b/src/app/newsfeed/pages/following/index.page.tsx
@@ -3,7 +3,7 @@ import { NoteBase } from '@lume/app/newsfeed/components/note/base';
 import { Placeholder } from '@lume/app/newsfeed/components/note/placeholder';
 import { NoteQuoteRepost } from '@lume/app/newsfeed/components/note/quoteRepost';
 import { hasNewerNoteAtom } from '@lume/stores/note';
-import { countTotalNotes, getNotes } from '@lume/utils/storage';
+import { getNotes } from '@lume/utils/storage';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -14,13 +14,6 @@ import { useEffect, useRef } from 'react';
 const ITEM_PER_PAGE = 20;
 const TIME = Math.floor(Date.now() / 1000);
 
-let totalNotes = 0;
-
-if (typeof window !== 'undefined') {
-  const result = await countTotalNotes();
-  totalNotes = result.total;
-}
-
 export function Page() {
   const [hasNewerNote] = useAtom(hasNewerNoteAtom);
 
@@ -29,7 +22,7 @@ export function Page() {
     queryFn: async ({ pageParam = 0 }) => {
       return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
     },
-    getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
   });
 
   const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 75c034a9..612e8b6a 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -1,4 +1,5 @@
 import ChannelsList from '@lume/app/channel/components/list';
+import ChatsList from '@lume/app/chat/components/list';
 import ActiveLink from '@lume/shared/activeLink';
 
 import { Disclosure } from '@headlessui/react';
@@ -76,7 +77,9 @@ export default function Navigation() {
               </div>
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
             </Disclosure.Button>
-            <Disclosure.Panel></Disclosure.Panel>
+            <Disclosure.Panel>
+              <ChatsList />
+            </Disclosure.Panel>
           </div>
         )}
       </Disclosure>