yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
1import {
2 type AccountFragment,
3 AccountsOrderBy,
4 type AccountsRequest,
5 PageSize,
6 useAccountsLazyQuery
7} from "@hey/indexer";
8import type { ChangeEvent } from "react";
9import Loader from "@/components/Shared/Loader";
10import { Card, Input } from "@/components/Shared/UI";
11import SmallSingleAccount from "./SmallSingleAccount";
12
13interface SearchAccountsProps {
14 error?: boolean;
15 hideDropdown?: boolean;
16 onChange: (event: ChangeEvent<HTMLInputElement>) => void;
17 onAccountSelected: (account: AccountFragment) => void;
18 placeholder?: string;
19 value: string;
20}
21
22const SearchAccounts = ({
23 error = false,
24 hideDropdown = false,
25 onChange,
26 onAccountSelected,
27 placeholder = "Search…",
28 value
29}: SearchAccountsProps) => {
30 const [searchAccounts, { data, loading }] = useAccountsLazyQuery();
31
32 const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
33 onChange(event);
34
35 const keyword = event.target.value;
36 const request: AccountsRequest = {
37 filter: { searchBy: { localNameQuery: keyword } },
38 orderBy: AccountsOrderBy.BestMatch,
39 pageSize: PageSize.Fifty
40 };
41
42 searchAccounts({ variables: { request } });
43 };
44
45 const accounts = data?.accounts?.items;
46
47 return (
48 <div className="relative w-full">
49 <Input
50 error={error}
51 onChange={handleSearch}
52 placeholder={placeholder}
53 type="text"
54 value={value}
55 />
56 {!hideDropdown && value.length > 0 && (
57 <div className="absolute mt-2 flex w-[94%] max-w-md flex-col">
58 <Card className="z-[2] max-h-[80vh] overflow-y-auto py-2">
59 {loading ? (
60 <Loader className="my-3" message="Searching users" small />
61 ) : accounts && accounts.length > 0 ? (
62 accounts.slice(0, 7).map((account) => (
63 <div
64 className="cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800"
65 key={account.address}
66 onClick={() => onAccountSelected(account)}
67 >
68 <SmallSingleAccount account={account} />
69 </div>
70 ))
71 ) : (
72 <div className="px-4 py-2">No matching users</div>
73 )}
74 </Card>
75 </div>
76 )}
77 </div>
78 );
79};
80
81export default SearchAccounts;