jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Search - only enable queries once tab is active (#3471)
* only enable queries once tab is active
* remove hasBeenTrue hook
* make enabled optional
samuel.fm
+61
-16
+11
-5
src/state/queries/actor-search.ts
+11
-5
src/state/queries/actor-search.ts
···
5
5
import {getAgent} from '#/state/session'
6
6
7
7
const RQKEY_ROOT = 'actor-search'
8
-
export const RQKEY = (prefix: string) => [RQKEY_ROOT, prefix]
8
+
export const RQKEY = (query: string) => [RQKEY_ROOT, query]
9
9
10
-
export function useActorSearch(prefix: string) {
10
+
export function useActorSearch({
11
+
query,
12
+
enabled,
13
+
}: {
14
+
query: string
15
+
enabled?: boolean
16
+
}) {
11
17
return useQuery<AppBskyActorDefs.ProfileView[]>({
12
18
staleTime: STALE.MINUTES.ONE,
13
-
queryKey: RQKEY(prefix || ''),
19
+
queryKey: RQKEY(query || ''),
14
20
async queryFn() {
15
21
const res = await getAgent().searchActors({
16
-
q: prefix,
22
+
q: query,
17
23
})
18
24
return res.data.actors
19
25
},
20
-
enabled: !!prefix,
26
+
enabled: enabled && !!query,
21
27
})
22
28
}
23
29
+3
src/state/queries/search-posts.ts
+3
src/state/queries/search-posts.ts
···
19
19
export function useSearchPostsQuery({
20
20
query,
21
21
sort,
22
+
enabled,
22
23
}: {
23
24
query: string
24
25
sort?: 'top' | 'latest'
26
+
enabled?: boolean
25
27
}) {
26
28
return useInfiniteQuery<
27
29
AppBskyFeedSearchPosts.OutputSchema,
···
47
49
},
48
50
initialPageParam: undefined,
49
51
getNextPageParam: lastPage => lastPage.cursor,
52
+
enabled,
50
53
})
51
54
}
52
55
+47
-11
src/view/screens/Search/Search.tsx
+47
-11
src/view/screens/Search/Search.tsx
···
195
195
function SearchScreenPostResults({
196
196
query,
197
197
sort,
198
+
active,
198
199
}: {
199
200
query: string
200
201
sort?: 'top' | 'latest'
202
+
active: boolean
201
203
}) {
202
204
const {_} = useLingui()
203
205
const {currentAccount} = useSession()
···
216
218
fetchNextPage,
217
219
isFetchingNextPage,
218
220
hasNextPage,
219
-
} = useSearchPostsQuery({query: augmentedQuery, sort})
221
+
} = useSearchPostsQuery({query: augmentedQuery, sort, enabled: active})
220
222
221
223
const onPullToRefresh = React.useCallback(async () => {
222
224
setIsPTR(true)
···
297
299
)
298
300
}
299
301
300
-
function SearchScreenUserResults({query}: {query: string}) {
302
+
function SearchScreenUserResults({
303
+
query,
304
+
active,
305
+
}: {
306
+
query: string
307
+
active: boolean
308
+
}) {
301
309
const {_} = useLingui()
302
-
const {data: results, isFetched} = useActorSearch(query)
310
+
311
+
const {data: results, isFetched} = useActorSearch({
312
+
query,
313
+
enabled: active,
314
+
})
303
315
304
316
return isFetched && results ? (
305
317
<>
···
335
347
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
336
348
const {hasSession} = useSession()
337
349
const {isDesktop} = useWebMediaQueries()
350
+
const [activeTab, setActiveTab] = React.useState(0)
338
351
const {_} = useLingui()
339
352
340
353
const isNewSearch = useGate('new_search')
···
343
356
(index: number) => {
344
357
setMinimalShellMode(false)
345
358
setDrawerSwipeDisabled(index > 0)
359
+
setActiveTab(index)
346
360
},
347
361
[setDrawerSwipeDisabled, setMinimalShellMode],
348
362
)
···
354
368
return [
355
369
{
356
370
title: _(msg`Top`),
357
-
component: <SearchScreenPostResults query={query} sort="top" />,
371
+
component: (
372
+
<SearchScreenPostResults
373
+
query={query}
374
+
sort="top"
375
+
active={activeTab === 0}
376
+
/>
377
+
),
358
378
},
359
379
{
360
380
title: _(msg`Latest`),
361
-
component: <SearchScreenPostResults query={query} sort="latest" />,
381
+
component: (
382
+
<SearchScreenPostResults
383
+
query={query}
384
+
sort="latest"
385
+
active={activeTab === 1}
386
+
/>
387
+
),
362
388
},
363
389
{
364
390
title: _(msg`People`),
365
-
component: <SearchScreenUserResults query={query} />,
391
+
component: (
392
+
<SearchScreenUserResults query={query} active={activeTab === 2} />
393
+
),
366
394
},
367
395
]
368
396
} else {
369
397
return [
370
398
{
371
399
title: _(msg`People`),
372
-
component: <SearchScreenUserResults query={query} />,
400
+
component: (
401
+
<SearchScreenUserResults query={query} active={activeTab === 0} />
402
+
),
373
403
},
374
404
]
375
405
}
···
378
408
return [
379
409
{
380
410
title: _(msg`Posts`),
381
-
component: <SearchScreenPostResults query={query} />,
411
+
component: (
412
+
<SearchScreenPostResults query={query} active={activeTab === 0} />
413
+
),
382
414
},
383
415
{
384
416
title: _(msg`Users`),
385
-
component: <SearchScreenUserResults query={query} />,
417
+
component: (
418
+
<SearchScreenUserResults query={query} active={activeTab === 1} />
419
+
),
386
420
},
387
421
]
388
422
} else {
389
423
return [
390
424
{
391
425
title: _(msg`Users`),
392
-
component: <SearchScreenUserResults query={query} />,
426
+
component: (
427
+
<SearchScreenUserResults query={query} active={activeTab === 0} />
428
+
),
393
429
},
394
430
]
395
431
}
396
432
}
397
-
}, [hasSession, isNewSearch, _, query])
433
+
}, [hasSession, isNewSearch, _, query, activeTab])
398
434
399
435
if (hasSession) {
400
436
return query ? (