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..d3250d2e 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";
@@ -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
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";
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)}`
}