From 432165d7afef757e0a7cdb1a7f5e5662d1a75966 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 17 Jan 2023 00:19:50 +0100
Subject: [PATCH] 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 (
     <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)}`
         }