[C-1174] Fix blank listening history screen

packages/mobile/src/screens/favorites-screen/EmptyTab.tsx → packages/mobile/src/components/empty-tile-cta/EmptyTileCTA.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { Button, EmptyTile } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 
-import type { AppScreenParamList } from '../app-screen'
+import type { AppScreenParamList } from '../../screens/app-screen'
 
 const messages = {
   afterSaved: "Once you have, this is where you'll find them!",
@@ -14,7 +14,8 @@ type EmptyTabProps = {
   message: string
 }
 
-export const EmptyTab = ({ message }: EmptyTabProps) => {
+export const EmptyTileCTA = (props: EmptyTabProps) => {
+  const { message } = props
   const navigation = useNavigation<AppScreenParamList>()
 
   const onPress = useCallback(() => {

packages/mobile/src/components/empty-tile-cta/index.ts

@@ -0,0 +1 @@
+export * from './EmptyTileCTA'

packages/mobile/src/screens/favorites-screen/AlbumsTab.tsx

@@ -7,8 +7,8 @@ import { useEffectOnce } from 'react-use'
 
 import { CollectionList } from 'app/components/collection-list'
 import { VirtualizedScrollView } from 'app/components/core'
+import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 
-import { EmptyTab } from './EmptyTab'
 import { FilterInput } from './FilterInput'
 import { getAccountCollections } from './selectors'
 
@@ -39,7 +39,7 @@ export const AlbumsTab = () => {
   return (
     <VirtualizedScrollView listKey='favorites-albums-view'>
       {!userAlbums?.length && !filterValue ? (
-        <EmptyTab message={messages.emptyTabText} />
+        <EmptyTileCTA message={messages.emptyTabText} />
       ) : (
         <>
           <FilterInput

packages/mobile/src/screens/favorites-screen/PlaylistsTab.tsx

@@ -7,11 +7,11 @@ import { useEffectOnce } from 'react-use'
 
 import { CollectionList } from 'app/components/collection-list'
 import { VirtualizedScrollView, Button } from 'app/components/core'
+import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 import { useNavigation } from 'app/hooks/useNavigation'
 
 import type { FavoritesTabScreenParamList } from '../app-screen/FavoritesTabScreen'
 
-import { EmptyTab } from './EmptyTab'
 import { FilterInput } from './FilterInput'
 import { getAccountCollections } from './selectors'
 
@@ -48,7 +48,7 @@ export const PlaylistsTab = () => {
   return (
     <VirtualizedScrollView listKey='favorites-playlists-view'>
       {!userPlaylists?.length && !filterValue ? (
-        <EmptyTab message={messages.emptyTabText} />
+        <EmptyTileCTA message={messages.emptyTabText} />
       ) : (
         <FilterInput
           value={filterValue}

packages/mobile/src/screens/favorites-screen/TracksTab.tsx

@@ -18,13 +18,13 @@ import { useFocusEffect } from '@react-navigation/native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Tile, VirtualizedScrollView } from 'app/components/core'
+import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 import { TrackList } from 'app/components/track-list'
 import type { TrackMetadata } from 'app/components/track-list/types'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
 import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
-import { EmptyTab } from './EmptyTab'
 import { FilterInput } from './FilterInput'
 const { getPlaying, getUid } = playerSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
@@ -122,7 +122,7 @@ export const TracksTab = () => {
     <WithLoader loading={isLoading}>
       <VirtualizedScrollView listKey='favorites-screen'>
         {!isLoading && hasNoFavorites && !filterValue ? (
-          <EmptyTab message={messages.emptyTabText} />
+          <EmptyTileCTA message={messages.emptyTabText} />
         ) : (
           <>
             <FilterInput

packages/mobile/src/screens/settings-screen/ListeningHistoryScreen.tsx

@@ -2,19 +2,20 @@ import { useCallback } from 'react'
 
 import type { ID, UID } from '@audius/common'
 import {
-  historyPageTracksLineupActions,
   playerSelectors,
   Status,
   Name,
   PlaybackSource,
   lineupSelectors,
   historyPageTracksLineupActions as tracksActions,
-  historyPageSelectors
+  historyPageSelectors,
+  useProxySelector
 } from '@audius/common'
+import { useFocusEffect } from '@react-navigation/native'
 import { useDispatch, useSelector } from 'react-redux'
-import { useEffectOnce } from 'react-use'
 
 import { Screen, Tile, VirtualizedScrollView } from 'app/components/core'
+import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 import { TrackList } from 'app/components/track-list'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
 import { make, track } from 'app/services/analytics'
@@ -24,7 +25,8 @@ const { getHistoryTracksLineup } = historyPageSelectors
 const { makeGetTableMetadatas } = lineupSelectors
 
 const messages = {
-  title: 'Listening History'
+  title: 'Listening History',
+  noHistoryMessage: "You haven't listened to any tracks yet"
 }
 const getTracks = makeGetTableMetadatas(getHistoryTracksLineup)
 
@@ -47,13 +49,13 @@ export const ListeningHistoryScreen = () => {
   const isPlaying = useSelector(getPlaying)
   const playingUid = useSelector(getUid)
 
-  useEffectOnce(() => {
-    dispatch(historyPageTracksLineupActions.fetchLineupMetadatas())
-  })
+  const fetchListeningHistory = useCallback(() => {
+    dispatch(tracksActions.fetchLineupMetadatas())
+  }, [dispatch])
 
-  const historyTracks = useSelector(getTracks)
+  useFocusEffect(fetchListeningHistory)
 
-  const status = historyTracks.status
+  const { status, entries } = useProxySelector(getTracks, [])
 
   const togglePlay = useCallback(
     (uid: UID, id: ID) => {
@@ -81,24 +83,30 @@ export const ListeningHistoryScreen = () => {
     [dispatch, isPlaying, playingUid]
   )
 
+  console.log('rerender')
+
   return (
     <Screen title={messages.title} topbarRight={null} variant='secondary'>
       <WithLoader loading={status === Status.LOADING}>
-        <VirtualizedScrollView listKey='listening-history-screen'>
-          <Tile
-            styles={{
-              root: styles.container,
-              tile: styles.trackListContainer
-            }}
-          >
-            <TrackList
-              tracks={historyTracks.entries}
-              showDivider
-              togglePlay={togglePlay}
-              trackItemAction='overflow'
-            />
-          </Tile>
-        </VirtualizedScrollView>
+        {status === Status.SUCCESS && entries.length === 0 ? (
+          <EmptyTileCTA message={messages.noHistoryMessage} />
+        ) : (
+          <VirtualizedScrollView listKey='listening-history-screen'>
+            <Tile
+              styles={{
+                root: styles.container,
+                tile: styles.trackListContainer
+              }}
+            >
+              <TrackList
+                tracks={entries}
+                showDivider
+                togglePlay={togglePlay}
+                trackItemAction='overflow'
+              />
+            </Tile>
+          </VirtualizedScrollView>
+        )}
       </WithLoader>
     </Screen>
   )

packages/mobile/src/screens/settings-screen/SettingRowLabel.tsx

@@ -6,15 +6,15 @@ import type { SvgProps } from 'react-native-svg'
 
 import type { StylesProps } from 'app/styles'
 import { makeStyles } from 'app/styles'
+import { useThemeColors } from 'app/utils/theme'
 
 const useStyles = makeStyles(({ typography, palette, spacing }) => ({
   root: { flexDirection: 'row', alignItems: 'center' },
   label: { ...typography.body, color: palette.neutral },
   icon: {
     height: spacing(4),
     width: spacing(4),
-    marginRight: spacing(1),
-    fill: palette.neutral
+    marginRight: spacing(1)
   }
 }))
 
@@ -33,6 +33,7 @@ type SettingsRowLabelProps =
 
 export const SettingsRowLabel = (props: SettingsRowLabelProps) => {
   const { label, styles: stylesProp, style } = props
+  const { neutral } = useThemeColors()
   const styles = useStyles()
 
   const renderIcon = () => {
@@ -46,7 +47,7 @@ export const SettingsRowLabel = (props: SettingsRowLabelProps) => {
         <Icon
           height={styles.icon.height}
           width={styles.icon.width}
-          fill={styles.icon.fill}
+          fill={neutral}
           style={styles.icon}
         />
       )