From b42b6fd1b96cdd7b83d7b7c9f855d6330e63cbe4 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Wed, 1 May 2024 16:16:00 -0700
Subject: [PATCH] [QA-971] Fix smart collections (#8299)

---
 .../common/src/store/playlist-library/helpers.ts  |  4 ++--
 .../collection/components/AlbumDetailsText.tsx    |  7 +++++--
 .../src/components/collection/desktop/Artwork.tsx | 14 ++++++++++----
 .../collection/desktop/CollectionHeader.tsx       |  2 +-
 .../collection/desktop/FavoriteButton.tsx         | 15 ++++++++++-----
 5 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/common/src/store/playlist-library/helpers.ts b/packages/common/src/store/playlist-library/helpers.ts
index 8773665b4a9..a65bd566c5d 100644
--- a/packages/common/src/store/playlist-library/helpers.ts
+++ b/packages/common/src/store/playlist-library/helpers.ts
@@ -18,10 +18,10 @@ import { AccountCollection } from '../account/types'
  * @returns the identifier or false
  */
 export const findInPlaylistLibrary = (
-  library: PlaylistLibrary | PlaylistLibraryFolder,
+  library: Nullable<PlaylistLibrary | PlaylistLibraryFolder>,
   playlistId: ID | SmartCollectionVariant | string
 ): PlaylistLibraryIdentifier | false => {
-  if (!library.contents) return false
+  if (!library || !library.contents) return false
 
   // Simple DFS (this likely is very small, so this is fine)
   for (const item of library.contents) {
diff --git a/packages/web/src/components/collection/components/AlbumDetailsText.tsx b/packages/web/src/components/collection/components/AlbumDetailsText.tsx
index edc2b720040..dc927a096ed 100644
--- a/packages/web/src/components/collection/components/AlbumDetailsText.tsx
+++ b/packages/web/src/components/collection/components/AlbumDetailsText.tsx
@@ -17,6 +17,7 @@ export const AlbumDetailsText = ({
 }: AlbumDetailsTextProps) => {
   const isMobile = useIsMobile()
   const renderAlbumDetailsText = () => {
+    const hasDate = lastModifiedDate || releaseDate
     const releaseAndUpdatedText = lastModifiedDate
       ? `Released ${formatDate(`${releaseDate}`)}, Updated ${formatDate(
           `${lastModifiedDate}`
@@ -27,14 +28,16 @@ export const AlbumDetailsText = ({
     const durationText = duration ? `, ${formatSecondsAsText(duration)}` : ''
     return isMobile ? (
       <Flex direction='column' gap='xs'>
-        <Box>{releaseAndUpdatedText}</Box>
+        {hasDate ? <Box>{releaseAndUpdatedText}</Box> : null}
         <Box>
           {trackCountText}
           {durationText}
         </Box>
       </Flex>
+    ) : hasDate ? (
+      `${releaseAndUpdatedText} • ${trackCountText}${durationText}`
     ) : (
-      <>{`${releaseAndUpdatedText} • ${trackCountText}${durationText}`}</>
+      `${trackCountText}${durationText}`
     )
   }
   return (
diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx
index 9bbb5b2a82c..e8d33069fe5 100644
--- a/packages/web/src/components/collection/desktop/Artwork.tsx
+++ b/packages/web/src/components/collection/desktop/Artwork.tsx
@@ -6,6 +6,7 @@ import {
   cacheCollectionsSelectors,
   useEditPlaylistModal
 } from '@audius/common/store'
+import { Nullable } from '@audius/common/utils'
 import { Button, IconPencil } from '@audius/harmony'
 
 import { useSelector } from 'common/hooks/useSelector'
@@ -27,7 +28,7 @@ const messages = {
 
 type ArtworkProps = {
   collectionId: number
-  coverArtSizes: CoverArtSizes
+  coverArtSizes: Nullable<CoverArtSizes>
   callback: () => void
   gradient?: string
   icon: ComponentType<SVGProps<SVGSVGElement>>
@@ -63,7 +64,9 @@ export const Artwork = (props: ArtworkProps) => {
 
   useEffect(() => {
     // If there's a gradient, this is a smart collection. Just immediately call back
-    if (image || gradient || imageOverride || image === '') callback()
+    if (image || gradient || imageOverride || image === '') {
+      callback()
+    }
   }, [image, callback, gradient, imageOverride])
 
   const { onOpen } = useEditPlaylistModal()
@@ -81,7 +84,7 @@ export const Artwork = (props: ArtworkProps) => {
   return (
     <ImageElement
       cid={collection?.cover_art_sizes}
-      fallbackImageUrl={imageBlank}
+      fallbackImageUrl={gradient ? '' : imageBlank}
       wrapperClassName={styles.coverArtWrapper}
       alt={messages.coverArtAltText}
       className={styles.coverArt}
@@ -92,7 +95,10 @@ export const Artwork = (props: ArtworkProps) => {
           color='staticWhite'
           width='100%'
           height='100%'
-          css={{ background: gradient, opacity: 0.3, mixBlendMode: 'overlay' }}
+          css={{
+            background: gradient,
+            path: { mixBlendMode: 'overlay', opacity: 0.3 }
+          }}
         />
       ) : null}
       {isOwner ? (
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
index d00f5fe4493..805c79627dd 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.tsx
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
@@ -181,7 +181,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
 
   const topSection = (
     <Flex gap='xl' p='l' backgroundColor='white'>
-      {coverArtSizes ? (
+      {coverArtSizes || gradient || icon ? (
         <Artwork
           collectionId={collectionId}
           coverArtSizes={coverArtSizes}
diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
index 16feee8c27b..7ecaa93528c 100644
--- a/packages/web/src/components/collection/desktop/FavoriteButton.tsx
+++ b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
@@ -10,7 +10,8 @@ import {
   accountSelectors,
   collectionPageSelectors,
   collectionsSocialActions,
-  CommonState
+  CommonState,
+  playlistLibraryHelpers
 } from '@audius/common/store'
 import { IconHeart, IconButtonProps, IconButton } from '@audius/harmony'
 import { useDispatch, useSelector } from 'react-redux'
@@ -18,13 +19,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Tooltip } from 'components/tooltip'
 
 const { getCollection } = collectionPageSelectors
-const { getAccountCollections } = accountSelectors
+const { getPlaylistLibrary } = accountSelectors
 const {
   saveCollection,
   unsaveCollection,
   saveSmartCollection,
   unsaveSmartCollection
 } = collectionsSocialActions
+const { findInPlaylistLibrary } = playlistLibraryHelpers
 
 const messages = {
   favorite: 'Favorite',
@@ -40,7 +42,7 @@ type FavoriteButtonProps = Partial<IconButtonProps> & {
 export const FavoriteButton = (props: FavoriteButtonProps) => {
   const { collectionId, isOwner, color, ...other } = props
 
-  const userPlaylists = useSelector(getAccountCollections)
+  const userPlaylistLibrary = useSelector(getPlaylistLibrary)
 
   const collection =
     (useSelector((state: CommonState) =>
@@ -49,9 +51,12 @@ export const FavoriteButton = (props: FavoriteButtonProps) => {
 
   const { has_current_user_saved, playlist_name } = collection
   const saveCount = (collection as Collection).save_count ?? 0
+  const isInLibrary = !!findInPlaylistLibrary(
+    userPlaylistLibrary,
+    playlist_name
+  )
 
-  const isSaved =
-    has_current_user_saved || (collectionId && collectionId in userPlaylists)
+  const isSaved = has_current_user_saved || isInLibrary
 
   const dispatch = useDispatch()