From c9c8b57e5a2cff155aa67587825df1da440f13d2 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:00:18 +0700
Subject: [PATCH] updated root note

---
 src/components/note/parent.tsx      |   2 +-
 src/components/note/quote.tsx       |   2 +-
 src/components/note/quoteRepost.tsx |   2 +
 src/components/note/rootNote.tsx    | 108 ++++++++++++++++++++++------
 4 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
index e5fa208f..87dbd82e 100644
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@@ -15,7 +15,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const [event, setEvent] = useState(null);
   const unsubscribe = useRef(null);
 
-  const content = event ? contentParser(event?.content, event.tags) : '';
+  const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
diff --git a/src/components/note/quote.tsx b/src/components/note/quote.tsx
index 4e91f61b..d683a548 100644
--- a/src/components/note/quote.tsx
+++ b/src/components/note/quote.tsx
@@ -14,7 +14,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   const [event, setEvent] = useState(null);
   const unsubscribe = useRef(null);
 
-  const content = contentParser(event.content, event.tags);
+  const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
     const { createNote } = await import('@utils/bindings');
diff --git a/src/components/note/quoteRepost.tsx b/src/components/note/quoteRepost.tsx
index a30ea812..d9ac2016 100644
--- a/src/components/note/quoteRepost.tsx
+++ b/src/components/note/quoteRepost.tsx
@@ -9,6 +9,8 @@ export const NoteQuoteRepost = memo(function NoteQuoteRepost({ event }: { event:
 
     if (event.content.length > 0) {
       note = <RootNote event={JSON.parse(event.content)} />;
+    } else {
+      note = <RootNote event={event.tags[0][1]} />;
     }
 
     return note;
diff --git a/src/components/note/rootNote.tsx b/src/components/note/rootNote.tsx
index 515fc1f1..ea657c52 100644
--- a/src/components/note/rootNote.tsx
+++ b/src/components/note/rootNote.tsx
@@ -1,14 +1,20 @@
 import NoteMetadata from '@components/note/metadata';
+import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
 import { contentParser } from '@utils/parser';
 
 import { useRouter } from 'next/navigation';
-import { memo } from 'react';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export const RootNote = memo(function RootNote({ event }: { event: any }) {
   const router = useRouter();
-  const content = contentParser(event.content, event.tags);
+  const [pool, relays]: any = useContext(RelayContext);
+
+  const [data, setData] = useState(null);
+  const [content, setContent] = useState('');
+
+  const unsubscribe = useRef(null);
 
   const openUserPage = (e) => {
     e.stopPropagation();
@@ -24,26 +30,88 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
     }
   };
 
-  return (
-    <div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
-      <div onClick={(e) => openUserPage(e)}>
-        <UserExtend pubkey={event.pubkey} time={event.created_at} />
+  const fetchEvent = useCallback(
+    async (id: string) => {
+      unsubscribe.current = pool.subscribe(
+        [
+          {
+            ids: [id],
+            kinds: [1],
+          },
+        ],
+        relays,
+        (event: any) => {
+          setData(event);
+          setContent(contentParser(event.content, event.tags));
+        },
+        undefined,
+        undefined,
+        {
+          unsubscribeOnEose: true,
+        }
+      );
+    },
+    [pool, relays]
+  );
+
+  useEffect(() => {
+    if (typeof event === 'object') {
+      setData(event);
+      setContent(contentParser(event.content, event.tags));
+    } else {
+      fetchEvent(event);
+    }
+  }, [event, fetchEvent]);
+
+  if (data) {
+    return (
+      <div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
+        <div onClick={(e) => openUserPage(e)}>
+          <UserExtend pubkey={data.pubkey} time={data.created_at} />
+        </div>
+        <div className="-mt-5 pl-[52px]">
+          <div className="flex flex-col gap-2">
+            <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
+              {content}
+            </div>
+          </div>
+        </div>
+        <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
+          <NoteMetadata
+            eventID={data.id}
+            eventPubkey={data.pubkey}
+            eventContent={data.content}
+            eventTime={data.created_at}
+          />
+        </div>
       </div>
-      <div className="-mt-5 pl-[52px]">
-        <div className="flex flex-col gap-2">
-          <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-            {content}
+    );
+  } else {
+    return (
+      <div className="relative z-10 flex h-min animate-pulse select-text flex-col pb-5">
+        <div className="flex items-start gap-2">
+          <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-2 text-sm">
+                <div className="h-4 w-16 rounded bg-zinc-700" />
+                <span className="text-zinc-500">·</span>
+                <div className="h-4 w-12 rounded bg-zinc-700" />
+              </div>
+              <div className="h-3 w-3 rounded-full bg-zinc-700" />
+            </div>
+          </div>
+        </div>
+        <div className="-mt-5 pl-[52px]">
+          <div className="flex flex-col gap-6">
+            <div className="h-16 w-full rounded bg-zinc-700" />
+            <div className="flex items-center gap-8">
+              <div className="h-4 w-12 rounded bg-zinc-700" />
+              <div className="h-4 w-12 rounded bg-zinc-700" />
+            </div>
           </div>
         </div>
       </div>
-      <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
-        <NoteMetadata
-          eventID={event.id}
-          eventPubkey={event.pubkey}
-          eventContent={event.content}
-          eventTime={event.created_at}
-        />
-      </div>
-    </div>
-  );
+    );
+  }
 });