From 7a10d6a3d921e99a7945c3f0c77428d549da865e Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 7 May 2023 15:16:46 +0700
Subject: [PATCH] minor fixes

---
 src/app/note/components/content.tsx                   | 10 ++++++++--
 .../note/components/{quote.tsx => mentions/note.tsx}  |  7 ++-----
 src/app/note/components/mentions/user.tsx             | 11 +++++++++++
 src/app/note/components/user/mention.tsx              |  9 ---------
 src/utils/parser.tsx                                  |  8 ++++----
 5 files changed, 25 insertions(+), 20 deletions(-)
 rename src/app/note/components/{quote.tsx => mentions/note.tsx} (86%)
 create mode 100644 src/app/note/components/mentions/user.tsx
 delete mode 100644 src/app/note/components/user/mention.tsx

diff --git a/src/app/note/components/content.tsx b/src/app/note/components/content.tsx
index 0a3e7f1c..93dfd9e1 100644
--- a/src/app/note/components/content.tsx
+++ b/src/app/note/components/content.tsx
@@ -1,6 +1,7 @@
+import { MentionNote } from '@lume/app/note/components/mentions/note';
+import { MentionUser } from '@lume/app/note/components/mentions/user';
 import ImagePreview from '@lume/app/note/components/preview/image';
 import VideoPreview from '@lume/app/note/components/preview/video';
-import { NoteMentionUser } from '@lume/app/note/components/user/mention';
 
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -13,13 +14,18 @@ export const NoteContent = ({ content }: { content: any }) => {
         linkTarget="_blank"
         className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
         components={{
-          em: ({ ...props }) => <NoteMentionUser {...props} />,
+          em: ({ ...props }) => <MentionUser {...props} />,
         }}
       >
         {content.parsed}
       </ReactMarkdown>
       {Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
       {Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
+      {!Array.isArray(content.notes) && !content.notes.length ? (
+        <></>
+      ) : (
+        content.notes.map((note: string) => <MentionNote key={note} id={note} />)
+      )}
     </>
   );
 };
diff --git a/src/app/note/components/quote.tsx b/src/app/note/components/mentions/note.tsx
similarity index 86%
rename from src/app/note/components/quote.tsx
rename to src/app/note/components/mentions/note.tsx
index 0dba0e5c..0c777d89 100644
--- a/src/app/note/components/quote.tsx
+++ b/src/app/note/components/mentions/note.tsx
@@ -9,7 +9,7 @@ import { memo, useContext } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import useSWRSubscription from 'swr/subscription';
 
-export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
+export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const pool: any = useContext(RelayContext);
 
   const { data, error } = useSWRSubscription(id ? id : null, (key, { next }) => {
@@ -38,10 +38,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   const content = !error && data ? noteParser(data) : null;
 
   return (
-    <NoteWrapper
-      href={`/app/note?id=${id}`}
-      className="mb-2 mt-3 flex flex-col rounded-lg border border-zinc-800 p-2 py-3"
-    >
+    <NoteWrapper href={`/app/note?id=${id}`} className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
diff --git a/src/app/note/components/mentions/user.tsx b/src/app/note/components/mentions/user.tsx
new file mode 100644
index 00000000..7a671958
--- /dev/null
+++ b/src/app/note/components/mentions/user.tsx
@@ -0,0 +1,11 @@
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+export const MentionUser = (props: { children: any[] }) => {
+  const pubkey = props.children[0];
+  const { user } = useProfile(pubkey);
+
+  return (
+    <span className="cursor-pointer text-fuchsia-500">@{user?.name || user?.display_name || shortenKey(pubkey)}</span>
+  );
+};
diff --git a/src/app/note/components/user/mention.tsx b/src/app/note/components/user/mention.tsx
deleted file mode 100644
index 1e33449f..00000000
--- a/src/app/note/components/user/mention.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-export const NoteMentionUser = (props: { children: any[] }) => {
-  const pubkey = props.children[0];
-  const { user } = useProfile(pubkey);
-
-  return <span className="cursor-pointer text-fuchsia-500">@{user?.username || user?.name || shortenKey(pubkey)}</span>;
-};
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index 83c595fc..163374e9 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -20,12 +20,12 @@ export const noteParser = (event: Event) => {
     // make sure url is trimmed
     const url = item.trim();
 
-    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) {
+    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
       // image url
       content.images.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else if (url.match(/\.(mp4|webm|mov)$/i)) {
+    } else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
       // video
       content.videos.push(url);
       // remove url from original content
@@ -34,8 +34,8 @@ export const noteParser = (event: Event) => {
   });
 
   // map hashtag to em
-  content.original.match(/#(\w+)(?!:\/\/)/gi)?.forEach((item) => {
-    content.parsed = content.parsed.replace(item, `[${item}](https://snort.social/search/#${item})`);
+  content.original.match(/#(\w+)(?!:\/\/)/g)?.forEach((item) => {
+    content.parsed = content.parsed.replace(item, `[${item}](https://primal.net/search/${item})`);
   });
 
   // handle nostr mention