Skip to content

Commit

Permalink
Search - extra tabs (#3408)
Browse files Browse the repository at this point in the history
* add extra tab to search and translate tab names

* add feature gate

* flatten pager children

* Revert "flatten pager children"

This reverts commit 0050d42.

* 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 <[email protected]>
  • Loading branch information
mozzius and gaearon authored Apr 10, 2024
1 parent b5f5777 commit 353a963
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 24 deletions.
3 changes: 3 additions & 0 deletions src/lib/statsig/gates.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {useGate} from './statsig'

export const useNewSearchGate = () => useGate('new_search')
31 changes: 22 additions & 9 deletions src/state/queries/search-posts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,40 @@ import {getAgent} from '#/state/session'
import {embedViewRecordToPostView, getEmbeddedPost} from './util'

const searchPostsQueryKeyRoot = 'search-posts'
const searchPostsQueryKey = ({query}: {query: string}) => [
const searchPostsQueryKey = ({query, sort}: {query: string; sort?: string}) => [
searchPostsQueryKeyRoot,
query,
sort,
]

export function useSearchPostsQuery({query}: {query: string}) {
export function useSearchPostsQuery({
query,
sort,
}: {
query: string
sort?: 'top' | 'latest'
}) {
return useInfiniteQuery<
AppBskyFeedSearchPosts.OutputSchema,
Error,
InfiniteData<AppBskyFeedSearchPosts.OutputSchema>,
QueryKey,
string | undefined
>({
queryKey: searchPostsQueryKey({query}),
queryKey: searchPostsQueryKey({query, sort}),
queryFn: async ({pageParam}) => {
const res = await getAgent().app.bsky.feed.searchPosts({
q: query,
limit: 25,
cursor: pageParam,
})
return res.data
// waiting on new APIs
switch (sort) {
// case 'top':
// case 'latest':
default:
const res = await getAgent().app.bsky.feed.searchPosts({
q: query,
limit: 25,
cursor: pageParam,
})
return res.data
}
},
initialPageParam: undefined,
getNextPageParam: lastPage => lastPage.cursor,
Expand Down
84 changes: 69 additions & 15 deletions src/view/screens/Search/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {HITSLOP_10} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {MagnifyingGlassIcon} from '#/lib/icons'
import {NavigationProp} from '#/lib/routes/types'
import {useNewSearchGate} from '#/lib/statsig/gates'
import {augmentSearchQuery} from '#/lib/strings/helpers'
import {s} from '#/lib/styles'
import {logger} from '#/logger'
Expand Down Expand Up @@ -191,7 +192,13 @@ type SearchResultSlice =
key: string
}

function SearchScreenPostResults({query}: {query: string}) {
function SearchScreenPostResults({
query,
sort,
}: {
query: string
sort?: 'top' | 'latest'
}) {
const {_} = useLingui()
const {currentAccount} = useSession()
const [isPTR, setIsPTR] = React.useState(false)
Expand All @@ -209,7 +216,7 @@ function SearchScreenPostResults({query}: {query: string}) {
fetchNextPage,
isFetchingNextPage,
hasNextPage,
} = useSearchPostsQuery({query: augmentedQuery})
} = useSearchPostsQuery({query: augmentedQuery, sort})

const onPullToRefresh = React.useCallback(async () => {
setIsPTR(true)
Expand Down Expand Up @@ -316,8 +323,6 @@ function SearchScreenUserResults({query}: {query: string}) {
)
}

const SECTIONS_LOGGEDOUT = ['Users']
const SECTIONS_LOGGEDIN = ['Posts', 'Users']
export function SearchScreenInner({
query,
primarySearch,
Expand All @@ -330,6 +335,9 @@ export function SearchScreenInner({
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const {hasSession} = useSession()
const {isDesktop} = useWebMediaQueries()
const {_} = useLingui()

const isNewSearch = useNewSearchGate()

const onPageSelected = React.useCallback(
(index: number) => {
Expand All @@ -339,6 +347,55 @@ export function SearchScreenInner({
[setDrawerSwipeDisabled, setMinimalShellMode],
)

const sections = React.useMemo(() => {
if (!query) return []
if (isNewSearch) {
if (hasSession) {
return [
{
title: _(msg`Top`),
component: <SearchScreenPostResults query={query} sort="top" />,
},
{
title: _(msg`Latest`),
component: <SearchScreenPostResults query={query} sort="latest" />,
},
{
title: _(msg`People`),
component: <SearchScreenUserResults query={query} />,
},
]
} else {
return [
{
title: _(msg`People`),
component: <SearchScreenUserResults query={query} />,
},
]
}
} else {
if (hasSession) {
return [
{
title: _(msg`Posts`),
component: <SearchScreenPostResults query={query} />,
},
{
title: _(msg`Users`),
component: <SearchScreenUserResults query={query} />,
},
]
} else {
return [
{
title: _(msg`Users`),
component: <SearchScreenUserResults query={query} />,
},
]
}
}
}, [hasSession, isNewSearch, _, query])

if (hasSession) {
return query ? (
<Pager
Expand All @@ -347,16 +404,13 @@ export function SearchScreenInner({
<CenteredView
sideBorders
style={[pal.border, pal.view, styles.tabBarContainer]}>
<TabBar items={SECTIONS_LOGGEDIN} {...props} />
<TabBar items={sections.map(section => section.title)} {...props} />
</CenteredView>
)}
initialPage={0}>
<View>
<SearchScreenPostResults query={query} />
</View>
<View>
<SearchScreenUserResults query={query} />
</View>
{sections.map((section, i) => (
<View key={i}>{section.component}</View>
))}
</Pager>
) : (
<View>
Expand Down Expand Up @@ -389,13 +443,13 @@ export function SearchScreenInner({
<CenteredView
sideBorders
style={[pal.border, pal.view, styles.tabBarContainer]}>
<TabBar items={SECTIONS_LOGGEDOUT} {...props} />
<TabBar items={sections.map(section => section.title)} {...props} />
</CenteredView>
)}
initialPage={0}>
<View>
<SearchScreenUserResults query={query} />
</View>
{sections.map((section, i) => (
<View key={i}>{section.component}</View>
))}
</Pager>
) : (
<CenteredView sideBorders style={pal.border}>
Expand Down

0 comments on commit 353a963

Please sign in to comment.