[C-2969] Fix related artist images not loading (#3905)

Author: amendelsohn

packages/common/src/audius-query/createApi.ts

@@ -10,8 +10,10 @@ import { Dispatch } from 'redux'
 import { ErrorLevel } from 'models/ErrorReporting'
 import { Kind } from 'models/Kind'
 import { Status } from 'models/Status'
+import { UserMetadata } from 'models/User'
 import { getCollection } from 'store/cache/collections/selectors'
 import { getTrack } from 'store/cache/tracks/selectors'
+import { reformatUser } from 'store/cache/users/utils'
 import { CommonState } from 'store/reducers'
 import { getErrorMessage } from 'utils/error'
 import { Nullable, removeNullable } from 'utils/typeUtils'
@@ -252,6 +254,7 @@ const fetchData = async <Args, Data>(
   context: AudiusQueryContextType,
   dispatch: Dispatch
 ) => {
+  const { audiusBackend } = context
   try {
     dispatch(
       // @ts-ignore
@@ -274,6 +277,12 @@ const fetchData = async <Args, Data>(
         apiResponseSchema
       )
       data = result
+
+      // Format entities before adding to cache
+      entities[Kind.USERS] = mapValues(
+        entities[Kind.USERS] ?? [],
+        (user: UserMetadata) => reformatUser(user, audiusBackend)
+      )
       dispatch(addEntries(Object.keys(entities), entities))
     } else {
       data = apiData

packages/common/src/hooks/chats/useCanSendMessage.ts

@@ -1,14 +1,13 @@
 import { useSelector } from 'react-redux'
 
+import { useProxySelector } from 'hooks/useProxySelector'
 import { User } from 'models/User'
 import { ChatPermissionAction, CommonState } from 'store/index'
 import {
   getCanSendMessage,
   getOtherChatUsers
 } from 'store/pages/chat/selectors'
 
-import { useProxySelector } from '..'
-
 /**
  * Returns whether or not the current user can send messages to the current chat
  */

packages/common/src/store/cache/users/utils.ts

@@ -3,10 +3,10 @@ import { put } from 'typed-redux-saga'
 import { Kind } from 'models/Kind'
 import { UserMetadata } from 'models/User'
 import { AudiusBackend } from 'services/audius-backend'
-import { cacheActions } from 'store/cache'
+import * as cacheActions from 'store/cache/actions'
 import { getContext } from 'store/effects'
-import { makeUid } from 'utils'
 import { waitForRead } from 'utils/sagaHelpers'
+import { makeUid } from 'utils/uid'
 
 export function* processAndCacheUsers(users: UserMetadata[]) {
   yield* waitForRead()

packages/common/src/store/pages/chat/sagas.ts

@@ -19,15 +19,16 @@ import { Name } from 'models/Analytics'
 import { ErrorLevel } from 'models/ErrorReporting'
 import { ID } from 'models/Identifiers'
 import { Status } from 'models/Status'
+import * as toastActions from 'src/store/ui/toast/slice'
 import { getAccountUser, getUserId } from 'store/account/selectors'
-import { makeChatId, toastActions } from 'store/index'
 
 import { decodeHashId, encodeHashId, removeNullable } from '../../../utils'
 import { cacheUsersActions } from '../../cache'
 import { getContext } from '../../effects'
 
 import * as chatSelectors from './selectors'
 import { actions as chatActions } from './slice'
+import { makeChatId } from './utils'
 
 // Attach ulid to window object for debugging DMs
 // @ts-ignore

packages/common/src/store/reachability/sagas.ts

@@ -1,6 +1,6 @@
 import { takeEvery, select, all, take } from 'typed-redux-saga'
 
-import { getContext } from 'store/commonStore'
+import { getContext } from 'store/effects'
 
 import * as reachabilityActions from './actions'
 import * as reachabilitySelectors from './selectors'

packages/common/src/store/ui/search-users-modal/sagas.ts

@@ -5,7 +5,8 @@ import { accountSelectors } from 'store/account'
 import { processAndCacheUsers } from 'store/cache/users/utils'
 import { getContext } from 'store/effects'
 import { SearchKind } from 'store/pages/search-results/types'
-import { searchUsersModalActions, searchUsersModalSelectors } from 'store/ui'
+import * as searchUsersModalSelectors from 'store/ui/search-users-modal/selectors'
+import { actions as searchUsersModalActions } from 'store/ui/search-users-modal/slice'
 
 const { getUserId } = accountSelectors
 const { searchUsers, searchUsersSucceeded } = searchUsersModalActions