[C-931] Fully native favorites screen (#1823)

packages/mobile/src/components/drawer/AppDrawer.tsx

@@ -2,30 +2,28 @@ import { useCallback } from 'react'
 
 import { modalsActions, modalsSelectors } from '@audius/common'
 import type { Modals } from '@audius/common'
+import { useDispatch, useSelector } from 'react-redux'
 import type { SetOptional } from 'type-fest'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
-
 import type { DrawerProps } from './Drawer'
 import { Drawer } from './Drawer'
 const { setVisibility } = modalsActions
 const { getModalVisibility } = modalsSelectors
 
 export const useDrawerState = (modalName: Modals) => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
-  const modalState = useSelectorWeb((state) =>
+  const modalState = useSelector((state) =>
     getModalVisibility(state, modalName)
   )
 
   const handleClose = useCallback(() => {
-    dispatchWeb(setVisibility({ modal: modalName, visible: 'closing' }))
-  }, [dispatchWeb, modalName])
+    dispatch(setVisibility({ modal: modalName, visible: 'closing' }))
+  }, [dispatch, modalName])
 
   const handleClosed = useCallback(() => {
-    dispatchWeb(setVisibility({ modal: modalName, visible: false }))
-  }, [dispatchWeb, modalName])
+    dispatch(setVisibility({ modal: modalName, visible: false }))
+  }, [dispatch, modalName])
 
   return {
     isOpen: modalState === true,

packages/mobile/src/screens/app-screen/FavoritesTabScreen.tsx

@@ -1,5 +1,5 @@
 import { CreatePlaylistScreen } from 'app/screens/edit-playlist-screen'
-import FavoritesScreen from 'app/screens/favorites-screen'
+import { FavoritesScreen } from 'app/screens/favorites-screen'
 
 import type { AppTabScreenParamList } from './AppTabScreen'
 import { createAppTabScreenStack } from './createAppTabScreenStack'

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

@@ -1,25 +1,34 @@
 import { useState } from 'react'
 
-import { accountSelectors } from '@audius/common'
+import { accountActions, accountSelectors } from '@audius/common'
 import { FAVORITES_PAGE } from 'audius-client/src/utils/route'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import { CollectionList } from 'app/components/collection-list'
 import { VirtualizedScrollView } from 'app/components/core'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { EmptyTab } from './EmptyTab'
 import { FilterInput } from './FilterInput'
 import type { ExtendedCollection } from './types'
-const getAccountWithAlbums = accountSelectors.getAccountWithAlbums
+
+const { getAccountWithAlbums } = accountSelectors
+const { fetchSavedAlbums } = accountActions
 
 const messages = {
   emptyTabText: "You haven't favorited any albums yet.",
   inputPlaceholder: 'Filter Albums'
 }
 
 export const AlbumsTab = () => {
+  const dispatch = useDispatch()
+
+  useEffectOnce(() => {
+    dispatch(fetchSavedAlbums())
+  })
+
   const [filterValue, setFilterValue] = useState('')
-  const user = useSelectorWeb(getAccountWithAlbums)
+  const user = useSelector(getAccountWithAlbums)
 
   const matchesFilter = (playlist: ExtendedCollection) => {
     const matchValue = filterValue.toLowerCase()

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

@@ -28,7 +28,7 @@ const favoritesScreens = [
   }
 ]
 
-const FavoritesScreen = () => {
+export const FavoritesScreen = () => {
   usePopToTopOnDrawerOpen()
 
   return (
@@ -38,5 +38,3 @@ const FavoritesScreen = () => {
     </Screen>
   )
 }
-
-export default FavoritesScreen

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

@@ -1,19 +1,22 @@
 import { useCallback, useState } from 'react'
 
-import { accountSelectors } from '@audius/common'
+import { accountActions, accountSelectors } from '@audius/common'
 import { FAVORITES_PAGE } from 'audius-client/src/utils/route'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import { CollectionList } from 'app/components/collection-list'
 import { VirtualizedScrollView, Button } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import type { FavoritesTabScreenParamList } from '../app-screen/FavoritesTabScreen'
 
 import { EmptyTab } from './EmptyTab'
 import { FilterInput } from './FilterInput'
 import type { ExtendedCollection } from './types'
-const getAccountWithPlaylists = accountSelectors.getAccountWithPlaylists
+
+const { getAccountWithPlaylists } = accountSelectors
+const { fetchSavedPlaylists } = accountActions
 
 const messages = {
   emptyTabText: "You haven't favorited any playlists yet.",
@@ -23,7 +26,12 @@ const messages = {
 export const PlaylistsTab = () => {
   const navigation = useNavigation<FavoritesTabScreenParamList>()
   const [filterValue, setFilterValue] = useState('')
-  const user = useSelectorWeb(getAccountWithPlaylists)
+  const user = useSelector(getAccountWithPlaylists)
+  const dispatch = useDispatch()
+
+  useEffectOnce(() => {
+    dispatch(fetchSavedPlaylists())
+  })
 
   const matchesFilter = (playlist: ExtendedCollection) => {
     const matchValue = filterValue.toLowerCase()

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

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'
 
 import type { ID, UID } from '@audius/common'
 import {
+  savedPageActions,
   playerSelectors,
   Status,
   FavoriteSource,
@@ -12,14 +13,13 @@ import {
   savedPageSelectors,
   tracksSocialActions
 } from '@audius/common'
-import { shallowEqual, useSelector } from 'react-redux'
+import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import { Tile, VirtualizedScrollView } from 'app/components/core'
 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 { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
@@ -28,6 +28,7 @@ import { FilterInput } from './FilterInput'
 const { getPlaying, getUid } = playerSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
 const { getSavedTracksLineup, getSavedTracksStatus } = savedPageSelectors
+const { fetchSaves } = savedPageActions
 const { makeGetTableMetadatas } = lineupSelectors
 
 const messages = {
@@ -56,13 +57,18 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
 const getTracks = makeGetTableMetadatas(getSavedTracksLineup)
 
 export const TracksTab = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const styles = useStyles()
+
+  useEffectOnce(() => {
+    dispatch(fetchSaves())
+  })
+
   const [filterValue, setFilterValue] = useState('')
   const isPlaying = useSelector(getPlaying)
   const playingUid = useSelector(getUid)
-  const savedTracksStatus = useSelectorWeb(getSavedTracksStatus)
-  const savedTracks = useSelectorWeb(getTracks, shallowEqual)
+  const savedTracksStatus = useSelector(getSavedTracksStatus)
+  const savedTracks = useSelector(getTracks, shallowEqual)
 
   const filterTrack = (track: TrackMetadata) => {
     const matchValue = filterValue.toLowerCase()
@@ -76,15 +82,15 @@ export const TracksTab = () => {
     (isSaved: boolean, trackId: ID) => {
       if (trackId === undefined) return
       const action = isSaved ? unsaveTrack : saveTrack
-      dispatchWeb(action(trackId, FavoriteSource.FAVORITES_PAGE))
+      dispatch(action(trackId, FavoriteSource.FAVORITES_PAGE))
     },
-    [dispatchWeb]
+    [dispatch]
   )
 
   const togglePlay = useCallback(
     (uid: UID, id: ID) => {
       if (uid !== playingUid || (uid === playingUid && !isPlaying)) {
-        dispatchWeb(tracksActions.play(uid))
+        dispatch(tracksActions.play(uid))
         track(
           make({
             eventName: Name.PLAYBACK_PLAY,
@@ -93,7 +99,7 @@ export const TracksTab = () => {
           })
         )
       } else if (uid === playingUid && isPlaying) {
-        dispatchWeb(tracksActions.pause())
+        dispatch(tracksActions.pause())
         track(
           make({
             eventName: Name.PLAYBACK_PAUSE,
@@ -103,7 +109,7 @@ export const TracksTab = () => {
         )
       }
     },
-    [dispatchWeb, isPlaying, playingUid]
+    [dispatch, isPlaying, playingUid]
   )
 
   return (

packages/mobile/src/screens/favorites-screen/index.ts

@@ -1 +1 @@
-export { default } from './FavoritesScreen'
+export * from './FavoritesScreen'

packages/mobile/src/store/sagas.ts

@@ -12,6 +12,7 @@ import collectionPageSagas from 'common/store/pages/collection/sagas'
 import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreCollections/sagas'
 import explorePageSagas from 'common/store/pages/explore/sagas'
 import feedPageSagas from 'common/store/pages/feed/sagas'
+import savedSagas from 'common/store/pages/saved/sagas'
 import searchResultsSagas from 'common/store/pages/search-page/sagas'
 import signOnSagas from 'common/store/pages/signon/sagas'
 import trackPageSagas from 'common/store/pages/track/sagas'
@@ -75,6 +76,7 @@ export default function* rootSaga() {
     ...explorePageSagas(),
     ...trendingPlaylistSagas(),
     ...trendingUndergroundSagas(),
+    ...savedSagas(),
 
     // Application
     ...smartCollectionPageSagas(),