Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Mar 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions packages/mobile/src/components/core/ProfilePicture.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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}
/>
)
}
4 changes: 3 additions & 1 deletion packages/mobile/src/components/image/UserImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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}
Expand Down