Fix cache types

packages/common/src/store/account/selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 
+import { Collection } from 'models/Collection'
 import { getCollections } from 'store/cache/collections/selectors'
 import { getUser, getUsers } from 'store/cache/users/selectors'
 import { removeNullable } from 'utils/typeUtils'
@@ -78,11 +79,12 @@ export const getAccountWithCollections = createSelector(
           !collections[collection.id]?._marked_deleted &&
           !collections[collection.id]?.is_delete &&
           collection.user.id in users &&
-          !users[collection.user.id].is_deactivated
+          users[collection.user.id] &&
+          !users[collection.user.id]?.is_deactivated
             ? {
                 ...collections[collection.id],
                 ownerHandle: collection.user.handle,
-                ownerName: users[collection.user.id].name
+                ownerName: users[collection.user.id]!.name
               }
             : null
         )
@@ -116,7 +118,7 @@ export const getUserPlaylists = createSelector(
     // If we haven't cached the collection (e.g. on first load), always return it.
     // If we have cached it and it's marked delete, don't return it bc we know better now.
     return playlists.filter(
-      (p) => !collections[p.id] || !collections[p.id]._marked_deleted
+      (p) => !collections[p.id] || !collections[p.id]?._marked_deleted
     )
   }
 )
@@ -126,7 +128,7 @@ export const getAccountCollections = createSelector(
   (accountCollections, collections) => {
     return Object.keys(accountCollections).reduce((acc, cur) => {
       const track = accountCollections[cur as unknown as number]
-      if (!collections[track.id] || collections[track.id]._marked_deleted)
+      if (!collections[track.id] || collections[track.id]?._marked_deleted)
         return acc
       return {
         ...acc,
@@ -142,7 +144,7 @@ export const getAccountWithPlaylists = createSelector(
     if (!account) return undefined
     return {
       ...account,
-      playlists: account.collections.filter((c) => !c.is_album)
+      playlists: account.collections.filter((c) => !c.is_album) as Collection[]
     }
   }
 )
@@ -155,7 +157,7 @@ export const getAccountWithOwnPlaylists = createSelector(
       ...account,
       playlists: account.collections.filter(
         (c) => account && !c.is_album && account.user_id === c.playlist_owner_id
-      )
+      ) as Collection[]
     }
   }
 )
@@ -175,9 +177,13 @@ export const getAccountWithNameSortedPlaylistsAndAlbums = createSelector(
   [getAccountWithCollections],
   (account) => {
     if (!account) return undefined
-    const nameSortedCollections = account.collections.sort((a, b) =>
-      a.playlist_name.toLowerCase().localeCompare(b.playlist_name.toLowerCase())
-    )
+    const nameSortedCollections = account.collections.sort((a, b) => {
+      if (!a || !a.playlist_name) return 1
+      if (!b || !b.playlist_name) return -1
+      return a.playlist_name
+        .toLowerCase()
+        .localeCompare(b.playlist_name.toLowerCase())
+    })
     return {
       ...account,
       playlists: nameSortedCollections.filter((c) => !c.is_album),

packages/common/src/store/cache/collections/selectors.ts

@@ -119,14 +119,20 @@ export const getTracksFromCollection = (
       trackUid.source = `${collectionSource}:${trackUid.source}`
       trackUid.count = i
 
-      if (!tracks[t.track]) {
+      const track = tracks[t.track]
+      if (!track) {
         console.error(`Found empty track ${t.track}`)
         return null
       }
+      const user = users[track.owner_id]
+      if (!user) {
+        console.error(`Found empty user ${track.owner_id}`)
+        return null
+      }
       return {
         ...tracks[t.track],
         uid: trackUid.toString(),
-        user: users[tracks[t.track].owner_id]
+        user
       }
     })
     .filter(Boolean) as EnhancedCollectionTrack[]

packages/common/src/store/cache/selectors.ts

@@ -86,28 +86,28 @@ export const getEntryTimestamp = (
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.USERS }
-): { [id: string]: User }
+): Partial<Record<string, User>>
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.COLLECTIONS }
-): { [id: string]: Collection }
+): Partial<Record<string, Collection>>
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.TRACKS }
-): { [id: string]: Track }
+): Partial<Record<string, Track>>
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.USERS }
 ):
-  | { [id: string]: User }
-  | { [id: string]: Track }
-  | { [id: string]: Collection }
+  | Partial<Record<string, User>>
+  | Partial<Record<string, Track>>
+  | Partial<Record<string, Collection>>
 export function getAllEntries(state: CommonState, props: { kind: Kind }) {
   const entries = getCache(state, props).entries
   return Object.keys(entries).reduce((acc, id) => {
     acc[id] = entries[id as unknown as number].metadata
     return acc
-  }, {} as { [id: string]: Track | Collection | User })
+  }, {} as Partial<Record<string, User>> | Partial<Record<string, Track>> | Partial<Record<string, Collection>>)
 }
 
 export function getCache(

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

@@ -61,7 +61,9 @@ export const getUsers = (
         getUserByHandle(state, { handle: handle.toLowerCase() }) || {}
       if (id) {
         const user = getUser(state, { id })
-        if (user) users[handle] = user
+        if (user) {
+          users[handle] = user
+        }
       }
     })
     return users

