1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import {AppBskyActorDefs} from '@atproto/api'
import {useQuery} from '@tanstack/react-query'
import {useSession} from '../session'
import {useMyFollowsQuery} from './my-follows'
export const RQKEY = (prefix: string) => ['actor-autocomplete', prefix]
export function useActorAutocompleteQuery(prefix: string) {
const {agent} = useSession()
const {data: follows, isFetching} = useMyFollowsQuery()
return useQuery<AppBskyActorDefs.ProfileViewBasic[]>({
queryKey: RQKEY(prefix || ''),
async queryFn() {
const res = await agent.searchActorsTypeahead({
term: prefix,
limit: 8,
})
return computeSuggestions(prefix, follows, res.data.actors)
},
enabled: !isFetching && !!prefix,
})
}
function computeSuggestions(
prefix: string,
follows: AppBskyActorDefs.ProfileViewBasic[] = [],
searched: AppBskyActorDefs.ProfileViewBasic[] = [],
) {
if (prefix) {
const items: AppBskyActorDefs.ProfileViewBasic[] = []
for (const item of follows) {
if (prefixMatch(prefix, item)) {
items.push(item)
}
if (items.length >= 8) {
break
}
}
for (const item of searched) {
if (!items.find(item2 => item2.handle === item.handle)) {
items.push({
did: item.did,
handle: item.handle,
displayName: item.displayName,
avatar: item.avatar,
})
}
}
return items
} else {
return follows
}
}
function prefixMatch(
prefix: string,
info: AppBskyActorDefs.ProfileViewBasic,
): boolean {
if (info.handle.includes(prefix)) {
return true
}
if (info.displayName?.toLocaleLowerCase().includes(prefix)) {
return true
}
return false
}
|
