[C-1246] Fix smart collections (#2078)

AudiusProject · Oct 5, 2022 · e6be524 · e6be524
1 parent b920dde
commit e6be524
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 40 deletions.
diff --git a/packages/common/src/store/pages/collection/actions.ts b/packages/common/src/store/pages/collection/actions.ts
@@ -1,4 +1,5 @@
 import { ID, SmartCollectionVariant, UID } from '../../../models'
+import { Nullable } from '../../../utils'
 
 export const FETCH_COLLECTION = 'FETCH_COLLECTION'
 export const FETCH_COLLECTION_SUCCEEDED = 'FETCH_COLLECTION_SUCCEEDED'
@@ -27,7 +28,10 @@ export const fetchCollectionFailed = (userUid: UID) => ({
   userUid
 })
 
-export const resetCollection = (collectionUid: UID, userUid: UID) => ({
+export const resetCollection = (
+  collectionUid: Nullable<UID>,
+  userUid: Nullable<UID>
+) => ({
   type: RESET_COLLECTION,
   collectionUid,
   userUid

diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 
-import type { Collection, User } from '@audius/common'
+import type { Collection, Nullable, User } from '@audius/common'
 import {
   removeNullable,
   FavoriteSource,
@@ -84,7 +84,7 @@ export const CollectionScreen = () => {
 
   const cachedCollection = useSelector((state) =>
     getCollection(state, { id })
-  ) as Collection
+  ) as Nullable<Collection>
 
   const cachedUser = useSelector((state) =>
     getUser(state, { id: cachedCollection?.playlist_owner_id })
@@ -94,9 +94,7 @@ export const CollectionScreen = () => {
   const user = cachedUser ?? searchCollection?.user
 
   if (!collection || !user) {
-    console.warn(
-      'Collection or user missing for CollectionScreen, preventing render'
-    )
+    // TODO: add collection-screen skeleton
     return null
   }
 

diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 
-import type { ID, UID } from '@audius/common'
+import type { ID, Maybe, UID } from '@audius/common'
 import {
   useProxySelector,
   collectionPageActions,
@@ -67,7 +67,7 @@ type CollectionScreenDetailsTileProps = {
 
 const getTracksLineup = makeGetTableMetadatas(getCollectionTracksLineup)
 
-const recordPlay = (id, play = true) => {
+const recordPlay = (id: Maybe<number>, play = true) => {
   track(
     make({
       eventName: play ? Name.PLAYBACK_PLAY : Name.PLAYBACK_PAUSE,
@@ -95,9 +95,7 @@ export const CollectionScreenDetailsTile = ({
   const numTracks = entries.length
 
   const resetCollectionLineup = useCallback(() => {
-    if (collectionUid && userUid) {
-      dispatch(resetCollection(collectionUid, userUid))
-    }
+    dispatch(resetCollection(collectionUid, userUid))
     dispatch(tracksActions.fetchLineupMetadatas(0, 200, false, undefined))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch])

diff --git a/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx b/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
 
 import {
   FavoriteSource,
@@ -8,6 +8,7 @@ import {
   smartCollectionPageActions,
   playlistLibraryHelpers
 } from '@audius/common'
+import { useFocusEffect } from '@react-navigation/native'
 import { View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import { useDispatch, useSelector } from 'react-redux'
@@ -25,7 +26,6 @@ const { fetchSmartCollection } = smartCollectionPageActions
 
 const useStyles = makeStyles(({ spacing }) => ({
   root: {
-    flex: 1,
     padding: spacing(3)
   },
   image: {
@@ -47,20 +47,27 @@ type SmartCollectionScreenProps = {
  */
 export const SmartCollectionScreen = (props: SmartCollectionScreenProps) => {
   const { smartCollection } = props
-  const { variant } = smartCollection
+  const {
+    variant,
+    icon: Icon,
+    title,
+    description,
+    gradientColors,
+    gradientAngle
+  } = smartCollection
   const styles = useStyles()
   const dispatch = useDispatch()
 
-  useEffect(() => {
+  const handleFetchSmartCollection = useCallback(() => {
     dispatch(fetchSmartCollection({ variant }))
   }, [dispatch, variant])
 
-  const collection = useSelector((state) =>
-    getCollection(state, { variant: smartCollection.variant })
-  )
+  useFocusEffect(handleFetchSmartCollection)
+
+  const collection = useSelector((state) => getCollection(state, { variant }))
 
-  const playlistName = collection?.playlist_name ?? smartCollection.title
-  const description = collection?.description ?? smartCollection.description
+  const playlistName = collection?.playlist_name ?? title
+  const playlistDescription = collection?.description ?? description
 
   const playlistLibrary = useSelector(getPlaylistLibrary)
 
@@ -70,28 +77,17 @@ export const SmartCollectionScreen = (props: SmartCollectionScreenProps) => {
 
   const handlePressSave = useCallback(() => {
     if (collection?.has_current_user_saved) {
-      dispatch(
-        unsaveSmartCollection(
-          smartCollection.variant,
-          FavoriteSource.COLLECTION_PAGE
-        )
-      )
+      dispatch(unsaveSmartCollection(variant, FavoriteSource.COLLECTION_PAGE))
     } else {
-      dispatch(
-        saveSmartCollection(
-          smartCollection.variant,
-          FavoriteSource.COLLECTION_PAGE
-        )
-      )
+      dispatch(saveSmartCollection(variant, FavoriteSource.COLLECTION_PAGE))
     }
-  }, [collection, smartCollection, dispatch])
+  }, [collection, variant, dispatch])
 
-  const renderImage = () => {
-    const Icon = smartCollection.icon
+  const renderImage = useCallback(() => {
     return (
       <LinearGradient
-        colors={smartCollection.gradientColors}
-        angle={smartCollection.gradientAngle}
+        colors={gradientColors}
+        angle={gradientAngle}
         style={styles.image}
       >
         {Icon ? (
@@ -101,15 +97,15 @@ export const SmartCollectionScreen = (props: SmartCollectionScreenProps) => {
         ) : null}
       </LinearGradient>
     )
-  }
+  }, [gradientColors, gradientAngle, styles, Icon])
 
   return (
     <VirtualizedScrollView
-      listKey={`${playlistName}_Playlist_Screen`}
+      listKey={`playlist-screen-${playlistName}`}
       style={styles.root}
     >
       <CollectionScreenDetailsTile
-        description={description}
+        description={playlistDescription}
         hasSaved={isSaved}
         hideFavoriteCount
         hideOverflow