packages/common/src/store/pages/explore/exploreCollections/selectors.ts

@@ -1,8 +1,9 @@
 import { getCollections as getCachedCollections } from 'store/cache/collections/selectors'
 import { getUsers } from 'store/cache/users/selectors'
 import { CommonState } from 'store/commonStore'
+import { removeNullable } from 'utils/typeUtils'
 
-import { Collection, Status } from '../../../../models'
+import { Status, UserCollection } from '../../../../models'
 import { ExploreCollectionsVariant } from '../types'
 
 const getBaseState = (state: CommonState) => state.pages.exploreCollections
@@ -25,13 +26,17 @@ export const getCollections = (
 
   const collectionsList = collectionIds.map((id) => collections[id])
 
-  const userIds = collectionsList.map((c: Collection) => c.playlist_owner_id)
+  const userIds = collectionsList
+    .map((c) => c?.playlist_owner_id)
+    .filter(removeNullable)
   const users = getUsers(state, { ids: userIds })
 
-  const userCollections = collectionsList.map((c: Collection) => ({
+  const userCollections = collectionsList.map((c) => ({
     ...c,
-    user: users[c.playlist_owner_id]
-  }))
+    user: c ? users[c.playlist_owner_id] : null
+  })) as UserCollection[]
 
-  return userCollections.filter((playlist) => !playlist.user.is_deactivated)
+  return userCollections.filter(
+    (playlist) => playlist.user && !playlist.user.is_deactivated
+  )
 }

packages/common/src/store/pages/explore/selectors.ts

