[C-4421] Add mobile UserCard and skeletons

packages/mobile/src/components/collection-list/CollectionCardSkeleton.tsx

@@ -1,51 +1,25 @@
-import { View } from 'react-native'
+import { Divider, Flex, Paper } from '@audius/harmony-native'
 
-import { Tile } from 'app/components/core'
-import { Skeleton, StaticSkeleton } from 'app/components/skeleton'
-import { makeStyles } from 'app/styles'
-
-const useStyles = makeStyles(({ spacing }) => ({
-  root: {
-    height: 218
-  },
-  cardContent: {
-    paddingHorizontal: spacing(2)
-  },
-  imageContainer: {
-    paddingTop: spacing(2),
-    paddingHorizontal: spacing(1)
-  },
-  image: {
-    height: 152,
-    width: '100%',
-    borderRadius: 6
-  },
-  textContainer: {
-    paddingVertical: spacing(1),
-    alignItems: 'center'
-  },
-  title: {
-    height: 16,
-    width: 75,
-    marginVertical: spacing(1)
-  },
-  stats: {
-    height: 14,
-    width: 150
-  }
-}))
+import { Skeleton } from '../skeleton'
 
 export const CollectionCardSkeleton = () => {
-  const styles = useStyles()
   return (
-    <Tile styles={{ tile: styles.root, content: styles.cardContent }}>
-      <View style={styles.imageContainer}>
-        <Skeleton style={styles.image} />
-      </View>
-      <View style={styles.textContainer}>
-        <StaticSkeleton style={styles.title} />
-        <StaticSkeleton style={styles.stats} />
-      </View>
-    </Tile>
+    <Paper border='default'>
+      <Flex p='s' gap='s' alignItems='center'>
+        <Skeleton style={{ width: '100%', aspectRatio: 1 }} />
+        <Skeleton height={20} width={150} style={{ marginBottom: 6 }} />
+        <Skeleton height={18} width={100} style={{ marginBottom: 4 }} />
+      </Flex>
+      <Divider orientation='horizontal' />
+      <Flex
+        pv='s'
+        backgroundColor='surface1'
+        alignItems='center'
+        borderBottomLeftRadius='m'
+        borderBottomRightRadius='m'
+      >
+        <Skeleton height={16} width={100} />
+      </Flex>
+    </Paper>
   )
 }

packages/mobile/src/components/suggested-follows/SuggestedArtistsList.tsx

@@ -12,8 +12,8 @@ import {
 import LinearGradient from 'react-native-linear-gradient'
 import { useDispatch, useSelector } from 'react-redux'
 
-import type { ProfileListProps } from 'app/components/profile-list'
-import { ProfileCard, ProfileList } from 'app/components/profile-list'
+import type { UserListProps } from 'app/components/user-list'
+import { ProfileCard, UserList } from 'app/components/user-list'
 import type { AppState } from 'app/store'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
@@ -24,7 +24,7 @@ const useStyles = makeStyles(({ palette }) => ({
   }
 }))
 
