Update search input with useAutocomplete (#11023)

src/screens/Search/components/AutocompleteResults.tsx

@@ -1,49 +1,44 @@
 import {memo} from 'react'
-import {
-  ActivityIndicator,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {type AppBskyActorDefs} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {TouchableOpacity, View, type ViewStyle} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {Link} from '#/view/com/util/Link'
-import {Text} from '#/view/com/util/text/Text'
 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
-import {atoms as a, native} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
+import {type AutocompleteItem} from '#/components/Autocomplete'
 import * as Layout from '#/components/Layout'
+import {Link} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {IS_NATIVE} from '#/env'
+import type * as bsky from '#/types/bsky'
 
 let AutocompleteResults = ({
-  isAutocompleteFetching,
-  autocompleteData,
+  items,
+  isFetching,
   searchText,
   onSubmit,
   onResultPress,
   onProfileClick,
 }: {
-  isAutocompleteFetching: boolean
-  autocompleteData: AppBskyActorDefs.ProfileViewBasic[] | undefined
+  items: AutocompleteItem[]
+  isFetching: boolean
   searchText: string
   onSubmit: () => void
   onResultPress: () => void
-  onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void
+  onProfileClick: (profile: bsky.profile.AnyProfileView) => void
 }): React.ReactNode => {
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const moderationOpts = useModerationOpts()
+
   return (
     <>
-      {(isAutocompleteFetching && !autocompleteData?.length) ||
-      !moderationOpts ? (
+      {(isFetching && !items.length) || !moderationOpts ? (
         <Layout.Content>
-          <View style={[a.py_xl]}>
-            <ActivityIndicator />
+          <View style={[a.py_xl, a.align_center]}>
+            <Loader size="xl" />
           </View>
         </Layout.Content>
       ) : (
@@ -51,7 +46,7 @@ let AutocompleteResults = ({
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag">
           <SearchLinkCard
-            label={_(msg`Search for "${searchText}"`)}
+            label={l`Search for “${searchText}”`}
             onPress={native(onSubmit)}
             to={
               IS_NATIVE
@@ -60,21 +55,24 @@ let AutocompleteResults = ({
             }
             style={a.border_b}
           />
-          {autocompleteData?.map((item, index) => (
-            <SearchProfileCard
-              key={item.did}
-              profile={item}
-              moderationOpts={moderationOpts}
-              onPress={() => {
-                ax.metric('search:autocomplete:press', {
-                  profileDid: item.did,
-                  position: index,
-                })
-                onProfileClick(item)
-                onResultPress()
-              }}
-            />
-          ))}
+          {items.map((item, index) => {
+            if (item.type !== 'profile') return null
+            return (
+              <SearchProfileCard
+                key={item.key}
+                profile={item.profile}
+                moderationOpts={moderationOpts}
+                onPress={() => {
+                  ax.metric('search:autocomplete:press', {
+                    profileDid: item.profile.did,
+                    position: index,
+                  })
+                  onProfileClick(item.profile)
+                  onResultPress()
+                }}
+              />
+            )
+          })}
           <View style={{height: 200}} />
         </Layout.Content>
       )}
@@ -95,12 +93,12 @@ let SearchLinkCard = ({
   onPress?: () => void
   style?: ViewStyle
 }): React.ReactNode => {
-  const pal = usePalette('default')
+  const t = useTheme()
 
   const inner = (
     <View
-      style={[pal.border, {paddingVertical: 16, paddingHorizontal: 12}, style]}>
-      <Text type="md" style={[pal.text]}>
+      style={[a.flex_1, a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}>
+      <Text emoji style={[a.text_md, t.atoms.text]}>
         {label}
       </Text>
     </View>
@@ -117,18 +115,13 @@ let SearchLinkCard = ({
     )
   }
 
-  return (
-    <Link href={to} asAnchor anchorNoUnderline>
-      <View
-        style={[
-          pal.border,
-          {paddingVertical: 16, paddingHorizontal: 12},
-          style,
-        ]}>
-        <Text type="md" style={[pal.text]}>
-          {label}
-        </Text>
-      </View>
-    </Link>
-  )
+  if (to) {
+    return (
+      <Link label={label} to={to}>
+        {inner}
+      </Link>
+    )
+  }
+
+  return inner
 }