[C-3152] Fix remove artwork (#6392)

AudiusProject · Oct 19, 2023 · e81e86f · e81e86f
1 parent 3b2c93b
commit e81e86f
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 9 deletions.
diff --git a/packages/common/src/api/suggestedTracks.ts b/packages/common/src/api/suggestedTracks.ts
@@ -36,7 +36,7 @@ type SuggestedTrack =
   | { isLoading: false; id: ID; track: Track; key: ID }
 
 const skeletons = [...Array(5)].map((_, index) => ({
-  key: index,
+  key: index + 5,
   isLoading: true as const
 }))
 

diff --git a/packages/common/src/store/pages/collection/selectors.ts b/packages/common/src/store/pages/collection/selectors.ts
@@ -28,6 +28,10 @@ export const getCollection = (
     return getSmartCollection(state, { variant: smartCollectionVariant })
   }
 
+  if (params?.id) {
+    return getCachedCollection(state, params)
+  }
+
   const permalink = getCollectionPermalink(state)
   if (permalink) {
     return getCachedCollection(state, { permalink })

diff --git a/packages/mobile/src/hooks/useContentNodeImage.ts b/packages/mobile/src/hooks/useContentNodeImage.ts
@@ -56,6 +56,7 @@ export const createAllImageSources = ({
   cidMap?: Nullable<{ [key: string]: string }>
 }) => {
   if (!cid || !endpoints) {
+    if (localSource) return [localSource]
     return []
   }
   let cidForSize: Nullable<string> = null
@@ -156,8 +157,8 @@ export const useContentNodeImage = (
   }, [imageSourceIndex, imageSources])
 
   const showFallbackImage = useMemo(() => {
-    return !cid || failedToLoad
-  }, [failedToLoad, cid])
+    return (!cid && !localSource) || failedToLoad
+  }, [failedToLoad, localSource, cid])
 
   const source = useMemo(() => {
     if (showFallbackImage) {

diff --git a/packages/mobile/src/screens/edit-playlist-screen/PlaylistArtworkField.tsx b/packages/mobile/src/screens/edit-playlist-screen/PlaylistArtworkField.tsx
@@ -17,10 +17,12 @@ type PickArtworkFieldProps = {
 
 export const PlaylistArtworkField = (props: PickArtworkFieldProps) => {
   const { name } = props
-  const [{ value: artworkUrl }, , { setValue: setArtwork }] = useField(name)
+  const [{ value: artwork }, , { setValue: setArtwork }] = useField(name)
+  const { url: artworkUrl } = artwork
   const [{ value: collectionId }] = useField('playlist_id')
   const [{ value: isImageAutogenerated }, , { setValue: setIsAutogenerated }] =
     useField('is_image_autogenerated')
+  const [{ value: track_count }] = useField('track_count')
   const generatePlaylistArtwork = useGeneratePlaylistArtwork(collectionId)
   const { status, setStatus } = useFormikContext()
 
@@ -40,17 +42,20 @@ export const PlaylistArtworkField = (props: PickArtworkFieldProps) => {
     setStatus({ imageGenerating: false })
   }, [setStatus])
 
+  const shouldRemoveArtwork =
+    artworkUrl && !isImageAutogenerated && track_count > 0
+
   return (
     <PickArtworkField
       {...props}
-      onPress={artworkUrl && !isImageAutogenerated ? handleRemove : undefined}
+      onPress={shouldRemoveArtwork ? handleRemove : undefined}
       onChange={handleChange}
       buttonTitle={
         status.imageGenerating && isImageAutogenerated
           ? messages.updatingArtwork
           : artworkUrl && status.imageGenerating
           ? messages.removingArtwork
-          : artworkUrl && !isImageAutogenerated
+          : shouldRemoveArtwork
           ? messages.removeArtwork
           : undefined
       }

diff --git a/packages/web/src/common/store/cache/collections/addTrackToPlaylistSaga.ts b/packages/web/src/common/store/cache/collections/addTrackToPlaylistSaga.ts
@@ -111,6 +111,7 @@ function* addTrackToPlaylistAsync(action: AddTrackToPlaylistAction) {
 
   yield* put(event)
 
+  yield* call(optimisticUpdateCollection, { ...playlist, track_count: count })
   yield* call(
     confirmAddTrackToPlaylist,
     userId,
@@ -120,7 +121,6 @@ function* addTrackToPlaylistAsync(action: AddTrackToPlaylistAction) {
     playlist
   )
 
-  yield* call(optimisticUpdateCollection, { ...playlist, track_count: count })
   yield* put(
     cacheActions.subscribe(Kind.TRACKS, [{ uid: trackUid, id: action.trackId }])
   )

diff --git a/packages/web/src/common/store/cache/collections/commonSagas.js b/packages/web/src/common/store/cache/collections/commonSagas.js
@@ -110,9 +110,9 @@ function* editPlaylistAsync(action) {
     { audiusBackend, generateImage: generatePlaylistArtwork }
   )
 
+  yield call(optimisticUpdateCollection, playlist)
   yield call(confirmEditPlaylist, playlistId, userId, playlist)
 
-  yield call(optimisticUpdateCollection, playlist)
   yield put(collectionActions.editPlaylistSucceeded())
   yield put(toast({ content: messages.editToast }))
 }

diff --git a/packages/web/src/common/store/pages/collection/sagas.js b/packages/web/src/common/store/pages/collection/sagas.js
@@ -62,7 +62,7 @@ function* watchFetchCollection() {
           collection.playlist_contents.track_ids.length
         )
       )
-      if (fetchLineup) {
+      if (fetchLineup && collection.track_count > 0) {
         yield put(tracksActions.fetchLineupMetadatas(0, 200, false, undefined))
       }
     } else {