-type SuggestedArtistsListProps = Partial<ProfileListProps>
+type SuggestedArtistsListProps = Partial<UserListProps>
 
 export const SuggestedArtistsList = (props: SuggestedArtistsListProps) => {
   const styles = useStyles()
@@ -59,7 +59,7 @@ export const SuggestedArtistsList = (props: SuggestedArtistsListProps) => {
   )
 
   return (
-    <ProfileList
+    <UserList
       profiles={suggestedArtists}
       renderItem={({ item: artist }) => {
         const { user_id } = artist

packages/mobile/src/components/profile-list/ProfileCard.tsx → packages/mobile/src/components/user-list/ProfileCard.tsx

@@ -21,6 +21,7 @@ type ProfileCardProps = Partial<Omit<BaseProfileCardProps, 'onPress'>> & {
   onPress?: (id: ID) => void
 }
 
+// @deprecated -- use UserCard instead
 export const ProfileCard = (props: ProfileCardProps) => {
   const { profile, preventNavigation, onPress, ...other } = props
   const { user_id, handle } = profile

packages/mobile/src/components/user-list/UserCard.tsx

@@ -0,0 +1,81 @@
+import { useCallback } from 'react'
+
+import { SquareSizes, type ID } from '@audius/common/models'
+import { cacheUsersSelectors } from '@audius/common/store'
+import { formatCount, pluralize } from '@audius/common/utils'
+import type { GestureResponderEvent } from 'react-native'
+import { useSelector } from 'react-redux'
+
+import {
+  Avatar,
+  Divider,
+  Flex,
+  Paper,
+  Text,
+  type PaperProps
+} from '@audius/harmony-native'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { useProfilePicture } from '../image/UserImage'
+import { UserLink } from '../user-link'
+
+const { getUser } = cacheUsersSelectors
+
+const messages = {
+  follower: 'Follower'
+}
+
+type UserCardProps = PaperProps & {
+  userId: ID
+  noNavigation?: boolean
+}
+export const UserCard = (props: UserCardProps) => {
+  const { userId, onPress, noNavigation, ...other } = props
+
+  const user = useSelector((state) => getUser(state, { id: userId }))
+  const navigation = useNavigation()
+
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      onPress?.(e)
+      if (noNavigation) return
+      navigation.navigate('Profile', { id: userId })
+    },
+    [onPress, noNavigation, navigation, userId]
+  )
+
+  const { source, handleError } = useProfilePicture(
+    userId,
+    SquareSizes.SIZE_480_BY_480
+  )
+
+  if (user === null) return null
+
+  const { handle, follower_count } = user
+
+  return (
+    <Paper border='default' onPress={handlePress} {...other}>
+      <Avatar source={source} onError={handleError} aria-hidden p='m' pb='s' />
+      <Flex ph='l' pb='s' gap='xs'>
+        <UserLink userId={userId} textVariant='title' />
+        <Text ellipses textAlign='center'>
+          @{handle}
+        </Text>
+      </Flex>
+      <Divider />
+      <Flex
+        pv='s'
+        backgroundColor='surface1'
+        alignItems='center'
+        borderBottomLeftRadius='m'
+        borderBottomRightRadius='m'
+      >
+        {/* Ensures correct footer height */}
+        <Text size='s' strength='strong' style={{ lineHeight: 16 }}>
+          {formatCount(follower_count)}{' '}
+          {pluralize(messages.follower, follower_count)}
+        </Text>
+      </Flex>
+    </Paper>
+  )
+}

packages/mobile/src/components/user-list/UserCardSkeleton.tsx

@@ -0,0 +1,31 @@
+import { Box, Divider, Flex, Paper } from '@audius/harmony-native'
+
+import { Skeleton } from '../skeleton'
+
+export const UserCardSkeleton = () => {
+  return (
+    <Paper border='default'>
+      <Box p='m' pb='s'>
+        <Skeleton
+          style={{ width: '100%', aspectRatio: 1, borderRadius: 1000 }}
+        />
+      </Box>
+      <Flex ph='l' pt='xs' pb='m' gap='xs' alignItems='center'>
+        {/* marginBottom is simulating line-height */}
+        <Skeleton height={18} width={150} style={{ marginBottom: 6 }} />
+        <Skeleton height={16} width={100} />
+      </Flex>
+      <Divider />
+      <Flex
+        pv='s'
+        backgroundColor='surface1'
+        alignItems='center'
+        borderBottomLeftRadius='m'
+        borderBottomRightRadius='m'
+      >
+        {/* marginBottom is simulating line-height */}
+        <Skeleton height={16} width={100} style={{ marginBottom: 2 }} />
+      </Flex>
+    </Paper>
+  )
+}

packages/mobile/src/components/profile-list/ProfileList.tsx → packages/mobile/src/components/user-list/UserList.tsx

@@ -3,25 +3,28 @@ import type { ID, User } from '@audius/common/models'
 import type { CardListProps } from 'app/components/core'
 import { CardList } from 'app/components/core'
 
-import { ProfileCard } from './ProfileCard'
-import { ProfileCardSkeleton } from './ProfileCardSkeleton'
+import { UserCard } from './UserCard'
+import { UserCardSkeleton } from './UserCardSkeleton'
 
 type ListProps = Omit<CardListProps<User>, 'data'>
 
-export type ProfileListProps = {
+export type UserListProps = {
   profiles: User[] | undefined
   onCardPress?: (user_id: ID) => void
 } & Partial<ListProps>
 
-export const ProfileList = (props: ProfileListProps) => {
+export const UserList = (props: UserListProps) => {
   const { profiles, onCardPress, ...other } = props
   return (
     <CardList
       data={profiles}
       renderItem={({ item }) => (
-        <ProfileCard profile={item} onPress={onCardPress} />
+        <UserCard
+          userId={item.user_id}
+          onPress={() => onCardPress?.(item.user_id)}
+        />
       )}
-      LoadingCardComponent={ProfileCardSkeleton}
+      LoadingCardComponent={UserCardSkeleton}
       {...other}
     />
   )

packages/mobile/src/components/profile-list/index.ts → packages/mobile/src/components/user-list/index.ts

@@ -1,2 +1,2 @@
-export * from './ProfileList'
+export * from './UserList'
 export * from './ProfileCard'

packages/mobile/src/harmony-native/components/Avatar/Avatar.tsx

@@ -4,9 +4,8 @@ import { css } from '@emotion/native'
 import { View } from 'react-native'
 import type { SetRequired } from 'type-fest'
 
-import { useTheme } from '@audius/harmony-native'
-import type { MarginProps } from 'app/harmony-native/utils/styleProps'
-import { useMargin } from 'app/harmony-native/utils/styleProps'
+import type { BoxProps } from '@audius/harmony-native'
+import { Box, useTheme } from '@audius/harmony-native'
 
 import type { FastImageProps } from '../FastImage/FastImage'
 import { FastImage } from '../FastImage/FastImage'
@@ -16,11 +15,14 @@ type TweakedFastImageProps = Omit<FastImageProps, 'priority'> &
   Partial<PickRename<FastImageProps, 'priority', 'imagePriority'>>
 
 export type AvatarProps = Omit<HarmonyAvatarProps, 'src'> &
-  SetRequired<TweakedFastImageProps, 'accessibilityLabel'> &
-  MarginProps
+  (
+    | SetRequired<TweakedFastImageProps, 'accessibilityLabel'>
+    | (TweakedFastImageProps & { 'aria-hidden'?: true })
+  ) &
+  BoxProps
 
 const sizeMap = {
-  auto: '100%' as const,
+  auto: undefined,
   small: 24,
   medium: 40,
   large: 72,
@@ -40,7 +42,7 @@ export const Avatar = (props: AvatarProps) => {
   const {
     children,
     source,
-    size = 'medium',
+    size = 'auto',
     strokeWidth = 'default',
     variant = 'default',
     style,
@@ -49,8 +51,6 @@ export const Avatar = (props: AvatarProps) => {
 
   const { color, shadows } = useTheme()
 
-  const margin = useMargin(other)
-
   const borderRadius = 9999
 
   const rootCss = css({
@@ -65,24 +65,25 @@ export const Avatar = (props: AvatarProps) => {
   })
 
   const imageCss = css({
-    flex: 1,
+    width: '100%',
+    aspectRatio: 1,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
     borderRadius
   })
 
   return (
-    <View style={[rootCss, margin, style]}>
-      {source !== undefined ? (
-        <FastImage style={imageCss} source={source} {...other}>
-          {children}
-        </FastImage>
-      ) : (
-        <View style={imageCss} {...other}>
-          {children}
-        </View>
-      )}
-    </View>
+    <Box {...other}>
+      <Box style={[rootCss, style]}>
+        {source !== undefined ? (
+          <FastImage style={imageCss} source={source}>
+            {children}
+          </FastImage>
+        ) : (
+          <View style={imageCss}>{children}</View>
+        )}
+      </Box>
+    </Box>
   )
 }