From 432165d7afef757e0a7cdb1a7f5e5662d1a75966 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 17 Jan 2023 00:19:50 +0100 Subject: [PATCH 1/3] feat: query for autocompletion using local db --- src/element/Textarea.css | 6 ++++++ src/element/Textarea.tsx | 35 ++++++++++++++++++++--------------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/element/Textarea.css b/src/element/Textarea.css index 8e99cf0f..fece461f 100644 --- a/src/element/Textarea.css +++ b/src/element/Textarea.css @@ -24,6 +24,12 @@ margin-right: 8px; } +.user-picture .avatar { + border-width: 1px; + width: 40px; + height: 40px; +} + .user-details { display: flex; flex-direction: column; diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx index 3cb71c4c..21ac610d 100644 --- a/src/element/Textarea.tsx +++ b/src/element/Textarea.tsx @@ -1,31 +1,23 @@ import "@webscopeio/react-textarea-autocomplete/style.css"; import "./Textarea.css"; -import Nostrich from "../nostrich.jpg"; +import { useState } from "react"; import { useLiveQuery } from "dexie-react-hooks"; import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete"; import TextareaAutosize from "react-textarea-autosize"; +import Avatar from "./Avatar"; import Nip05 from "./Nip05"; import { hexToBech32 } from "../Util"; import { db } from "../db"; import { MetadataCache } from "../db/User"; -function searchUsers(query: string, users: MetadataCache[]) { - const q = query.toLowerCase() - return users.filter(({ name, display_name, about, nip05 }: MetadataCache) => { - return name?.toLowerCase().includes(q) - || display_name?.toLowerCase().includes(q) - || about?.toLowerCase().includes(q) - || nip05?.toLowerCase().includes(q) - }).slice(0, 3) -} - -const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }: MetadataCache) => { +const UserItem = (metadata: MetadataCache) => { + const { pubkey, display_name, picture, nip05, ...rest } = metadata return (
- {picture && } +
{display_name || rest.name} @@ -36,10 +28,23 @@ const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }: MetadataCac } const Textarea = ({ users, onChange, ...rest }: any) => { + const [query, setQuery] = useState('') + const allUsers = useLiveQuery( - () => db.users.toArray() + () => db.users + .where("name").startsWithIgnoreCase(query) + .or("display_name").startsWithIgnoreCase(query) + .or("nip05").startsWithIgnoreCase(query) + .limit(5) + .toArray(), + [query], ); + const userDataProvider = (token: string) => { + setQuery(token) + return allUsers + } + return ( { trigger={{ "@": { afterWhitespace: true, - dataProvider: token => allUsers ? searchUsers(token, allUsers) : [], + dataProvider: userDataProvider, component: (props: any) => , output: (item: any) => `@${hexToBech32("npub", item.pubkey)}` } From 547b90e2b4af8a454b327374799b25b4f7f0e33d Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 17 Jan 2023 00:20:15 +0100 Subject: [PATCH 2/3] fix: lint warnings --- src/element/Mention.tsx | 2 +- src/element/Nip05.tsx | 2 +- src/element/ProfileImage.tsx | 2 +- src/element/Text.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/element/Mention.tsx b/src/element/Mention.tsx index 45a0cbf3..6ea23ec0 100644 --- a/src/element/Mention.tsx +++ b/src/element/Mention.tsx @@ -15,7 +15,7 @@ export default function Mention({ pubkey }: { pubkey: HexKey }) { name = user!.name!; } return name; - }, [user]); + }, [user, pubkey]); return e.stopPropagation()}>@{name} } \ No newline at end of file diff --git a/src/element/Nip05.tsx b/src/element/Nip05.tsx index 7b342ddc..401488ea 100644 --- a/src/element/Nip05.tsx +++ b/src/element/Nip05.tsx @@ -1,7 +1,7 @@ import { useQuery } from "react-query"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; import './Nip05.css' import { HexKey } from "../nostr"; diff --git a/src/element/ProfileImage.tsx b/src/element/ProfileImage.tsx index 069317c1..39c824e1 100644 --- a/src/element/ProfileImage.tsx +++ b/src/element/ProfileImage.tsx @@ -28,7 +28,7 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c name = user!.name!; } return name; - }, [user]); + }, [user, pubkey]); return (
diff --git a/src/element/Text.tsx b/src/element/Text.tsx index bb3c76fa..c9b505a0 100644 --- a/src/element/Text.tsx +++ b/src/element/Text.tsx @@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown"; import { TwitterTweetEmbed } from "react-twitter-embed"; import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "../Const"; -import { eventLink, hexToBech32, profileLink } from "../Util"; +import { eventLink, hexToBech32 } from "../Util"; import Invoice from "./Invoice"; import LazyImage from "./LazyImage"; import Hashtag from "./Hashtag"; From ae4657feda2e40f17074b9109419908506216de2 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 17 Jan 2023 00:20:33 +0100 Subject: [PATCH 3/3] fix: capture exception when verifying nip05 --- src/element/Nip05.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/element/Nip05.tsx b/src/element/Nip05.tsx index 401488ea..d3250d2e 100644 --- a/src/element/Nip05.tsx +++ b/src/element/Nip05.tsx @@ -14,12 +14,16 @@ async function fetchNip05Pubkey(name: string, domain: string) { if (!name || !domain) { return undefined; } - const res = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`); - const data: NostrJson = await res.json(); - const match = Object.keys(data.names).find(n => { - return n.toLowerCase() === name.toLowerCase(); - }); - return match ? data.names[match] : undefined; + try { + const res = await fetch(`https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(name)}`); + const data: NostrJson = await res.json(); + const match = Object.keys(data.names).find(n => { + return n.toLowerCase() === name.toLowerCase(); + }); + return match ? data.names[match] : undefined; + } catch (error) { + return undefined + } } const VERIFICATION_CACHE_TIME = 24 * 60 * 60 * 1000