From 29d40ed4066c4ddf88d7a3fc97ec08bdcb919f17 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 19 Jul 2023 17:07:25 +0700
Subject: [PATCH] render reply and sub reply accordingly

---
 src/app/space/components/blocks/thread.tsx |  8 ++--
 src/shared/accounts/active.tsx             |  2 +-
 src/shared/notes/actions.tsx               |  2 +-
 src/shared/notes/index.tsx                 |  1 +
 src/shared/notes/mentions/note.tsx         |  2 +-
 src/shared/notes/preview/image.tsx         |  2 +-
 src/shared/notes/preview/link.tsx          |  2 +-
 src/shared/notes/preview/video.tsx         |  2 +-
 src/shared/notes/replies/form.tsx          | 31 ++++++++++---
 src/shared/notes/replies/item.tsx          | 20 ++++++---
 src/shared/notes/replies/list.tsx          | 52 ++++++++++++++++------
 src/shared/notes/replies/sub.tsx           | 24 ++++++++++
 src/utils/hooks/useProfile.tsx             |  3 ++
 src/utils/types.d.ts                       |  1 +
 14 files changed, 118 insertions(+), 34 deletions(-)
 create mode 100644 src/shared/notes/replies/sub.tsx

diff --git a/src/app/space/components/blocks/thread.tsx b/src/app/space/components/blocks/thread.tsx
index b0a664c0..0946cd06 100644
--- a/src/app/space/components/blocks/thread.tsx
+++ b/src/app/space/components/blocks/thread.tsx
@@ -10,11 +10,13 @@ import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
+import { useAccount } from '@utils/hooks/useAccount';
 import { useEvent } from '@utils/hooks/useEvent';
 import { Block } from '@utils/types';
 
 export function ThreadBlock({ params }: { params: Block }) {
   const { status, data } = useEvent(params.content);
+  const { account } = useAccount();
 
   // subscribe to live reply
   // useLiveThread(params.content);
@@ -22,7 +24,7 @@ export function ThreadBlock({ params }: { params: Block }) {
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
       <TitleBar id={params.id} title={params.title} />
-      <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
+      <div className="scrollbar-hide flex h-full w-full flex-col gap-3 overflow-y-auto pb-20 pt-1.5">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
@@ -30,7 +32,7 @@ export function ThreadBlock({ params }: { params: Block }) {
             </div>
           </div>
         ) : (
-          <div className="h-min w-full px-3 py-1.5">
+          <div className="h-min w-full px-3 pt-1.5">
             <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
               <ThreadUser pubkey={data.pubkey} time={data.created_at} />
               <div className="mt-2">
@@ -44,7 +46,7 @@ export function ThreadBlock({ params }: { params: Block }) {
           </div>
         )}
         <div className="px-3">
-          <NoteReplyForm id={params.content} />
+          <NoteReplyForm id={params.content} pubkey={account.pubkey} />
           <RepliesList id={params.content} />
         </div>
       </div>
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index ec83e404..6d97df22 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -94,7 +94,7 @@ export function ActiveAccount({ data }: { data: any }) {
   return (
     <Link to={`/app/user/${data.pubkey}`} className="relative inline-block h-9 w-9">
       <Image
-        src={user.image}
+        src={user?.picture || user?.image}
         fallback={DEFAULT_AVATAR}
         alt={data.npub}
         className="h-9 w-9 rounded-md object-cover"
diff --git a/src/shared/notes/actions.tsx b/src/shared/notes/actions.tsx
index 8025508c..a2ea5352 100644
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -23,7 +23,7 @@ export function NoteActions({
 
   return (
     <Tooltip.Provider>
-      <div className="-ml-1 mt-4 inline-flex w-full items-center">
+      <div className="-ml-1 mt-2 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
           <NoteReply id={id} pubkey={pubkey} />
           <NoteReaction id={id} pubkey={pubkey} />
diff --git a/src/shared/notes/index.tsx b/src/shared/notes/index.tsx
index 0f7531e8..2024abfc 100644
--- a/src/shared/notes/index.tsx
+++ b/src/shared/notes/index.tsx
@@ -10,6 +10,7 @@ export * from './preview/video';
 export * from './replies/form';
 export * from './replies/item';
 export * from './replies/list';
+export * from './replies/sub';
 export * from './kinds/kind1';
 export * from './kinds/kind1063';
 export * from './metadata';
diff --git a/src/shared/notes/mentions/note.tsx b/src/shared/notes/mentions/note.tsx
index 51471b3e..722d2e33 100644
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -29,7 +29,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mt-3 rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
+      className="mb-2 mt-3 rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
     >
       {status === 'loading' ? (
         <NoteSkeleton />
diff --git a/src/shared/notes/preview/image.tsx b/src/shared/notes/preview/image.tsx
index 43df8a58..c7aca728 100644
--- a/src/shared/notes/preview/image.tsx
+++ b/src/shared/notes/preview/image.tsx
@@ -2,7 +2,7 @@ import { Image } from '@shared/image';
 
 export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
   return (
-    <div className="mt-3 max-w-[420px] overflow-hidden">
+    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden">
       <div className="flex flex-col gap-2">
         {urls.map((url) => (
           <div key={url} className="relative min-w-0 shrink-0 grow-0 basis-full">
diff --git a/src/shared/notes/preview/link.tsx b/src/shared/notes/preview/link.tsx
index 5f12f18f..4d443422 100644
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -7,7 +7,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
   const domain = new URL(urls[0]);
 
   return (
-    <div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
+    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
       {status === 'loading' ? (
         <div className="flex flex-col">
           <div className="h-44 w-full animate-pulse bg-zinc-700" />
diff --git a/src/shared/notes/preview/video.tsx b/src/shared/notes/preview/video.tsx
index c5c0ebf1..85a76580 100644
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@@ -2,7 +2,7 @@ import ReactPlayer from 'react-player/es6';
 
 export function VideoPreview({ urls }: { urls: string[] }) {
   return (
-    <div className="relative mt-3 flex w-full max-w-[420px] flex-col gap-2">
+    <div className="relative mb-2 mt-3 flex w-full max-w-[420px] flex-col gap-2">
       {urls.map((url) => (
         <ReactPlayer
           key={url}
diff --git a/src/shared/notes/replies/form.tsx b/src/shared/notes/replies/form.tsx
index e37d67e7..9225b6d6 100644
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -1,13 +1,18 @@
 import { useState } from 'react';
 
 import { Button } from '@shared/button';
+import { Image } from '@shared/image';
 
-import { FULL_RELAYS } from '@stores/constants';
+import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
 
+import { useProfile } from '@utils/hooks/useProfile';
 import { usePublish } from '@utils/hooks/usePublish';
+import { displayNpub } from '@utils/shortenKey';
 
-export function NoteReplyForm({ id }: { id: string }) {
+export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   const publish = usePublish();
+
+  const { status, user } = useProfile(pubkey);
   const [value, setValue] = useState('');
 
   const submit = () => {
@@ -21,23 +26,39 @@ export function NoteReplyForm({ id }: { id: string }) {
   };
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
       <div className="relative w-full flex-1 overflow-hidden">
         <textarea
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Reply to this thread..."
-          className="relative h-20 w-full resize-none rounded-md bg-transparent px-5 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+          className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
           spellCheck={false}
         />
       </div>
-      <div className="w-full border-t border-zinc-800 px-5 py-3">
+      <div className="w-full border-t border-zinc-800 px-3 py-3">
         {status === 'loading' ? (
           <div>
             <p>Loading...</p>
           </div>
         ) : (
           <div className="flex w-full items-center justify-between">
+            <div className="inline-flex items-center gap-3">
+              <div className="relative h-11 w-11 shrink-0 rounded">
+                <Image
+                  src={user?.picture || user?.image}
+                  fallback={DEFAULT_AVATAR}
+                  alt={pubkey}
+                  className="h-11 w-11 rounded-lg bg-white object-cover"
+                />
+              </div>
+              <div>
+                <p className="mb-1 text-sm leading-none text-zinc-400">Reply as</p>
+                <p className="text-sm font-medium leading-none text-zinc-100">
+                  {user?.nip05 || user?.name || displayNpub(pubkey, 16)}
+                </p>
+              </div>
+            </div>
             <div className="flex items-center gap-2">
               <Button
                 onClick={() => submit()}
diff --git a/src/shared/notes/replies/item.tsx b/src/shared/notes/replies/item.tsx
index 98b5d19b..dea8373b 100644
--- a/src/shared/notes/replies/item.tsx
+++ b/src/shared/notes/replies/item.tsx
@@ -1,25 +1,33 @@
-import { NoteActions, NoteContent } from '@shared/notes';
+import { useMemo } from 'react';
+
+import { NoteActions, NoteContent, SubReply } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { parser } from '@utils/parser';
 import { LumeEvent } from '@utils/types';
 
-export function Reply({ data }: { data: LumeEvent }) {
-  const content = parser(data);
+export function Reply({ event }: { event: LumeEvent }) {
+  const content = useMemo(() => parser(event), [event]);
 
   return (
     <div className="h-min w-full py-1.5">
       <div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
         <div className="relative flex flex-col">
-          <User pubkey={data.pubkey} time={data.created_at} />
+          <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={content} />
-              <NoteActions id={data.event_id || data.id} pubkey={data.pubkey} />
+              <NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
             </div>
           </div>
-          <div className="pb-3" />
+          <div>
+            {event.replies ? (
+              event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
+            ) : (
+              <div className="pb-3" />
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/shared/notes/replies/list.tsx b/src/shared/notes/replies/list.tsx
index 7be43a9a..ce1be588 100644
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
 
-import { Reply } from '@shared/notes/replies/item';
+import { NoteSkeleton, Reply } from '@shared/notes';
 
 import { LumeEvent } from '@utils/types';
 
@@ -15,26 +15,50 @@ export function RepliesList({ id }: { id: string }) {
       { kinds: [1], '#e': [id] },
       { since: 0 }
     )) as unknown as LumeEvent[];
+    if (events.length > 0) {
+      const replies = new Set();
+      events.forEach((event) => {
+        const tags = event.tags.filter((el) => el[0] === 'e' && el[1] !== id);
+        if (tags.length > 0) {
+          tags.forEach((tag) => {
+            const rootIndex = events.findIndex((el) => el.id === tag[1]);
+            if (rootIndex) {
+              const rootEvent = events[rootIndex];
+              if (rootEvent.replies) {
+                rootEvent.replies.push(event);
+              } else {
+                rootEvent.replies = [event];
+              }
+              replies.add(event.id);
+            }
+          });
+        }
+      });
+      const cleanEvents = events.filter((ev) => !replies.has(ev.id));
+      return cleanEvents;
+    }
     return events;
   });
 
+  if (status === 'loading') {
+    return (
+      <div className="mt-3">
+        <div className="flex flex-col">
+          <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+            <NoteSkeleton />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="mt-3">
       <div className="mb-2">
-        <h5 className="text-lg font-semibold text-zinc-300">Replies</h5>
+        <h5 className="text-lg font-semibold text-zinc-300">{data.length} replies</h5>
       </div>
       <div className="flex flex-col">
-        {status === 'loading' ? (
-          <div className="flex gap-2 px-3 py-4">
-            <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
-            <div className="flex w-full flex-1 flex-col justify-center gap-1">
-              <div className="flex items-baseline gap-2 text-base">
-                <div className="h-2.5 w-20 animate-pulse rounded-sm bg-zinc-800" />
-              </div>
-              <div className="h-4 w-44 animate-pulse rounded-sm bg-zinc-800" />
-            </div>
-          </div>
-        ) : data.length === 0 ? (
+        {data?.length === 0 ? (
           <div className="px=3">
             <div className="flex w-full items-center justify-center rounded-xl bg-zinc-900">
               <div className="flex flex-col items-center justify-center gap-2 py-6">
@@ -44,7 +68,7 @@ export function RepliesList({ id }: { id: string }) {
             </div>
           </div>
         ) : (
-          data.map((event: NDKEvent) => <Reply key={event.id} data={event} />)
+          data.reverse().map((event: NDKEvent) => <Reply key={event.id} event={event} />)
         )}
       </div>
     </div>
diff --git a/src/shared/notes/replies/sub.tsx b/src/shared/notes/replies/sub.tsx
new file mode 100644
index 00000000..57b3ad38
--- /dev/null
+++ b/src/shared/notes/replies/sub.tsx
@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import { NoteActions, NoteContent } from '@shared/notes';
+import { User } from '@shared/user';
+
+import { parser } from '@utils/parser';
+import { LumeEvent } from '@utils/types';
+
+export function SubReply({ event }: { event: LumeEvent }) {
+  const content = useMemo(() => parser(event), [event]);
+
+  return (
+    <div className="relative mb-3 mt-5 flex flex-col">
+      <User pubkey={event.pubkey} time={event.created_at} />
+      <div className="relative z-20 -mt-6 flex items-start gap-3">
+        <div className="w-11 shrink-0" />
+        <div className="flex-1">
+          <NoteContent content={content} />
+          <NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/utils/hooks/useProfile.tsx b/src/utils/hooks/useProfile.tsx
index 4b1363f6..8855546b 100644
--- a/src/utils/hooks/useProfile.tsx
+++ b/src/utils/hooks/useProfile.tsx
@@ -16,6 +16,7 @@ export function useProfile(pubkey: string, fallback?: string) {
       const current = Math.floor(Date.now() / 1000);
       const cache = await getUserMetadata(pubkey);
       if (cache && parseInt(cache.created_at) + 86400 >= current) {
+        console.log('cache hit - ', cache);
         return cache;
       } else {
         const filter: NDKFilter = { kinds: [0], authors: [pubkey] };
@@ -24,6 +25,8 @@ export function useProfile(pubkey: string, fallback?: string) {
         if (latest) {
           await createMetadata(pubkey, pubkey, latest.content);
           return JSON.parse(latest.content);
+        } else {
+          return null;
         }
       }
     } else {
diff --git a/src/utils/types.d.ts b/src/utils/types.d.ts
index f5b2b7ba..2c7a807b 100644
--- a/src/utils/types.d.ts
+++ b/src/utils/types.d.ts
@@ -3,6 +3,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 export interface LumeEvent extends NDKEvent {
   event_id?: string;
   parent_id?: string;
+  replies?: LumeEvent[];
 }
 
 export interface Account {