added mention note

src/components/note/content/index.tsx

@@ -1,5 +1,6 @@
 import NoteMetadata from '@components/note/content/metadata';
 import NotePreview from '@components/note/content/preview';
+import { MentionNote } from '@components/note/mention';
 import { UserExtend } from '@components/user/extend';
 import { UserMention } from '@components/user/mention';
 
@@ -22,7 +23,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
     ));
     // handle hashtags
     parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-      <span key={match + i} className="text-fuchsia-500">
+      <span key={match + i} className="cursor-pointer text-fuchsia-500">
         #{match}
       </span>
     ));
@@ -31,9 +32,8 @@ export const Content = memo(function Content({ data }: { data: any }) {
       parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
         if (tags[match][0] === 'p') {
           return <UserMention key={match + i} pubkey={tags[match][1]} />;
-        } else {
-          // #TODO: handle mention other note
-          // console.log(tags[match]);
+        } else if (tags[match][0] === 'e') {
+          return <MentionNote id={tags[match][1]} />;
         }
       });
     }

src/components/note/index.tsx

@@ -29,14 +29,19 @@ export const Note = memo(function Note({ event }: { event: any }) {
     }
   }, [tags]);
 
-  const openThread = () => {
-    router.push(`/newsfeed/${rootEventID.current || event.id}`);
+  const openThread = (e) => {
+    const selection = window.getSelection();
+    if (selection.toString().length === 0) {
+      router.push(`/newsfeed/${rootEventID.current || event.id}`);
+    } else {
+      e.stopPropagation();
+    }
   };
 
   return (
     <div
-      onClick={() => openThread()}
-      className="relative z-10 flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
+      onClick={(e) => openThread(e)}
+      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"
     >
       <>{fetchRootEvent}</>
       <Content data={event} />

src/components/note/mention.tsx

@@ -0,0 +1,100 @@
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
+import { Content } from '@components/note/content';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+
+export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
+  const { db }: any = useContext(DatabaseContext);
+  const relayPool: any = useContext(RelayContext);
+
+  const [relays]: any = useLocalStorage('relays');
+  const [event, setEvent] = useState(null);
+
+  const insertDB = useCallback(
+    async (event: any) => {
+      // insert to local database
+      await db.execute(
+        'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags, is_root) VALUES (?, ?, ?, ?, ?, ?, ?);',
+        [event.id, event.pubkey, event.created_at, event.kind, event.content, JSON.stringify(event.tags), 0]
+      );
+    },
+    [db]
+  );
+
+  const getData = useCallback(async () => {
+    const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
+    return result[0];
+  }, [db, id]);
+
+  const fetchEvent = useCallback(() => {
+    relayPool.subscribe(
+      [
+        {
+          ids: [id],
+          kinds: [1],
+        },
+      ],
+      relays,
+      (event: any) => {
+        // update state
+        setEvent(event);
+        // insert to database
+        insertDB(event);
+      },
+      undefined,
+      undefined,
+      {
+        unsubscribeOnEose: true,
+      }
+    );
+  }, [id, insertDB, relayPool, relays]);
+
+  useEffect(() => {
+    getData()
+      .then((res) => {
+        if (res) {
+          setEvent(res);
+        } else {
+          fetchEvent();
+        }
+      })
+      .catch(console.error);
+  }, [fetchEvent, getData]);
+
+  if (event) {
+    return (
+      <div className="relative border border-zinc-900 p-3">
+        <Content data={event} />
+      </div>
+    );
+  } 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>
+    );
+  }
+});

src/components/user/extend.tsx

@@ -24,6 +24,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   };
 
   const fetchProfile = useCallback(async (id: string) => {
+    console.log('fetch');
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
       method: 'GET',
       timeout: 30,

src/components/user/mention.tsx

@@ -46,5 +46,5 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
       .catch(console.error);
   }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
-  return <span className="text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
+  return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
 });