From 1796228116f4fc19dbce9c06580ea230fd8fd1cb Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Thu, 23 Feb 2023 14:05:34 +0700 Subject: [PATCH] added note modal (wip) --- src/components/note/atoms/user.tsx | 2 +- .../note/atoms/userWithUsername.tsx | 97 +++++++++++++++++++ src/components/note/modal/index.tsx | 41 ++++++++ src/components/note/modal/noteReply.tsx | 18 ++++ src/components/note/single.tsx | 48 +++++---- 5 files changed, 185 insertions(+), 21 deletions(-) create mode 100644 src/components/note/atoms/userWithUsername.tsx create mode 100644 src/components/note/modal/index.tsx create mode 100644 src/components/note/modal/noteReply.tsx diff --git a/src/components/note/atoms/user.tsx b/src/components/note/atoms/user.tsx index 6fe5e87b..2fe94ff3 100644 --- a/src/components/note/atoms/user.tsx +++ b/src/components/note/atoms/user.tsx @@ -14,7 +14,7 @@ import Database from 'tauri-plugin-sql-api'; const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null; export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) { - const [profile, setProfile] = useState({ picture: null, name: null }); + const [profile, setProfile] = useState({ picture: null, name: null, username: null }); const { onEvent } = useNostrEvents({ filter: { diff --git a/src/components/note/atoms/userWithUsername.tsx b/src/components/note/atoms/userWithUsername.tsx new file mode 100644 index 00000000..30b87ff0 --- /dev/null +++ b/src/components/note/atoms/userWithUsername.tsx @@ -0,0 +1,97 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { ImageWithFallback } from '@components/imageWithFallback'; + +import { truncate } from '@utils/truncate'; + +import MoreIcon from '@assets/icons/More'; + +import Avatar from 'boring-avatars'; +import { useNostrEvents } from 'nostr-react'; +import { memo, useEffect, useState } from 'react'; +import Database from 'tauri-plugin-sql-api'; + +const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null; + +export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pubkey: string }) { + const [profile, setProfile] = useState({ picture: null, name: null, username: null }); + + const { onEvent } = useNostrEvents({ + filter: { + authors: [pubkey], + kinds: [0], + }, + }); + + onEvent(async (rawMetadata) => { + try { + const metadata: any = JSON.parse(rawMetadata.content); + if (profile.picture === null || profile.name === null) { + setProfile(metadata); + await db.execute( + `INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify( + metadata + )}')` + ); + } else { + return; + } + } catch (err) { + console.error(err, rawMetadata); + } + }); + + useEffect(() => { + const initialProfile = async () => { + const result: any = await db.select( + `SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"` + ); + db.close; + return result; + }; + + initialProfile() + .then((res) => { + if (res[0] !== undefined) { + setProfile(JSON.parse(res[0].metadata)); + } + }) + .catch(console.error); + }, [pubkey]); + + return ( +