[C-2971] Add Avatar (#3902)

Author: dylanjeffers

packages/web/src/components/avatar/Avatar.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+}
+
+.image {
+  border-radius: 50%;
+  border: 1px solid var(--white);
+  box-shadow: 0 0 1px 0 rgba(133, 129, 153, 0.5);
+
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: var(--default-profile-picture-background);
+}
+
+.imageWrapper {
+  position: relative;
+  overflow: hidden;
+  flex: 0 0 48px;
+  height: 48px;
+  width: 48px;
+}
+
+.skeleton {
+  border-radius: 50%;
+}

packages/web/src/components/avatar/Avatar.tsx

@@ -0,0 +1,65 @@
+import {
+  ID,
+  Maybe,
+  SquareSizes,
+  accountSelectors,
+  cacheUsersSelectors
+} from '@audius/common'
+import { Link } from 'react-router-dom'
+
+import DynamicImage from 'components/dynamic-image/DynamicImage'
+import { useProfilePicture } from 'hooks/useUserProfilePicture'
+import { useSelector } from 'utils/reducer'
+import { SIGN_IN_PAGE, profilePage } from 'utils/route'
+
+import styles from './Avatar.module.css'
+
+const { getAccountUser } = accountSelectors
+
+const { getUser } = cacheUsersSelectors
+
+const messages = {
+  goTo: 'Go to',
+  your: 'your',
+  profile: 'profile'
+}
+
+type AvatarProps = {
+  userId: Maybe<ID>
+}
+
+export const Avatar = (props: AvatarProps) => {
+  const { userId } = props
+  const profileImage = useProfilePicture(
+    userId ?? null,
+    SquareSizes.SIZE_150_BY_150
+  )
+
+  const goTo = useSelector((state) => {
+    const profile = getUser(state, { id: userId })
+    if (!profile) return SIGN_IN_PAGE
+    const { handle } = profile
+    return profilePage(handle)
+  })
+
+  const name = useSelector((state) => {
+    const user = getUser(state, { id: userId })
+    const currentUser = getAccountUser(state)
+    return user?.user_id === currentUser?.user_id ? messages.your : user?.name
+  })
+
+  return (
+    <Link
+      to={goTo}
+      aria-label={`${messages.goTo} ${name} ${messages.profile}`}
+      className={styles.root}
+    >
+      <DynamicImage
+        className={styles.image}
+        wrapperClassName={styles.imageWrapper}
+        skeletonClassName={styles.skeleton}
+        image={profileImage}
+      />
+    </Link>
+  )
+}

packages/web/src/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar'

packages/web/src/hooks/useUserProfilePicture.ts

@@ -3,12 +3,19 @@ import {
   SquareSizes,
   useImageSize,
   cacheUsersActions,
-  imageProfilePicEmpty as profilePicEmpty
+  imageProfilePicEmpty as profilePicEmpty,
+  cacheUsersSelectors
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
+import { useSelector } from 'utils/reducer'
+
 const { fetchProfilePicture } = cacheUsersActions
+const { getUser } = cacheUsersSelectors
 
+/**
+ * @deprecated Use useProfilePicture instead
+ */
 export const useUserProfilePicture = (
   userId: number | null,
   profilePictureSizes: ProfilePictureSizes | null,
@@ -28,6 +35,28 @@ export const useUserProfilePicture = (
   })
 }
 
+export const useProfilePicture = (
+  userId: number | null,
+  size: SquareSizes,
+  defaultImage: string = profilePicEmpty as string,
+  load = true
+) => {
+  const dispatch = useDispatch()
+  const profilePictureSizes = useSelector(
+    (state) => getUser(state, { id: userId })?._profile_picture_sizes
+  )
+  return useImageSize({
+    dispatch,
+    id: userId,
+    sizes: profilePictureSizes ?? null
+    sizes: profilePictureSizes ?? null,
+    size,
+    action: fetchProfilePicture,
+    defaultImage,
+    load
+  })
+}
+
 /**
  * Like useUserProfilePicture, but onDemand is set to true, which
  * returns a callback that can be used to fetch the image on demand.