From fd2ddc4d2bae88cc22131557cad39b71fefaba0e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 26 Mar 2023 15:41:44 +0700
Subject: [PATCH] updated thread page

---
 src/components/form/base.tsx    |  7 ++-
 src/components/form/comment.tsx | 14 +++---
 src/components/note/comment.tsx | 79 +++++++++++++++++++++++++++++++++
 src/pages/newsfeed/[id].tsx     |  8 +---
 4 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 src/components/note/comment.tsx

diff --git a/src/components/form/base.tsx b/src/components/form/base.tsx
index e0fa4b2e..9f982d56 100644
--- a/src/components/form/base.tsx
+++ b/src/components/form/base.tsx
@@ -8,6 +8,7 @@ import { relaysAtom } from '@stores/relays';
 import { dateToUnix } from '@utils/getDate';
 
 import { ImageIcon, ResetIcon } from '@radix-ui/react-icons';
+import { sendNotification } from '@tauri-apps/api/notification';
 import { useAtom, useAtomValue } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -35,8 +36,12 @@ export default function FormBase() {
     event.id = getEventHash(event);
     event.sig = signEvent(event, privkey);
 
+    // publish note
     pool.publish(event, relays);
-    resetValue;
+    // reset form
+    resetValue();
+    // send notification
+    sendNotification('Note has been published successfully');
   };
 
   return (
diff --git a/src/components/form/comment.tsx b/src/components/form/comment.tsx
index 5c9ee04c..be2a9697 100644
--- a/src/components/form/comment.tsx
+++ b/src/components/form/comment.tsx
@@ -2,26 +2,22 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
-import { noteContentAtom } from '@stores/note';
 import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 
-import EmojiPicker from '@emoji-mart/react';
-import { ImageIcon } from '@radix-ui/react-icons';
+import { sendNotification } from '@tauri-apps/api/notification';
 import destr from 'destr';
 import { useAtom, useAtomValue } from 'jotai';
-import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
   const pool: any = useContext(RelayContext);
 
   const relays = useAtomValue(relaysAtom);
   const [activeAccount] = useAtom(activeAccountAtom);
-  const [value, setValue] = useAtom(noteContentAtom);
-  const resetValue = useResetAtom(noteContentAtom);
+  const [value, setValue] = useState('');
 
   const profile = destr(activeAccount.metadata);
 
@@ -36,8 +32,10 @@ export default function FormComment({ eventID }: { eventID: any }) {
     event.id = getEventHash(event);
     event.sig = signEvent(event, activeAccount.privkey);
 
+    // publish note
     pool.publish(event, relays);
-    resetValue;
+    // send notification
+    sendNotification('Comment has been published successfully');
   };
 
   return (
diff --git a/src/components/note/comment.tsx b/src/components/note/comment.tsx
new file mode 100644
index 00000000..023d66c0
--- /dev/null
+++ b/src/components/note/comment.tsx
@@ -0,0 +1,79 @@
+import NoteMetadata from '@components/note/metadata';
+import { ImagePreview } from '@components/note/preview/image';
+import { VideoPreview } from '@components/note/preview/video';
+import { NoteRepost } from '@components/note/repost';
+import { UserExtend } from '@components/user/extend';
+import { UserMention } from '@components/user/mention';
+
+import destr from 'destr';
+import { memo, useMemo } from 'react';
+import ReactPlayer from 'react-player/lazy';
+import reactStringReplace from 'react-string-replace';
+
+export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
+  const content = useMemo(() => {
+    let parsedContent = event.content;
+    // get data tags
+    const tags = destr(event.tags);
+    // handle urls
+    parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
+      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+        // image url
+        return <ImagePreview key={match + i} url={match} />;
+      } else if (ReactPlayer.canPlay(match)) {
+        return <VideoPreview key={match + i} url={match} />;
+      } else {
+        return (
+          <a key={match + i} href={match} target="_blank" rel="noreferrer">
+            {match}
+          </a>
+        );
+      }
+    });
+    // handle #-hashtags
+    parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
+      <span key={match + i} className="cursor-pointer text-fuchsia-500">
+        #{match}
+      </span>
+    ));
+    // handle mentions
+    if (tags.length > 0) {
+      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
+        if (tags[match][0] === 'p') {
+          // @-mentions
+          return <UserMention key={match + i} pubkey={tags[match][1]} />;
+        } else if (tags[match][0] === 'e') {
+          // note-mentions
+          return <NoteRepost key={match + i} id={tags[match][1]} />;
+        } else {
+          return;
+        }
+      });
+    }
+
+    return parsedContent;
+  }, [event.content, event.tags]);
+
+  return (
+    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">
+      <div className="relative z-10 flex flex-col">
+        <UserExtend pubkey={event.pubkey} time={event.created_at} />
+        <div className="-mt-5 pl-[52px]">
+          <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 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+              {content}
+            </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>
+    </div>
+  );
+});
diff --git a/src/pages/newsfeed/[id].tsx b/src/pages/newsfeed/[id].tsx
index 4207a498..26735c08 100644
--- a/src/pages/newsfeed/[id].tsx
+++ b/src/pages/newsfeed/[id].tsx
@@ -2,6 +2,7 @@ import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
 import FormComment from '@components/form/comment';
+import { NoteComment } from '@components/note/comment';
 import { NoteExtend } from '@components/note/extend';
 import { RelayContext } from '@components/relaysProvider';
 
@@ -50,12 +51,7 @@ export default function Page() {
         <FormComment eventID={id} />
       </div>
       <div className="flex flex-col">
-        {comments.length > 0 &&
-          comments.map((comment) => (
-            <p key={comment.id}>
-              {comment.id}-{comment.content}
-            </p>
-          ))}
+        {comments.length > 0 && comments.map((comment) => <NoteComment key={comment.id} event={comment} />)}
       </div>
     </div>
   );