[C-2877] Address suggested-tracks qa #2 (#3787)

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

@@ -95,6 +95,10 @@ export const mergeCustomizer = (objValue: any, srcValue: any, key: string) => {
   if (forceUpdateKeys.has(key)) {
     return srcValue
   }
+
+  if (key === 'artwork') {
+    return null
+  }
   if (key === 'is_verified') {
     return srcValue || objValue
   }

packages/common/src/utils/updatePlaylistArtwork.ts

@@ -29,8 +29,8 @@ export const updatePlaylistArtwork = async (
   actions: ArtworkActions,
   context: Context
 ) => {
-  const { is_image_autogenerated } = collection
-  if (!is_image_autogenerated && !actions.regenerate) {
+  const { is_image_autogenerated, cover_art_sizes } = collection
+  if (!is_image_autogenerated && cover_art_sizes && !actions.regenerate) {
     return collection
   }
 
@@ -53,8 +53,12 @@ export const updatePlaylistArtwork = async (
       tracksForImage = tracks.filter(filterTrack(removed)).slice(0, 4)
     } else if (tracks.length === 4) {
       tracksForImage = tracks.filter(filterTrack(removed)).slice(0, 1)
-    } else if (tracks.length < 4 && removedIndex === 0) {
-      tracksForImage = tracks.slice(1, 2)
+    } else if (tracks.length < 4) {
+      if (tracks.length === 1) {
+        tracksForImage = []
+      } else if (removedIndex === 0) {
+        tracksForImage = tracks.slice(1, 2)
+      }
     }
   } else if (actions.reordered) {
     if (
@@ -76,23 +80,34 @@ export const updatePlaylistArtwork = async (
       tracksForImage = actions.updated.slice(0, 4)
     }
   } else if (actions.regenerate) {
-    tracksForImage = tracks.slice(0, 4)
+    if (tracks.length < 4) {
+      tracksForImage = tracks.slice(0, 1)
+    } else {
+      tracksForImage = tracks.slice(0, 4)
+    }
   }
 
   if (tracksForImage) {
-    const trackUrls = await Promise.all(
-      tracksForImage.map(async (track) => {
-        const { cover_art_sizes, cover_art } = track
-        return await context.audiusBackend.getImageUrl(
-          cover_art_sizes ?? cover_art,
-          SquareSizes.SIZE_1000_BY_1000
-        )
-      })
-    )
+    if (tracksForImage.length === 0) {
+      console.log('okay full removal!')
+      // @ts-expect-error
+      collection.cover_art_sizes = undefined
+      collection._cover_art_sizes = {}
+    } else {
+      const trackUrls = await Promise.all(
+        tracksForImage.map(async (track) => {
+          const { cover_art_sizes, cover_art } = track
+          return await context.audiusBackend.getImageUrl(
+            cover_art_sizes ?? cover_art,
+            SquareSizes.SIZE_1000_BY_1000
+          )
+        })
+      )
 
-    const artwork = await context.generateImage(trackUrls)
-    collection.artwork = artwork
-    collection.is_image_autogenerated = true
+      const artwork = await context.generateImage(trackUrls)
+      collection.artwork = artwork
+      collection.is_image_autogenerated = true
+    }
   }
 
   return collection

packages/web/src/common/store/cache/collections/utils/optimisticUpdateCollection.ts

@@ -2,20 +2,20 @@ import { Collection, Kind, cacheActions } from '@audius/common'
 import { put } from 'typed-redux-saga'
 
 export function* optimisticUpdateCollection(collection: Collection) {
-  if (collection.artwork?.url) {
-    const { artwork } = collection
+  const optimisticCollection = { ...collection }
+  if (optimisticCollection.artwork?.url) {
+    const { artwork } = optimisticCollection
     const { url } = artwork
-    collection.artwork = artwork
-    collection.cover_art_sizes = url!
-    const coverArtSizes = collection._cover_art_sizes ?? {}
+    optimisticCollection.artwork = artwork
+    optimisticCollection.cover_art_sizes = url!
+    const coverArtSizes = optimisticCollection._cover_art_sizes ?? {}
     coverArtSizes.OVERRIDE = url
-    collection._cover_art_sizes = coverArtSizes
-    collection.is_image_autogenerated = true
+    optimisticCollection._cover_art_sizes = coverArtSizes
   }
 
   yield* put(
     cacheActions.update(Kind.COLLECTIONS, [
-      { id: collection.playlist_id, metadata: collection }
+      { id: optimisticCollection.playlist_id, metadata: optimisticCollection }
     ])
   )
 }

packages/web/src/components/collection/desktop/Artwork.tsx

@@ -62,7 +62,7 @@ export const Artwork = (props: ArtworkProps) => {
 
   useEffect(() => {
     // If there's a gradient, this is a smart collection. Just immediately call back
-    if (image || gradient || imageOverride) callback()
+    if (image || gradient || imageOverride || imageBlank) callback()
   }, [image, callback, gradient, imageOverride])
 
   const handleEditArtwork = useCallback(() => {
@@ -79,7 +79,7 @@ export const Artwork = (props: ArtworkProps) => {
     <DynamicImage
       wrapperClassName={styles.coverArtWrapper}
       className={styles.coverArt}
-      image={gradient || imageOverride || image}
+      image={gradient || imageOverride || image || imageBlank}
     >
       {Icon ? (
         <Icon className={styles.imageIcon} style={{ background: gradient }} />

packages/web/src/components/create-playlist/PlaylistForm.tsx

@@ -106,7 +106,8 @@ const PlaylistForm = ({
         ...newCollectionMetadata(metadata),
         artwork: oldFormFields.artwork,
         playlist_name: oldFormFields.playlist_name,
-        description: oldFormFields.description
+        description: oldFormFields.description,
+        is_image_autogenerated: oldFormFields.is_image_autogenerated
       }))
     }
   }, [metadata])

packages/web/src/components/suggested-tracks/SuggestedTracks.module.css

@@ -35,6 +35,7 @@
 .content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .loading {

packages/web/src/components/suggested-tracks/SuggestedTracks.tsx

@@ -62,7 +62,7 @@ const SuggestedTrack = (props: SuggestedTrackProps) => {
 
   const handleAddTrack = useCallback(() => {
     onAddTrack(track_id, collectionId)
-    dispatch(toast({ content: messages.trackAdded }))
+    dispatch(toast({ content: messages.trackAdded, timeout: 1500 }))
   }, [onAddTrack, track_id, collectionId, dispatch])
 
   return (
@@ -117,7 +117,7 @@ export const SuggestedTracks = (props: SuggestedTracksProps) => {
   const divider = <Divider className={styles.trackDivider} />
 
   const contentStyles = useSpring({
-    maxHeight: isExpanded ? contentHeight : 0
+    height: isExpanded ? contentHeight : 0
   })
 
   return (