[C-4076] Fix search results profile images (#7958)

packages/mobile/src/components/core/ProfilePicture.tsx

@@ -1,4 +1,4 @@
-import type { ID } from '@audius/common/models'
+import type { ID, User } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
 import { cacheUsersSelectors } from '@audius/common/store'
 import { useSelector } from 'react-redux'
@@ -9,30 +9,42 @@ import { Avatar } from '@audius/harmony-native'
 import { useProfilePicture } from '../image/UserImage'
 const { getUser } = cacheUsersSelectors
 
-export type ProfilePictureProps = Omit<
-  AvatarProps,
-  'source' | 'accessibilityLabel'
-> & {
-  userId: ID
+const messages = {
+  profilePictureFor: 'Profile picture for'
 }
 
+type BaseAvatarProps = Omit<AvatarProps, 'source' | 'accessibilityLabel'>
+
+// User should prefer userId, and provide user if it's not in the cache
+type ProfilePictureUserProps =
+  | {
+      userId: ID
+    }
+  | { user: Pick<User, 'user_id' | 'name' | 'profile_picture_sizes'> }
+
+export type ProfilePictureProps = BaseAvatarProps & ProfilePictureUserProps
+
 export const ProfilePicture = (props: ProfilePictureProps) => {
-  const { userId, ...other } = props
+  const userId = 'user' in props ? props.user.user_id : props.userId
 
-  const userName = useSelector((state) => getUser(state, { id: userId })?.name)
-  const accessibilityLabel = `Profile picture for ${userName}`
+  const accessibilityLabel = useSelector((state) => {
+    const userName =
+      'user' in props ? props.user.name : getUser(state, { id: userId })?.name
+    return `${messages.profilePictureFor} ${userName}`
+  })
 
   const { source, handleError } = useProfilePicture(
     userId,
-    SquareSizes.SIZE_150_BY_150
+    SquareSizes.SIZE_150_BY_150,
+    'user' in props ? props.user.profile_picture_sizes : undefined
   )
 
   return (
     <Avatar
       source={source}
       onError={handleError}
       accessibilityLabel={accessibilityLabel}
-      {...other}
+      {...props}
     />
   )
 }

packages/mobile/src/components/image/UserImage.tsx

@@ -18,9 +18,11 @@ type UseUserImageOptions = {
 
 export const useProfilePicture = (
   userId: Nullable<number>,
-  size: SquareSizes
+  size: SquareSizes,
+  cidOverride?: Nullable<string>
 ): ContentNodeImageSource => {
   const cid = useSelector((state) => {
+    if (cidOverride) return cidOverride
     const user = getUser(state, { id: userId })
     if (!user) return null
     const { profile_picture_sizes, profile_picture } = user

packages/mobile/src/screens/search-screen/SearchResults/SearchItem.tsx

@@ -47,6 +47,7 @@ type UserSearchResultProps = { item: SearchUser }
 
 const UserSearchResult = (props: UserSearchResultProps) => {
   const { item: user } = props
+  const { name, handle, user_id } = user
   const styles = useStyles()
   const navigation = useNavigation()
   const dispatch = useDispatch()
@@ -55,21 +56,14 @@ const UserSearchResult = (props: UserSearchResultProps) => {
     'autocomplete'
   )
   const handlePress = useCallback(() => {
-    dispatch(addItem({ searchItem: user.name }))
-    navigation.push('Profile', { handle: user.handle })
-    onSearchResultSelect(user.user_id)
-  }, [
-    dispatch,
-    user.name,
-    user.handle,
-    user.user_id,
-    navigation,
-    onSearchResultSelect
-  ])
+    dispatch(addItem({ searchItem: name }))
+    navigation.push('Profile', { handle })
+    onSearchResultSelect(user_id)
+  }, [dispatch, name, handle, user_id, navigation, onSearchResultSelect])
 
   return (
     <SearchResultItem onPress={handlePress}>
-      <ProfilePicture userId={user.user_id} size='medium' strokeWidth='thin' />
+      <ProfilePicture user={user} size='medium' strokeWidth='thin' />
       <UserBadges
         style={styles.badgeContainer}
         nameStyle={styles.name}