From 3c08cf2ef9f829f56d20fdde5ba07a16b0291ddb Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Thu, 23 Mar 2023 09:38:16 +0700 Subject: [PATCH] added mention note --- src/components/note/content/index.tsx | 8 +-- src/components/note/index.tsx | 13 ++-- src/components/note/mention.tsx | 100 ++++++++++++++++++++++++++ src/components/user/extend.tsx | 1 + src/components/user/mention.tsx | 2 +- 5 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 src/components/note/mention.tsx diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx index e09879ba..bc1b75a8 100644 --- a/src/components/note/content/index.tsx +++ b/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) => ( - + #{match} )); @@ -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 ; - } else { - // #TODO: handle mention other note - // console.log(tags[match]); + } else if (tags[match][0] === 'e') { + return ; } }); } diff --git a/src/components/note/index.tsx b/src/components/note/index.tsx index 5e08628c..9ebabe9c 100644 --- a/src/components/note/index.tsx +++ b/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 (
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} diff --git a/src/components/note/mention.tsx b/src/components/note/mention.tsx new file mode 100644 index 00000000..42ab3f17 --- /dev/null +++ b/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 ( +
+ +
+ ); + } else { + return ( +
+
+
+
+
+
+
+ ยท +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); + } +}); diff --git a/src/components/user/extend.tsx b/src/components/user/extend.tsx index 8adca8b4..0fefe540 100644 --- a/src/components/user/extend.tsx +++ b/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, diff --git a/src/components/user/mention.tsx b/src/components/user/mention.tsx index d3599bf6..3cfe132b 100644 --- a/src/components/user/mention.tsx +++ b/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 @{profile?.name || truncate(pubkey, 16, ' .... ')}; + return @{profile?.name || truncate(pubkey, 16, ' .... ')}; });