From 23f85c7e4f08cf2ef87faf7a2e48b9a4434d2a8b Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 22 Mar 2023 13:30:38 +0700
Subject: [PATCH] updated note onclick

---
 src/components/note/content/index.tsx | 24 ++++++++++++------------
 src/components/note/index.tsx         |  9 ++++++---
 src/components/note/preview/video.tsx |  2 +-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx
index 1f13839b..e09879ba 100644
--- a/src/components/note/content/index.tsx
+++ b/src/components/note/content/index.tsx
@@ -45,21 +45,21 @@ export const Content = memo(function Content({ data }: { data: any }) {
     <div className="relative z-10 flex flex-col">
       <UserExtend pubkey={data.pubkey} time={data.created_at} />
       <div className="-mt-5 pl-[52px]">
-        <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 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-ul:mt-2 prose-li:my-1">
-              {content}
-            </div>
-            <NotePreview content={data.content} />
+        <div className="flex flex-col gap-2">
+          <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 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-ul:mt-2 prose-li:my-1">
+            {content}
           </div>
-          <NoteMetadata
-            eventID={data.id}
-            eventPubkey={data.pubkey}
-            eventContent={data.content}
-            eventTime={data.created_at}
-          />
+          <NotePreview content={data.content} />
         </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>
   );
 });
diff --git a/src/components/note/index.tsx b/src/components/note/index.tsx
index ac10e4ca..5e08628c 100644
--- a/src/components/note/index.tsx
+++ b/src/components/note/index.tsx
@@ -3,20 +3,23 @@ import { RootNote } from '@components/note/root';
 
 import destr from 'destr';
 import { useRouter } from 'next/router';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useRef } from 'react';
 
 export const Note = memo(function Note({ event }: { event: any }) {
   const router = useRouter();
   const tags = destr(event.tags);
+  const rootEventID = useRef(null);
 
   const fetchRootEvent = useMemo(() => {
     if (tags.length > 0) {
       if (tags[0][0] === 'e' || tags[0][2] === 'root') {
+        rootEventID.current = tags[0][1];
         return <RootNote id={tags[0][1]} />;
       } else {
         tags.every((tag) => {
           if (tag[0] === 'e' && tag[2] === 'root') {
-            return <RootNote id={tags[1]} />;
+            rootEventID.current = tag[1];
+            return <RootNote id={tag[1]} />;
           }
           return <></>;
         });
@@ -27,7 +30,7 @@ export const Note = memo(function Note({ event }: { event: any }) {
   }, [tags]);
 
   const openThread = () => {
-    router.push(`/newsfeed/${event.id}`);
+    router.push(`/newsfeed/${rootEventID.current || event.id}`);
   };
 
   return (
diff --git a/src/components/note/preview/video.tsx b/src/components/note/preview/video.tsx
index 26bd7ada..6bf912f7 100644
--- a/src/components/note/preview/video.tsx
+++ b/src/components/note/preview/video.tsx
@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
 
 export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
   return (
-    <div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
       <ReactPlayer
         url={data}
         controls={true}