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>

src/lib/statsig/gates.ts

@@ -0,0 +1,3 @@
+import {useGate} from './statsig'
+
+export const useNewSearchGate = () => useGate('new_search')

src/state/queries/search-posts.ts

@@ -10,12 +10,19 @@ 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,
@@ -23,14 +30,20 @@ export function useSearchPostsQuery({query}: {query: string}) {
     QueryKey,
     string | undefined
   >({
-    queryKey: searchPostsQueryKey({query}),
+    queryKey: searchPostsQueryKey({query, sort}),
     queryFn: async ({pageParam}) => {
+      // 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,

src/view/screens/Search/Search.tsx

@@ -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'
@@ -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)
@@ -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)
@@ -316,8 +323,6 @@ function SearchScreenUserResults({query}: {query: string}) {
   )
 }
 
-const SECTIONS_LOGGEDOUT = ['Users']
-const SECTIONS_LOGGEDIN = ['Posts', 'Users']
 export function SearchScreenInner({
   query,
   primarySearch,
@@ -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) => {
@@ -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
@@ -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>
+        {sections.map((section, i) => (
-          <SearchScreenPostResults query={query} />
+          <View key={i}>{section.component}</View>
-        </View>
+        ))}
-        <View>
-          <SearchScreenUserResults query={query} />
-        </View>
       </Pager>
     ) : (
       <View>
@@ -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>
+      {sections.map((section, i) => (
-        <SearchScreenUserResults query={query} />
+        <View key={i}>{section.component}</View>
-      </View>
+      ))}
     </Pager>
   ) : (
     <CenteredView sideBorders style={pal.border}>