User Search

1import * as React from 'react';
2import { useSearchUsers } from '@/hooks/useSearchUsers';
3import { useDebounce } from '@/hooks/useDebounce';
4import { UserInfo } from './user-info';
5import { SearchBar, SearchBarAutocompleteItem } from './search-bar';
6import { cn } from '@/lib/utils/deso';
7 
8export interface UserSearchProps {
9  onSelectUser: (publicKey: string) => void;
10  className?: string;
11  placeholder?: string;
12  size?: 'sm' | 'md' | 'lg';
13}
14 
15export const UserSearch = ({
16  onSelectUser,
17  className,
18  placeholder = 'Search users...',
19  size = 'md',
20}: UserSearchProps) => {
21  const [searchTerm, setSearchTerm] = React.useState('');
22  const debouncedSearchTerm = useDebounce(searchTerm, 300);
23  const { users, isLoading } = useSearchUsers(debouncedSearchTerm);
24 
25  // Convert users to autocomplete items
26  const autocompleteItems: SearchBarAutocompleteItem[] = users.map(user => ({
27    id: user.publicKey,
28    label: user.username || user.publicKey,
29    value: user.username || user.publicKey,
30    data: user,
31  }));
32 
33  const handleSelectItem = (item: SearchBarAutocompleteItem) => {
34    onSelectUser(item.id);
35    setSearchTerm('');
36  };
37 
38  const handleSearch = (query: string) => {
39    console.log('Searching for:', query);
40  };
41 
42  const handleClear = () => {
43    setSearchTerm('');
44  };
45 
46  const renderUserItem = (item: SearchBarAutocompleteItem) => {
47    return (
48      <UserInfo
49        publicKey={item.id}
50        profile={item.data}
51        pictureSize="xs"
52        showPublicKey={true}
53        className="w-full"
54      />
55    );
56  };
57 
58  const getEmptyMessage = () => {
59    if (searchTerm.length === 0) {
60      return 'Start typing to search for users';
61    }
62    if (searchTerm.length < 3) {
63      return 'Type at least 3 characters';
64    }
65    return 'No users found';
66  };
67 
68  return (
69    <SearchBar
70      placeholder={placeholder}
71      value={searchTerm}
72      onChange={setSearchTerm}
73      onSearch={handleSearch}
74      onClear={handleClear}
75      size={size}
76      className={cn('w-full', className)}
77      showClearButton={true}
78      showAutocomplete={true}
79      autocompleteItems={autocompleteItems}
80      onSelectItem={handleSelectItem}
81      isLoading={isLoading}
82      emptyMessage={getEmptyMessage()}
83      minCharsForAutocomplete={1}
84      renderItem={renderUserItem}
85    />
86  );
87};