[C-2887] Improve favorites track list ui

packages/mobile/src/components/track-list/TrackList.tsx

@@ -27,7 +27,6 @@ type TrackListProps = {
   isReorderable?: boolean
   onRemove?: (index: number) => void
   onReorder?: DraggableFlatListProps<UID | ID>['onDragEnd']
-  onSave?: (isSaved: boolean, trackId: ID) => void
   showSkeleton?: boolean
   togglePlay?: (uid: string, trackId: ID) => void
   trackItemAction?: TrackItemAction
@@ -52,7 +51,6 @@ export const TrackList = ({
   noDividerMargin,
   onRemove,
   onReorder,
-  onSave,
   showDivider,
   showSkeleton,
   showTopDivider,
@@ -92,7 +90,6 @@ export const TrackList = ({
               uid={uids && (item as UID)}
               prevUid={uids && uids[index - 1]}
               key={item}
-              onSave={onSave}
               togglePlay={togglePlay}
               trackItemAction={trackItemAction}
               onRemove={onRemove}
@@ -110,7 +107,6 @@ export const TrackList = ({
         isReorderable,
         noDividerMargin,
         onRemove,
-        onSave,
         showDivider,
         showTopDivider,
         togglePlay,

packages/mobile/src/components/track-list/TrackListItem.tsx

@@ -26,7 +26,6 @@ import { Text, TouchableOpacity, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import IconDrag from 'app/assets/images/iconDrag.svg'
-import IconHeart from 'app/assets/images/iconHeart.svg'
 import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
 import IconLock from 'app/assets/images/iconLock.svg'
 import IconRemoveTrack from 'app/assets/images/iconRemoveTrack.svg'
@@ -49,7 +48,7 @@ const { getCollection } = cacheCollectionsSelectors
 const { getPlaying, getUid } = playerSelectors
 const { getTrackPosition } = playbackPositionSelectors
 
-export type TrackItemAction = 'save' | 'overflow' | 'remove'
+export type TrackItemAction = 'overflow' | 'remove'
 
 const useStyles = makeStyles(({ palette, spacing, typography }) => ({
   trackContainer: {
@@ -162,7 +161,6 @@ export type TrackListItemProps = {
   isReorderable?: boolean
   noDividerMargin?: boolean
   onRemove?: (index: number) => void
-  onSave?: (isSaved: boolean, trackId: ID) => void
   prevUid?: UID
   showDivider?: boolean
   showTopDivider?: boolean
@@ -213,7 +211,6 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     isReorderable = false,
     noDividerMargin,
     onRemove,
-    onSave,
     prevUid,
     showDivider,
     showTopDivider,
@@ -344,14 +341,6 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     track_id
   ])
 
-  const handlePressSave = (e: NativeSyntheticEvent<NativeTouchEvent>) => {
-    e.stopPropagation()
-    const isNotAvailable = (isDeleted || isUnlisted) && !has_current_user_saved
-    if (!isNotAvailable && onSave) {
-      onSave(has_current_user_saved, track_id)
-    }
-  }
-
   const handlePressOverflow = (e: NativeSyntheticEvent<NativeTouchEvent>) => {
     e.stopPropagation()
     handleOpenOverflowMenu()
@@ -456,21 +445,6 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
               <Text style={styles.lockedText}>{messages.locked}</Text>
             </View>
           ) : null}
-          {(isDeleted || !isLocked) && trackItemAction === 'save' ? (
-            <IconButton
-              icon={IconHeart}
-              styles={{
-                root: styles.iconContainer,
-                icon: styles.icon
-              }}
-              fill={
-                has_current_user_saved
-                  ? themeColors.primary
-                  : themeColors.neutralLight4
-              }
-              onPress={handlePressSave}
-            />
-          ) : null}
           {trackItemAction === 'overflow' ? (
             <IconButton
               icon={IconKebabHorizontal}

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

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import type { ID, Nullable, Track, UID, User } from '@audius/common'
 import {
-  FavoriteSource,
   LibraryCategory,
   PlaybackSource,
   SavedPageTabs,
@@ -12,8 +11,7 @@ import {
   reachabilitySelectors,
   savedPageActions,
   savedPageSelectors,
-  savedPageTracksLineupActions as tracksActions,
-  tracksSocialActions
+  savedPageTracksLineupActions as tracksActions
 } from '@audius/common'
 import { debounce, isEqual } from 'lodash'
 import Animated, { Layout } from 'react-native-reanimated'
@@ -33,7 +31,6 @@ import { NoTracksPlaceholder } from './NoTracksPlaceholder'
 import { OfflineContentBanner } from './OfflineContentBanner'
 import { useFavoritesLineup } from './useFavoritesLineup'
 
-const { saveTrack, unsaveTrack } = tracksSocialActions
 const { fetchSaves: fetchSavesAction, fetchMoreSaves } = savedPageActions
 const {
   getTrackSaves,
@@ -196,15 +193,6 @@ export const TracksTab = () => {
     })
   }, isEqual)
 
-  const onToggleSave = useCallback(
-    (isSaved: boolean, trackId: ID) => {
-      if (trackId === undefined) return
-      const action = isSaved ? unsaveTrack : saveTrack
-      dispatch(action(trackId, FavoriteSource.LIBRARY_PAGE))
-    },
-    [dispatch]
-  )
-
   const togglePlay = useCallback(
     (uid: UID, id: ID) => {
       dispatch(tracksActions.togglePlay(uid, id, PlaybackSource.LIBRARY_PAGE))
@@ -245,10 +233,9 @@ export const TracksTab = () => {
                     hideArt
                     onEndReached={handleMoreFetchSaves}
                     onEndReachedThreshold={1.5}
-                    onSave={onToggleSave}
                     showDivider
                     togglePlay={togglePlay}
-                    trackItemAction='save'
+                    trackItemAction='overflow'
                     uids={filteredTrackUids}
                   />
                 </Tile>

packages/web/src/components/track/mobile/TrackList.tsx

@@ -34,7 +34,6 @@ type TrackListProps = {
   showDivider?: boolean
   noDividerMargin?: boolean
   showBorder?: boolean
-  onSave?: (isSaved: boolean, trackId: ID) => void
   onRemove?: (index: number) => void
   togglePlay?: (uid: string, trackId: ID) => void
   trackItemAction?: TrackItemAction
@@ -46,7 +45,6 @@ const TrackList = ({
   containerClassName = '',
   itemClassName,
   tracks,
-  onSave,
   onRemove,
   showTopDivider,
   showDivider,
@@ -106,7 +104,6 @@ const TrackList = ({
           uid={track.uid}
           isDeleted={track.isDeleted}
           isLocked={track.isLocked}
-          onSave={onSave}
           isRemoveActive={track.isRemoveActive}
           onRemove={onRemove}
           togglePlay={togglePlay}

packages/web/src/components/track/mobile/TrackListItem.tsx

@@ -7,7 +7,6 @@ import Lottie from 'react-lottie'
 
 import loadingSpinner from 'assets/animations/loadingSpinner.json'
 import { ReactComponent as IconDrag } from 'assets/img/iconDrag.svg'
-import { ReactComponent as IconHeart } from 'assets/img/iconHeart.svg'
 import { ReactComponent as IconRemoveTrack } from 'assets/img/iconRemoveTrack.svg'
 import { ReactComponent as IconPause } from 'assets/img/pbIconPause.svg'
 import { ReactComponent as IconPlay } from 'assets/img/pbIconPlay.svg'
@@ -118,7 +117,6 @@ export type TrackListItemProps = {
   uid?: string
   isReorderable?: boolean
   isDragging?: boolean
-  onSave?: (isSaved: boolean, trackId: ID) => void
   onRemove?: (trackId: ID) => void
   togglePlay?: (uid: string, trackId: ID) => void
   onClickOverflow?: () => void
@@ -129,7 +127,6 @@ const TrackListItem = ({
   className,
   isLoading,
   index,
-  isSaved = false,
   isActive = false,
   isPlaying = false,
   isRemoveActive = false,
@@ -143,7 +140,6 @@ const TrackListItem = ({
   coverArtSizes,
   isDeleted,
   isLocked,
-  onSave,
   onRemove,
   togglePlay,
   trackItemAction,
@@ -157,12 +153,6 @@ const TrackListItem = ({
     if (uid && !isLocked && !isDeleted && togglePlay) togglePlay(uid, trackId)
   }
 
-  const onSaveTrack = (e: MouseEvent) => {
-    e.stopPropagation()
-    if (isDeleted && !isSaved) return
-    if (onSave) onSave(isSaved, trackId)
-  }
-
   const onRemoveTrack = (e: MouseEvent<Element>) => {
     e.stopPropagation()
     if (onRemove) onRemove(index)
@@ -226,13 +216,6 @@ const TrackListItem = ({
           <span>{messages.locked}</span>
         </div>
       ) : null}
-      {!isLocked && trackItemAction === TrackItemAction.Save ? (
-        <div className={styles.iconContainer} onClick={onSaveTrack}>
-          <IconHeart
-            className={cn(styles.heartIcon, { [styles.isSaved]: isSaved })}
-          />
-        </div>
-      ) : null}
       {onClickOverflow && trackItemAction === TrackItemAction.Overflow && (
         <div className={styles.iconContainer}>
           <IconButton

packages/web/src/pages/collection-page/components/mobile/CollectionPage.tsx

@@ -70,7 +70,6 @@ export type CollectionPageProps = {
   onHeroTrackSave?: () => void
   onHeroTrackRepost?: () => void
   onClickRow: (record: any) => void
-  onClickSave?: (record: any) => void
   onClickMobileOverflow?: (
     collectionId: ID,
     overflowActions: OverflowAction[]
@@ -97,7 +96,6 @@ const CollectionPage = ({
   onHeroTrackShare,
   onHeroTrackSave,
   onClickRow,
-  onClickSave,
   onHeroTrackRepost,
   onClickMobileOverflow,
   onClickFavorites,
@@ -193,12 +191,6 @@ const CollectionPage = ({
       onClickRow({ uid, track_id: trackId })
     }
   }
-  const onSave = (isSaved: boolean, trackId: number) => {
-    if (!isOwner) {
-      onClickSave?.({ has_current_user_saved: isSaved, track_id: trackId })
-    }
-  }
-
   const playingUid = getPlayingUid()
 
   const trackAccessMap = usePremiumContentAccessMap(tracks.entries)
@@ -290,7 +282,6 @@ const CollectionPage = ({
                 tracks={trackList}
                 showTopDivider
                 showDivider
-                onSave={onSave}
                 togglePlay={togglePlay}
               />
             )

packages/web/src/pages/history-page/components/mobile/HistoryPage.tsx

@@ -34,7 +34,6 @@ export type HistoryPageProps = {
   playing: boolean
   isEmpty: boolean
   loading: boolean
-  onToggleSave: (isSaved: boolean, trackId: ID) => void
   onTogglePlay: (uid: UID, trackId: ID) => void
   currentQueueItem: any
   goToRoute: (route: string) => void
@@ -49,7 +48,6 @@ const HistoryPage = ({
   loading,
   goToRoute,
   onTogglePlay,
-  onToggleSave,
   currentQueueItem
 }: HistoryPageProps) => {
   // Set Header Nav
@@ -119,7 +117,6 @@ const HistoryPage = ({
               itemClassName={styles.itemClassName}
               showDivider
               showBorder
-              onSave={onToggleSave}
               togglePlay={onTogglePlay}
               trackItemAction={TrackItemAction.Overflow}
             />

packages/web/src/pages/saved-page/components/mobile/SavedPage.tsx

@@ -181,7 +181,6 @@ const TracksLineup = ({
   getFilteredData,
   playingUid,
   queuedAndPlaying,
-  onSave,
   onTogglePlay
 }: {
   tracks: Lineup<SavedPageTrack>
@@ -191,7 +190,6 @@ const TracksLineup = ({
   getFilteredData: (trackMetadatas: any) => [SavedPageTrack[], number]
   playingUid: UID | null
   queuedAndPlaying: boolean
-  onSave: (isSaved: boolean, trackId: ID) => void
   onTogglePlay: (uid: UID, trackId: ID) => void
 }) => {
   const [trackEntries] = getFilteredData(tracks.entries)
@@ -287,9 +285,8 @@ const TracksLineup = ({
               tracks={trackList}
               showDivider
               showBorder
-              onSave={onSave}
               togglePlay={onTogglePlay}
-              trackItemAction={TrackItemAction.Save}
+              trackItemAction={TrackItemAction.Overflow}
             />
           </div>
         )}
@@ -630,7 +627,6 @@ export type SavedPageProps = {
   getFilteredData: (trackMetadatas: any) => [SavedPageTrack[], number]
   onTogglePlay: (uid: UID, trackId: ID) => void
 
-  onSave: (isSaved: boolean, trackId: ID) => void
   onPlay: () => void
   onSortTracks: (sorters: any) => void
   formatCardSecondaryText: (saves: number, tracks: number) => string
@@ -669,7 +665,6 @@ const SavedPage = ({
   getFilteredData,
   onFilterChange,
   filterText,
-  onSave,
   playlistUpdates,
   updatePlaylistLastViewedAt,
   currentTab,
@@ -689,7 +684,6 @@ const SavedPage = ({
       getFilteredData={getFilteredData}
       playingUid={playingUid}
       queuedAndPlaying={queuedAndPlaying}
-      onSave={onSave}
       onTogglePlay={onTogglePlay}
     />,
     <AlbumCardLineup key='albumLineup' />,