@@ -39,11 +39,12 @@ export const makeGetExplore = () => {
     (explore, collections, users) => {
       const playlists = explore.playlists
         .map((id) => collections[id])
-        .filter(Boolean)
+        .filter(removeNullable)
         .map((collection) => ({
           ...collection,
-          user: users[collection.playlist_owner_id] || {}
+          user: collection ? users[collection.playlist_owner_id] : null
         }))
+        .filter((collection) => collection.user) as UserCollection[]
       const profiles = explore.profiles.map((id) => users[id]).filter(Boolean)
       return {
         playlists,

packages/common/src/store/pages/profile/selectors.ts

@@ -77,7 +77,7 @@ export const getProfileCollections = createDeepEqualSelector(
   ],
   (userId, users, collections) => {
     if (!userId) return undefined
-    const user: User = users[userId]
+    const user = users[userId]
     if (!user) return undefined
     const { handle, _collectionIds } = user
     const userCollections = _collectionIds
@@ -146,7 +146,7 @@ export const makeGetProfile = () => {
       if (!(userId in users)) return emptyState
 
       // Get playlists & albums.
-      const c = (users[userId]._collectionIds || [])
+      const c = (users?.[userId]?._collectionIds ?? [])
         .map((id) =>
           id in collections ? collections[id as unknown as number] : null
         )
@@ -204,6 +204,8 @@ export const makeGetProfile = () => {
             status: followees?.status ?? Status.IDLE,
             users: followeesPopulated
           }
+        } as User & { followers: { status: Status; users: User[] } } & {
+          followees: { status: Status; users: User[] }
         },
         mostUsedTags,
         playlists,

packages/common/src/store/pages/search-results/selectors.ts

@@ -29,7 +29,7 @@ export const makeGetSearchArtists = () => {
   return createSelector(
     [getSearchArtistsIds, getUnsortedSearchArtists],
     (ids, artists) =>
-      ids.map((id) => artists[id]).filter((a) => !a.is_deactivated)
+      ids.map((id) => artists[id]).filter((a) => !a?.is_deactivated)
   )
 }
 
@@ -41,7 +41,7 @@ export const makeGetSearchAlbums = () => {
       .map((album) => {
         return {
           ...album,
-          user: users[album.playlist_owner_id]
+          user: album ? users[album.playlist_owner_id] : null
         }
       })
       .filter((album) => !!album.user && !album.user.is_deactivated)
@@ -58,10 +58,17 @@ export const makeGetSearchPlaylists = () => {
         .map((playlist) => {
           return {
             ...playlist,
-            user: users[playlist.playlist_owner_id],
-            trackCount: (playlist.playlist_contents.track_ids || []).length
+            user: playlist ? users[playlist.playlist_owner_id] : null,
+            trackCount: playlist
+              ? (playlist.playlist_contents.track_ids || []).length
+              : null
           }
         })
-        .filter((playlist) => !!playlist.user && !playlist.user.is_deactivated)
+        .filter(
+          (playlist) =>
+            !!playlist.user &&
+            !playlist.user.is_deactivated &&
+            playlist.trackCount !== null
+        )
   )
 }

packages/common/src/store/ui/createPlaylistModal/selectors.ts

@@ -1,7 +1,9 @@
+import { UserTrack } from 'models/Track'
 import { getCollection } from 'store/cache/collections/selectors'
 import { getTracks as getCachedTracks } from 'store/cache/tracks/selectors'
 import { getUsers } from 'store/cache/users/selectors'
 import { CommonState } from 'store/commonStore'
+import { removeNullable } from 'utils/typeUtils'
 
 export const getBaseState = (state: CommonState) => state.ui.createPlaylistModal
 
@@ -22,13 +24,23 @@ export const getTracks = (state: CommonState) => {
 
   const trackIds = metadata.playlist_contents.track_ids.map((t) => t.track)
   const tracks = getCachedTracks(state, { ids: trackIds })
-  const userIds = Object.keys(tracks).map(
-    (trackId) => tracks[trackId as unknown as number].owner_id
-  )
+  const userIds = Object.keys(tracks)
+    .map((trackId) => {
+      const parsedTrackId = parseInt(trackId)
+      const track = tracks[parsedTrackId]
+      if (!track) return null
+      return track.owner_id
+    })
+    .filter(removeNullable)
   const users = getUsers(state, { ids: userIds })
 
-  return trackIds.map((id) => ({
-    ...tracks[id],
-    user: users[tracks[id].owner_id]
-  }))
+  return trackIds
+    .map((id) => {
+      if (!tracks[id] && !users?.[tracks[id]!.owner_id]) return null
+      return {
+        ...tracks[id],
+        user: users?.[tracks[id]!.owner_id]
+      } as UserTrack
+    })
+    .filter(removeNullable)
 }

packages/mobile/src/components/add-to-playlist-drawer/AddToPlaylistDrawer.tsx

@@ -6,7 +6,8 @@ import {
   accountSelectors,
   cacheCollectionsActions,
   addToPlaylistUISelectors,
-  newCollectionMetadata
+  newCollectionMetadata,
+  removeNullable
 } from '@audius/common'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
@@ -97,7 +98,7 @@ export const AddToPlaylistDrawer = () => {
         </View>
         <CardList
           contentContainerStyle={styles.cardList}
-          data={userPlaylists}
+          data={userPlaylists.filter(removeNullable)}
           renderItem={({ item }) => (
             <Card
               key={item.playlist_id}

packages/mobile/src/screens/notifications-screen/Notifications/FavoriteNotification.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 
 import type { FavoriteNotification as FavoriteNotificationType } from '@audius/common'
 import {
+  removeNullable,
   formatCount,
   notificationsSelectors,
   useProxySelector
@@ -59,7 +60,7 @@ export const FavoriteNotification = (props: FavoriteNotificationProps) => {
   return (
     <NotificationTile notification={notification} onPress={handlePress}>
       <NotificationHeader icon={IconHeart}>
-        <ProfilePictureList users={users} />
+        <ProfilePictureList users={users.filter(removeNullable)} />
       </NotificationHeader>
       <NotificationText>
         <UserNameLink user={firstUser} />

packages/mobile/src/screens/notifications-screen/Notifications/FollowNotification.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 
 import type { FollowNotification as FollowNotificationType } from '@audius/common'
 import {
+  removeNullable,
   useProxySelector,
   formatCount,
   notificationsSelectors
@@ -52,7 +53,7 @@ export const FollowNotification = (props: FollowNotificationProps) => {
   return (
     <NotificationTile notification={notification} onPress={handlePress}>
       <NotificationHeader icon={IconUser}>
-        <ProfilePictureList users={users} />
+        <ProfilePictureList users={users.filter(removeNullable)} />
       </NotificationHeader>
       <NotificationText>
         <UserNameLink user={firstUser} />

packages/mobile/src/screens/notifications-screen/Notifications/RepostNotification.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 
 import type { RepostNotification as RepostNotificationType } from '@audius/common'
 import {
+  removeNullable,
   useProxySelector,
   formatCount,
   notificationsSelectors
@@ -58,7 +59,7 @@ export const RepostNotification = (props: RepostNotificationProps) => {
   return (
     <NotificationTile notification={notification} onPress={handlePress}>
       <NotificationHeader icon={IconRepost}>
-        <ProfilePictureList users={users} />
+        <ProfilePictureList users={users.filter(removeNullable)} />
       </NotificationHeader>
       <NotificationText>
         <UserNameLink user={firstUser} />