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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React from 'react'
import {AppBskyActorDefs, ModerationOpts, moderateProfile} from '@atproto/api'
import {useQuery, useQueryClient} from '@tanstack/react-query'
import {logger} from '#/logger'
import {getAgent} from '#/state/session'
import {useMyFollowsQuery} from '#/state/queries/my-follows'
import {STALE} from '#/state/queries'
import {
DEFAULT_LOGGED_OUT_PREFERENCES,
getModerationOpts,
useModerationOpts,
} from './preferences'
import {isInvalidHandle} from '#/lib/strings/handles'
const DEFAULT_MOD_OPTS = getModerationOpts({
userDid: '',
preferences: DEFAULT_LOGGED_OUT_PREFERENCES,
})
export const RQKEY = (prefix: string) => ['actor-autocomplete', prefix]
export function useActorAutocompleteQuery(prefix: string) {
const {data: follows, isFetching} = useMyFollowsQuery()
const moderationOpts = useModerationOpts()
return useQuery<AppBskyActorDefs.ProfileViewBasic[]>({
staleTime: STALE.MINUTES.ONE,
queryKey: RQKEY(prefix || ''),
async queryFn() {
const res = prefix
? await getAgent().searchActorsTypeahead({
term: prefix,
limit: 8,
})
: undefined
return res?.data.actors || []
},
enabled: !isFetching,
select: React.useCallback(
(data: AppBskyActorDefs.ProfileViewBasic[]) => {
return computeSuggestions(
prefix,
follows,
data,
moderationOpts || DEFAULT_MOD_OPTS,
)
},
[prefix, follows, moderationOpts],
),
})
}
export type ActorAutocompleteFn = ReturnType<typeof useActorAutocompleteFn>
export function useActorAutocompleteFn() {
const queryClient = useQueryClient()
const {data: follows} = useMyFollowsQuery()
const moderationOpts = useModerationOpts()
return React.useCallback(
async ({query, limit = 8}: {query: string; limit?: number}) => {
let res
if (query) {
try {
res = await queryClient.fetchQuery({
staleTime: STALE.MINUTES.ONE,
queryKey: RQKEY(query || ''),
queryFn: () =>
getAgent().searchActorsTypeahead({
term: query,
limit,
}),
})
} catch (e) {
logger.error('useActorSearch: searchActorsTypeahead failed', {
error: e,
})
}
}
return computeSuggestions(
query,
follows,
res?.data.actors,
moderationOpts || DEFAULT_MOD_OPTS,
)
},
[follows, queryClient, moderationOpts],
)
}
function computeSuggestions(
prefix: string,
follows: AppBskyActorDefs.ProfileViewBasic[] | undefined,
searched: AppBskyActorDefs.ProfileViewBasic[] = [],
moderationOpts: ModerationOpts,
) {
let items: AppBskyActorDefs.ProfileViewBasic[] = []
if (follows) {
items = follows.filter(follow => prefixMatch(prefix, follow)).slice(0, 8)
}
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,
labels: item.labels,
})
}
}
return items.filter(profile => {
const mod = moderateProfile(profile, moderationOpts)
return !mod.account.filter && mod.account.cause?.type !== 'muted'
})
}
function prefixMatch(
prefix: string,
info: AppBskyActorDefs.ProfileViewBasic,
): boolean {
if (!isInvalidHandle(info.handle) && info.handle.includes(prefix)) {
return true
}
if (info.displayName?.toLocaleLowerCase().includes(prefix)) {
return true
}
return false
}
|
