[C-2809] Remove user from image hooks (#3723)

packages/mobile/src/components/audio/Audio.tsx

@@ -625,7 +625,6 @@ export const Audio = () => {
           ? getImageSourceOptimistic({
               cid,
               endpoints: storageNodeSelector.getNodes(cid),
-              user: trackOwner,
               size: SquareSizes.SIZE_1000_BY_1000,
               localSource: localTrackImageSource
             })?.uri ?? DEFAULT_IMAGE_URL

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

@@ -3,10 +3,9 @@ import type {
   ID,
   Maybe,
   Nullable,
-  SquareSizes,
-  User
+  SquareSizes
 } from '@audius/common'
-import { reachabilitySelectors, cacheUsersSelectors } from '@audius/common'
+import { reachabilitySelectors } from '@audius/common'
 import { useSelector } from 'react-redux'
 
 import imageEmpty from 'app/assets/images/imageBlank2x.png'
@@ -20,7 +19,6 @@ import type { FastImageProps } from './FastImage'
 import { FastImage } from './FastImage'
 
 const { getIsReachable } = reachabilitySelectors
-const { getUser } = cacheUsersSelectors
 
 type UseCollectionImageOptions = {
   collection: Nullable<
@@ -30,7 +28,6 @@ type UseCollectionImageOptions = {
     >
   >
   size: SquareSizes
-  user?: Pick<User, 'creator_node_endpoint'>
 }
 
 const useLocalCollectionImageUri = (collectionId: Maybe<ID>) => {
@@ -56,23 +53,18 @@ const useLocalCollectionImageUri = (collectionId: Maybe<ID>) => {
 }
 
 export const useCollectionImage = (options: UseCollectionImageOptions) => {
-  const { collection, size, user } = options
+  const { collection, size } = options
   const cid = collection
     ? collection.cover_art_sizes || collection.cover_art
     : null
 
-  const selectedUser = useSelector((state) =>
-    getUser(state, { id: collection?.playlist_owner_id })
-  )
-
   const localCollectionImageUri = useLocalCollectionImageUri(
     collection?.playlist_id
   )
 
   const contentNodeSource = useContentNodeImage({
     cid,
     size,
-    user: selectedUser ?? user ?? null,
     fallbackImageSource: imageEmpty,
     localSource: localCollectionImageUri
       ? { uri: localCollectionImageUri }
@@ -85,9 +77,9 @@ export const useCollectionImage = (options: UseCollectionImageOptions) => {
 type CollectionImageProps = UseCollectionImageOptions & Partial<FastImageProps>
 
 export const CollectionImage = (props: CollectionImageProps) => {
-  const { collection, size, user, style, ...other } = props
+  const { collection, size, style, ...other } = props
 
-  const collectionImageSource = useCollectionImage({ collection, size, user })
+  const collectionImageSource = useCollectionImage({ collection, size })
   const { neutralLight6 } = useThemeColors()
 
   if (!collectionImageSource) return null

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

@@ -1,12 +1,5 @@
-import type {
-  User,
-  Track,
-  Nullable,
-  SquareSizes,
-  ID,
-  Maybe
-} from '@audius/common'
-import { reachabilitySelectors, cacheUsersSelectors } from '@audius/common'
+import type { Track, Nullable, SquareSizes, ID, Maybe } from '@audius/common'
+import { reachabilitySelectors } from '@audius/common'
 import { useSelector } from 'react-redux'
 
 import imageEmpty from 'app/assets/images/imageBlank2x.png'
@@ -23,14 +16,10 @@ export const DEFAULT_IMAGE_URL =
   'https://download.audius.co/static-resources/preview-image.jpg'
 
 const { getIsReachable } = reachabilitySelectors
-const { getUser } = cacheUsersSelectors
 
 type UseTrackImageOptions = {
-  track: Nullable<
-    Pick<Track, 'track_id' | 'cover_art_sizes' | 'cover_art' | 'owner_id'>
-  >
+  track: Nullable<Pick<Track, 'track_id' | 'cover_art_sizes' | 'cover_art'>>
   size: SquareSizes
-  user?: Pick<User, 'creator_node_endpoint'>
 }
 
 const useLocalTrackImageUri = (trackId: Maybe<ID>) => {
@@ -50,19 +39,14 @@ const useLocalTrackImageUri = (trackId: Maybe<ID>) => {
   return trackImageUri
 }
 
-export const useTrackImage = ({ track, size, user }: UseTrackImageOptions) => {
+export const useTrackImage = ({ track, size }: UseTrackImageOptions) => {
   const cid = track ? track.cover_art_sizes || track.cover_art : null
 
-  const selectedUser = useSelector((state) =>
-    getUser(state, { id: track?.owner_id })
-  )
-
   const localTrackImageUri = useLocalTrackImageUri(track?.track_id)
 
   const contentNodeSource = useContentNodeImage({
     cid,
     size,
-    user: user ?? selectedUser,
     fallbackImageSource: imageEmpty,
     localSource: localTrackImageUri ? { uri: localTrackImageUri } : null
   })
@@ -73,9 +57,9 @@ export const useTrackImage = ({ track, size, user }: UseTrackImageOptions) => {
 type TrackImageProps = UseTrackImageOptions & Partial<FastImageProps>
 
 export const TrackImage = (props: TrackImageProps) => {
-  const { track, size, user, style, ...other } = props
+  const { track, size, style, ...other } = props
 
-  const trackImageSource = useTrackImage({ track, size, user })
+  const trackImageSource = useTrackImage({ track, size })
   const { neutralLight8 } = useThemeColors()
 
   if (!trackImageSource) return null

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

@@ -25,21 +25,14 @@ const interpolateImageTranslate = (animatedValue: Animated.Value) =>
   })
 
 type CoverImageUser = Nullable<
-  Pick<
-    User,
-    | 'cover_photo_sizes'
-    | 'cover_photo'
-    | 'creator_node_endpoint'
-    | 'updatedCoverPhoto'
-  >
+  Pick<User, 'cover_photo_sizes' | 'cover_photo' | 'updatedCoverPhoto'>
 >
 
 export const useUserCoverImage = (user: CoverImageUser) => {
   const cid = user ? user.cover_photo_sizes || user.cover_photo : null
 
   const contentNodeImage = useContentNodeImage({
     cid,
-    user,
     size: WidthSizes.SIZE_640,
     fallbackImageSource: imageCoverPhotoBlank
   })

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

@@ -10,10 +10,7 @@ type UseUserImageOptions = {
   user: Nullable<
     Pick<
       User,
-      | 'profile_picture_sizes'
-      | 'profile_picture'
-      | 'creator_node_endpoint'
-      | 'updatedProfilePicture'
+      'profile_picture_sizes' | 'profile_picture' | 'updatedProfilePicture'
     >
   >
   size: SquareSizes
@@ -25,7 +22,6 @@ export const useUserImage = ({ user, size }: UseUserImageOptions) => {
   const contentNodeImage = useContentNodeImage({
     cid,
     size,
-    user,
     fallbackImageSource: profilePicEmpty
   })
 

packages/mobile/src/hooks/useContentNodeImage.ts

@@ -2,7 +2,6 @@ import { useState, useMemo, useCallback } from 'react'
 
 import type { Nullable, CID, WidthSizes, SquareSizes } from '@audius/common'
 import { interleave, useAppContext } from '@audius/common'
-import type { User } from '@sentry/react-native'
 import type { ImageSourcePropType, ImageURISource } from 'react-native'
 
 export type ContentNodeImageSource = {
@@ -45,18 +44,16 @@ const createImageSourcesForEndpoints = ({
  */
 export const createAllImageSources = ({
   cid,
-  user,
   endpoints,
   size,
   localSource
 }: {
   cid: Nullable<CID>
-  user?: Nullable<{ creator_node_endpoint: Nullable<string> }>
   endpoints: string[]
   size: SquareSizes | WidthSizes
   localSource?: ImageURISource | null
 }) => {
-  if (!cid || (!user && !endpoints)) {
+  if (!cid || !endpoints) {
     return []
   }
 
@@ -86,7 +83,7 @@ export const createAllImageSources = ({
 }
 
 /**
- * Return the first image source, usually the user's primary
+ * Return the first image source, usually the best content node
  * or a local source. This is useful for cases where there is no error
  * callback if the image fails to load - like the MusicControls on the lockscreen
  */
@@ -99,17 +96,16 @@ export const getImageSourceOptimistic = (
 
 type UseContentNodeImageOptions = {
   cid: Nullable<CID>
-  user: Nullable<Pick<User, 'creator_node_endpoint'>>
   // The size of the image to fetch
   size: SquareSizes | WidthSizes
   fallbackImageSource: ImageSourcePropType
   localSource?: ImageURISource | null
 }
 
 /**
- * Load an image from a user's replica set
+ * Load an image from best content node
  *
- * If the image fails to load, try the next node in the replica set
+ * If the image fails to load, try the next best node
  *
  * Returns props for the DynamicImage component
  * @returns {
@@ -118,13 +114,10 @@ type UseContentNodeImageOptions = {
  *  isFallbackImage: boolean
  * }
  */
-export const useContentNodeImage = ({
-  cid,
-  user,
-  size,
-  fallbackImageSource,
-  localSource
-}: UseContentNodeImageOptions): ContentNodeImageSource => {
+export const useContentNodeImage = (
+  options: UseContentNodeImageOptions
+): ContentNodeImageSource => {
+  const { cid, size, fallbackImageSource, localSource } = options
   const [imageSourceIndex, setImageSourceIndex] = useState(0)
   const [failedToLoad, setFailedToLoad] = useState(false)
   const { storageNodeSelector } = useAppContext()
@@ -156,8 +149,8 @@ export const useContentNodeImage = ({
   }, [imageSourceIndex, imageSources])
 
   const showFallbackImage = useMemo(() => {
-    return !user || !cid || failedToLoad
-  }, [failedToLoad, user, cid])
+    return !cid || failedToLoad
+  }, [failedToLoad, cid])
 
   const source = useMemo(() => {
     if (showFallbackImage) {

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

@@ -95,7 +95,6 @@ const TrackSearchResult = (props: TrackSearchResultProps) => {
       <TrackImage
         track={track}
         size={SquareSizes.SIZE_150_BY_150}
-        user={track.user}
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>
@@ -134,7 +133,6 @@ const PlaylistSearchResult = (props: PlaylistSearchResultProps) => {
       <CollectionImage
         collection={playlist}
         size={SquareSizes.SIZE_150_BY_150}
-        user={playlist.user}
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>
@@ -173,7 +171,6 @@ const AlbumSearchResult = (props: AlbumSearchResultProps) => {
       <CollectionImage
         collection={album}
         size={SquareSizes.SIZE_150_BY_150}
-        user={album.user}
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>

packages/mobile/src/store/account/sagas.ts

@@ -29,7 +29,6 @@ function* cacheUserImages(user: User) {
     const profileImageUri = profile_picture_sizes
       ? getImageSourceOptimistic({
           cid: profile_picture_sizes,
-          user,
           endpoints: storageNodeSelector.getNodes(profile_picture_sizes),
           size: SquareSizes.SIZE_150_BY_150
         })?.uri
@@ -38,7 +37,6 @@ function* cacheUserImages(user: User) {
     const coverPhotoUri = cover_photo_sizes
       ? getImageSourceOptimistic({
           cid: cover_photo_sizes,
-          user,
           endpoints: storageNodeSelector.getNodes(cover_photo_sizes),
           size: WidthSizes.SIZE_640
         }).uri

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadCollectionWorker.ts

@@ -1,4 +1,4 @@
-import type { UserCollectionMetadata } from '@audius/common'
+import type { CollectionMetadata, UserCollectionMetadata } from '@audius/common'
 import {
   removeNullable,
   SquareSizes,
@@ -148,15 +148,14 @@ function* downloadCollectionAsync(
   return OfflineDownloadStatus.SUCCESS
 }
 
-function* downloadCollectionCoverArt(collection: UserCollectionMetadata) {
-  const { cover_art_sizes, cover_art, user, playlist_id } = collection
+function* downloadCollectionCoverArt(collection: CollectionMetadata) {
+  const { cover_art_sizes, cover_art, playlist_id } = collection
   const cid = cover_art_sizes ?? cover_art
   const storageNodeSelector = yield* call(getStorageNodeSelector)
 
   const imageSources = createAllImageSources({
     cid,
     endpoints: cid ? storageNodeSelector.getNodes(cid) : [],
-    user,
     size: SquareSizes.SIZE_1000_BY_1000
   })
 

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadTrackWorker.ts

@@ -1,4 +1,10 @@
-import type { ID, QueryParams, Track, UserTrackMetadata } from '@audius/common'
+import type {
+  ID,
+  QueryParams,
+  Track,
+  TrackMetadata,
+  UserTrackMetadata
+} from '@audius/common'
 import {
   getQueryParams,
   FeatureFlags,
@@ -192,16 +198,15 @@ function* downloadTrackAudio(track: UserTrackMetadata) {
   throw new Error('Unable to download track audio')
 }
 
-function* downloadTrackCoverArt(track: UserTrackMetadata) {
-  const { cover_art_sizes, cover_art, user, track_id } = track
+function* downloadTrackCoverArt(track: TrackMetadata) {
+  const { cover_art_sizes, cover_art, track_id } = track
   const cid = cover_art_sizes ?? cover_art
 
   const storageNodeSelector = yield* call(getStorageNodeSelector)
 
   const imageSources = createAllImageSources({
     cid,
     endpoints: cid ? storageNodeSelector.getNodes(cid) : [],
-    user,
     size: SquareSizes.SIZE_1000_BY_1000
   })