Improve typeahead search with inclusion of followed users (temporary solution) (#1612)

* Update follows cache to maintain some user info

* Prioritize follows in composer autocomplete

* Clean up logic and add new autocomplete to search

* Update follow hook

src/view/com/auth/onboarding/RecommendedFollowsItem.tsx

@@ -89,7 +89,7 @@ export const ProfileCard = observer(function ProfileCardImpl({
         </View>
 
         <FollowButton
-          did={profile.did}
+          profile={profile}
           labelStyle={styles.followButton}
           onToggleFollow={async isFollow => {
             if (isFollow) {

src/view/com/notifications/InvitedUsers.tsx

@@ -75,7 +75,7 @@ function InvitedUser({
           <FollowButton
             unfollowedType="primary"
             followedType="primary-light"
-            did={profile.did}
+            profile={profile}
           />
           <Button
             testID="dismissBtn"

src/view/com/profile/FollowButton.tsx

@@ -1,25 +1,26 @@
 import React from 'react'
 import {StyleProp, TextStyle, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {AppBskyActorDefs} from '@atproto/api'
 import {Button, ButtonType} from '../util/forms/Button'
 import * as Toast from '../util/Toast'
 import {FollowState} from 'state/models/cache/my-follows'
-import {useFollowDid} from 'lib/hooks/useFollowDid'
+import {useFollowProfile} from 'lib/hooks/useFollowProfile'
 
 export const FollowButton = observer(function FollowButtonImpl({
   unfollowedType = 'inverted',
   followedType = 'default',
-  did,
+  profile,
   onToggleFollow,
   labelStyle,
 }: {
   unfollowedType?: ButtonType
   followedType?: ButtonType
-  did: string
+  profile: AppBskyActorDefs.ProfileViewBasic
   onToggleFollow?: (v: boolean) => void
   labelStyle?: StyleProp<TextStyle>
 }) {
-  const {state, following, toggle} = useFollowDid({did})
+  const {state, following, toggle} = useFollowProfile(profile)
 
   const onPress = React.useCallback(async () => {
     try {

src/view/com/profile/ProfileCard.tsx

@@ -200,7 +200,7 @@ export const ProfileCardWithFollowBtn = observer(
         noBorder={noBorder}
         followers={followers}
         renderButton={
-          isMe ? undefined : () => <FollowButton did={profile.did} />
+          isMe ? undefined : () => <FollowButton profile={profile} />
         }
       />
     )

src/view/com/profile/ProfileHeaderSuggestedFollows.tsx

@@ -19,7 +19,7 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
-import {useFollowDid} from 'lib/hooks/useFollowDid'
+import {useFollowProfile} from 'lib/hooks/useFollowProfile'
 import {Button} from 'view/com/util/forms/Button'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
@@ -83,7 +83,7 @@ export function ProfileHeaderSuggestedFollows({
           return []
         }
 
-        store.me.follows.hydrateProfiles(suggestions)
+        store.me.follows.hydrateMany(suggestions)
 
         return suggestions
       } catch (e) {
@@ -218,7 +218,7 @@ const SuggestedFollow = observer(function SuggestedFollowImpl({
   const {track} = useAnalytics()
   const pal = usePalette('default')
   const store = useStores()
-  const {following, toggle} = useFollowDid({did: profile.did})
+  const {following, toggle} = useFollowProfile(profile)
   const moderation = moderateProfile(profile, store.preferences.moderationOpts)
 
   const onPress = React.useCallback(async () => {

src/view/screens/SearchMobile.tsx

@@ -148,18 +148,18 @@ export const SearchScreen = withAuthRequired(
               style={pal.view}
               onScroll={onMainScroll}
               scrollEventThrottle={100}>
-              {query && autocompleteView.searchRes.length ? (
+              {query && autocompleteView.suggestions.length ? (
                 <>
-                  {autocompleteView.searchRes.map((profile, index) => (
+                  {autocompleteView.suggestions.map((suggestion, index) => (
                     <ProfileCard
-                      key={profile.did}
-                      testID={`searchAutoCompleteResult-${profile.handle}`}
-                      profile={profile}
+                      key={suggestion.did}
+                      testID={`searchAutoCompleteResult-${suggestion.handle}`}
+                      profile={suggestion}
                       noBorder={index === 0}
                     />
                   ))}
                 </>
-              ) : query && !autocompleteView.searchRes.length ? (
+              ) : query && !autocompleteView.suggestions.length ? (
                 <View>
                   <Text style={[pal.textLight, styles.searchPrompt]}>
                     No results found for {autocompleteView.prefix}

src/view/shell/desktop/Search.tsx

@@ -90,9 +90,9 @@ export const DesktopSearch = observer(function DesktopSearch() {
 
       {query !== '' && (
         <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
-          {autocompleteView.searchRes.length ? (
+          {autocompleteView.suggestions.length ? (
             <>
-              {autocompleteView.searchRes.map((item, i) => (
+              {autocompleteView.suggestions.map((item, i) => (
                 <ProfileCard key={item.did} profile={item} noBorder={i === 0} />
               ))}
             </>