Search - extra tabs

src/state/queries/search-posts.ts

@@ -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,

src/view/com/pager/Pager.tsx

@@ -1,10 +1,11 @@
 import React, {forwardRef} from 'react'
 import {Animated, View} from 'react-native'
 import PagerView, {
-  PagerViewOnPageSelectedEvent,
   PagerViewOnPageScrollEvent,
+  PagerViewOnPageSelectedEvent,
   PageScrollStateChangedNativeEvent,
 } from 'react-native-pager-view'
+
 import {s} from 'lib/styles'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent

src/view/screens/Search/Search.tsx

@@ -12,6 +12,7 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
+import {type I18n} from '@lingui/core'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import AsyncStorage from '@react-native-async-storage/async-storage'
@@ -22,6 +23,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 {useGate} from '#/lib/statsig/statsig'
 import {augmentSearchQuery} from '#/lib/strings/helpers'
 import {s} from '#/lib/styles'
 import {logger} from '#/logger'
@@ -191,7 +193,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 +217,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 +324,33 @@ function SearchScreenUserResults({query}: {query: string}) {
   )
 }
 
-const SECTIONS_LOGGEDOUT = ['Users']
-const SECTIONS_LOGGEDIN = ['Posts', 'Users']
+const SECTIONS_LOGGEDOUT = ['PEOPLE'] as const
+const SECTIONS_LOGGEDIN = ['TOP', 'LATEST', 'PEOPLE'] as const
+const SECTIONS_LOGGEDOUT_LEGACY = ['USERS'] as const
+const SECTIONS_LOGGEDIN_LEGACY = ['POSTS', 'USERS'] as const
+
+function getSectionName(
+  i18n: I18n,
+  section:
+    | (typeof SECTIONS_LOGGEDIN)[number]
+    | (typeof SECTIONS_LOGGEDOUT)[number]
+    | (typeof SECTIONS_LOGGEDIN_LEGACY)[number]
+    | (typeof SECTIONS_LOGGEDOUT_LEGACY)[number],
+) {
+  switch (section) {
+    case 'TOP':
+      return i18n._(msg`Top`)
+    case 'LATEST':
+      return i18n._(msg`Latest`)
+    case 'PEOPLE':
+      return i18n._(msg`People`)
+    case 'POSTS':
+      return i18n._(msg`Posts`)
+    case 'USERS':
+      return i18n._(msg`Users`)
+  }
+}
+
 export function SearchScreenInner({
   query,
   primarySearch,
@@ -330,6 +363,10 @@ export function SearchScreenInner({
   const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
   const {hasSession} = useSession()
   const {isDesktop} = useWebMediaQueries()
+  const {i18n} = useLingui()
+
+  // New Search feature gate
+  const isNewSearch = useGate('new_search')
 
   const onPageSelected = React.useCallback(
     (index: number) => {
@@ -339,6 +376,19 @@ export function SearchScreenInner({
     [setDrawerSwipeDisabled, setMinimalShellMode],
   )
 
+  const sections = React.useMemo(() => {
+    if (isNewSearch) {
+      return hasSession ? SECTIONS_LOGGEDIN : SECTIONS_LOGGEDOUT
+    } else {
+      return hasSession ? SECTIONS_LOGGEDIN_LEGACY : SECTIONS_LOGGEDOUT_LEGACY
+    }
+  }, [hasSession, isNewSearch])
+
+  const tabBarItems = React.useMemo(
+    () => sections.map(section => getSectionName(i18n, section)),
+    [sections, i18n],
+  )
+
   if (hasSession) {
     return query ? (
       <Pager
@@ -347,16 +397,30 @@ export function SearchScreenInner({
           <CenteredView
             sideBorders
             style={[pal.border, pal.view, styles.tabBarContainer]}>
-            <TabBar items={SECTIONS_LOGGEDIN} {...props} />
+            <TabBar items={tabBarItems} {...props} />
           </CenteredView>
         )}
         initialPage={0}>
-        <View>
-          <SearchScreenPostResults query={query} />
-        </View>
-        <View>
-          <SearchScreenUserResults query={query} />
-        </View>
+        {isNewSearch
+          ? [
+              <View key="top">
+                <SearchScreenPostResults query={query} sort="top" />
+              </View>,
+              <View key="latest">
+                <SearchScreenPostResults query={query} sort="latest" />
+              </View>,
+              <View key="people">
+                <SearchScreenUserResults query={query} />
+              </View>,
+            ]
+          : [
+              <View key="posts">
+                <SearchScreenPostResults query={query} />
+              </View>,
+              <View key="users">
+                <SearchScreenUserResults query={query} />
+              </View>,
+            ]}
       </Pager>
     ) : (
       <View>
@@ -389,7 +453,7 @@ export function SearchScreenInner({
         <CenteredView
           sideBorders
           style={[pal.border, pal.view, styles.tabBarContainer]}>
-          <TabBar items={SECTIONS_LOGGEDOUT} {...props} />
+          <TabBar items={tabBarItems} {...props} />
         </CenteredView>
       )}
       initialPage={0}>