forked from Kieran/snort
feat: query for autocompletion using local db
This commit is contained in:
parent
e304d4cbac
commit
432165d7af
@ -24,6 +24,12 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.user-picture .avatar {
|
||||
border-width: 1px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -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 (
|
||||
<div key={pubkey} className="user-item">
|
||||
<div className="user-picture">
|
||||
{picture && <img src={picture ? picture : Nostrich} className="picture" />}
|
||||
<Avatar user={metadata} />
|
||||
</div>
|
||||
<div className="user-details">
|
||||
<strong>{display_name || rest.name}</strong>
|
||||
@ -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 (
|
||||
<ReactTextareaAutocomplete
|
||||
{...rest}
|
||||
@ -50,7 +55,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
|
||||
trigger={{
|
||||
"@": {
|
||||
afterWhitespace: true,
|
||||
dataProvider: token => allUsers ? searchUsers(token, allUsers) : [],
|
||||
dataProvider: userDataProvider,
|
||||
component: (props: any) => <UserItem {...props.entity} />,
|
||||
output: (item: any) => `@${hexToBech32("npub", item.pubkey)}`
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user