[QA-971] Fix smart collections (#8299)

AudiusProject · May 1, 2024 · b42b6fd · b42b6fd
1 parent eceb876
commit b42b6fd
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -10,21 +10,23 @@ import {
   accountSelectors,
   collectionPageSelectors,
   collectionsSocialActions,
-  CommonState
+  CommonState,
+  playlistLibraryHelpers
 } from '@audius/common/store'
 import { IconHeart, IconButtonProps, IconButton } from '@audius/harmony'
 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()