forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Search - extra tabs (#3408)
* add extra tab to search and translate tab names
* add feature gate
* flatten pager children
* Revert "flatten pager children"
This reverts commit 0050d42558c2c9b7bc4f2ad2df4ae2908fa26f65.
* have pager children as array
* move gate to custom hook
* bundle titles and pages together
* remove comment
* Fix a crash
* Use Views as children
---------
Co-authored-by: dan <dan.abramov@gmail.com>
authored by
Samuel Newman
dan
and committed by
GitHub
353a9639
b5f57779
+94
-24
+3
src/lib/statsig/gates.ts
+3
src/lib/statsig/gates.ts
+22
-9
src/state/queries/search-posts.ts
+22
-9
src/state/queries/search-posts.ts
···
10
10
import {embedViewRecordToPostView, getEmbeddedPost} from './util'
11
11
12
12
const searchPostsQueryKeyRoot = 'search-posts'
13
-
const searchPostsQueryKey = ({query}: {query: string}) => [
13
+
const searchPostsQueryKey = ({query, sort}: {query: string; sort?: string}) => [
14
14
searchPostsQueryKeyRoot,
15
15
query,
16
+
sort,
16
17
]
17
18
18
-
export function useSearchPostsQuery({query}: {query: string}) {
19
+
export function useSearchPostsQuery({
20
+
query,
21
+
sort,
22
+
}: {
23
+
query: string
24
+
sort?: 'top' | 'latest'
25
+
}) {
19
26
return useInfiniteQuery<
20
27
AppBskyFeedSearchPosts.OutputSchema,
21
28
Error,
···
23
30
QueryKey,
24
31
string | undefined
25
32
>({
26
-
queryKey: searchPostsQueryKey({query}),
33
+
queryKey: searchPostsQueryKey({query, sort}),
27
34
queryFn: async ({pageParam}) => {
28
-
const res = await getAgent().app.bsky.feed.searchPosts({
29
-
q: query,
30
-
limit: 25,
31
-
cursor: pageParam,
32
-
})
33
-
return res.data
35
+
// waiting on new APIs
36
+
switch (sort) {
37
+
// case 'top':
38
+
// case 'latest':
39
+
default:
40
+
const res = await getAgent().app.bsky.feed.searchPosts({
41
+
q: query,
42
+
limit: 25,
43
+
cursor: pageParam,
44
+
})
45
+
return res.data
46
+
}
34
47
},
35
48
initialPageParam: undefined,
36
49
getNextPageParam: lastPage => lastPage.cursor,
+69
-15
src/view/screens/Search/Search.tsx
+69
-15
src/view/screens/Search/Search.tsx
···
22
22
import {usePalette} from '#/lib/hooks/usePalette'
23
23
import {MagnifyingGlassIcon} from '#/lib/icons'
24
24
import {NavigationProp} from '#/lib/routes/types'
25
+
import {useNewSearchGate} from '#/lib/statsig/gates'
25
26
import {augmentSearchQuery} from '#/lib/strings/helpers'
26
27
import {s} from '#/lib/styles'
27
28
import {logger} from '#/logger'
···
191
192
key: string
192
193
}
193
194
194
-
function SearchScreenPostResults({query}: {query: string}) {
195
+
function SearchScreenPostResults({
196
+
query,
197
+
sort,
198
+
}: {
199
+
query: string
200
+
sort?: 'top' | 'latest'
201
+
}) {
195
202
const {_} = useLingui()
196
203
const {currentAccount} = useSession()
197
204
const [isPTR, setIsPTR] = React.useState(false)
···
209
216
fetchNextPage,
210
217
isFetchingNextPage,
211
218
hasNextPage,
212
-
} = useSearchPostsQuery({query: augmentedQuery})
219
+
} = useSearchPostsQuery({query: augmentedQuery, sort})
213
220
214
221
const onPullToRefresh = React.useCallback(async () => {
215
222
setIsPTR(true)
···
316
323
)
317
324
}
318
325
319
-
const SECTIONS_LOGGEDOUT = ['Users']
320
-
const SECTIONS_LOGGEDIN = ['Posts', 'Users']
321
326
export function SearchScreenInner({
322
327
query,
323
328
primarySearch,
···
330
335
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
331
336
const {hasSession} = useSession()
332
337
const {isDesktop} = useWebMediaQueries()
338
+
const {_} = useLingui()
339
+
340
+
const isNewSearch = useNewSearchGate()
333
341
334
342
const onPageSelected = React.useCallback(
335
343
(index: number) => {
···
339
347
[setDrawerSwipeDisabled, setMinimalShellMode],
340
348
)
341
349
350
+
const sections = React.useMemo(() => {
351
+
if (!query) return []
352
+
if (isNewSearch) {
353
+
if (hasSession) {
354
+
return [
355
+
{
356
+
title: _(msg`Top`),
357
+
component: <SearchScreenPostResults query={query} sort="top" />,
358
+
},
359
+
{
360
+
title: _(msg`Latest`),
361
+
component: <SearchScreenPostResults query={query} sort="latest" />,
362
+
},
363
+
{
364
+
title: _(msg`People`),
365
+
component: <SearchScreenUserResults query={query} />,
366
+
},
367
+
]
368
+
} else {
369
+
return [
370
+
{
371
+
title: _(msg`People`),
372
+
component: <SearchScreenUserResults query={query} />,
373
+
},
374
+
]
375
+
}
376
+
} else {
377
+
if (hasSession) {
378
+
return [
379
+
{
380
+
title: _(msg`Posts`),
381
+
component: <SearchScreenPostResults query={query} />,
382
+
},
383
+
{
384
+
title: _(msg`Users`),
385
+
component: <SearchScreenUserResults query={query} />,
386
+
},
387
+
]
388
+
} else {
389
+
return [
390
+
{
391
+
title: _(msg`Users`),
392
+
component: <SearchScreenUserResults query={query} />,
393
+
},
394
+
]
395
+
}
396
+
}
397
+
}, [hasSession, isNewSearch, _, query])
398
+
342
399
if (hasSession) {
343
400
return query ? (
344
401
<Pager
···
347
404
<CenteredView
348
405
sideBorders
349
406
style={[pal.border, pal.view, styles.tabBarContainer]}>
350
-
<TabBar items={SECTIONS_LOGGEDIN} {...props} />
407
+
<TabBar items={sections.map(section => section.title)} {...props} />
351
408
</CenteredView>
352
409
)}
353
410
initialPage={0}>
354
-
<View>
355
-
<SearchScreenPostResults query={query} />
356
-
</View>
357
-
<View>
358
-
<SearchScreenUserResults query={query} />
359
-
</View>
411
+
{sections.map((section, i) => (
412
+
<View key={i}>{section.component}</View>
413
+
))}
360
414
</Pager>
361
415
) : (
362
416
<View>
···
389
443
<CenteredView
390
444
sideBorders
391
445
style={[pal.border, pal.view, styles.tabBarContainer]}>
392
-
<TabBar items={SECTIONS_LOGGEDOUT} {...props} />
446
+
<TabBar items={sections.map(section => section.title)} {...props} />
393
447
</CenteredView>
394
448
)}
395
449
initialPage={0}>
396
-
<View>
397
-
<SearchScreenUserResults query={query} />
398
-
</View>
450
+
{sections.map((section, i) => (
451
+
<View key={i}>{section.component}</View>
452
+
))}
399
453
</Pager>
400
454
) : (
401
455
<CenteredView sideBorders style={pal.border}>