[C-903] Migrate feed to native store (#1799)

AudiusProject · Sep 9, 2022 · 44046ce · 44046ce
1 parent eb3a714
commit 44046ce
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 43 deletions.
diff --git a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx
@@ -29,7 +29,6 @@ import { useSelector } from 'react-redux'
 import { useCollectionCoverArt } from 'app/hooks/useCollectionCoverArt'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import type { AppState } from 'app/store'
 import { getPlayingUid } from 'app/store/audio/selectors'
 
@@ -51,20 +50,11 @@ const getUserId = accountSelectors.getUserId
 export const CollectionTile = (props: LineupItemProps) => {
   const { uid } = props
 
-  const collection = useSelectorWeb(
-    (state) => getCollection(state, { uid }),
-    isEqual
-  )
+  const collection = useSelector((state) => getCollection(state, { uid }))
 
-  const tracks = useSelectorWeb(
-    (state) => getTracksFromCollection(state, { uid }),
-    isEqual
-  )
+  const tracks = useSelector((state) => getTracksFromCollection(state, { uid }))
 
-  const user = useSelectorWeb(
-    (state) => getUserFromCollection(state, { uid }),
-    isEqual
-  )
+  const user = useSelector((state) => getUserFromCollection(state, { uid }))
 
   if (!collection || !tracks || !user) {
     console.warn(
@@ -102,7 +92,7 @@ const CollectionTileComponent = ({
 }: CollectionTileProps) => {
   const dispatchWeb = useDispatchWeb()
   const navigation = useNavigation()
-  const currentUserId = useSelectorWeb(getUserId)
+  const currentUserId = useSelector(getUserId)
   const currentTrack = useSelector((state: AppState) => {
     const uid = getPlayingUid(state)
     return tracks.find((track) => track.uid === uid) ?? null

diff --git a/packages/mobile/src/components/lineup-tile/TrackTile.tsx b/packages/mobile/src/components/lineup-tile/TrackTile.tsx
@@ -23,7 +23,6 @@ import { useSelector } from 'react-redux'
 import type { LineupItemProps } from 'app/components/lineup-tile/types'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
 import type { AppState } from 'app/store'
 import { getPlayingUid } from 'app/store/audio/selectors'
@@ -40,15 +39,9 @@ const getUserId = accountSelectors.getUserId
 export const TrackTile = (props: LineupItemProps) => {
   const { uid } = props
 
-  // Using isEqual as the equality function to prevent rerenders due to object references
-  // not being preserved when syncing redux state from client.
-  // This can be removed when no longer dependent on web client
-  const track = useSelectorWeb((state) => getTrack(state, { uid }), isEqual)
+  const track = useSelector((state) => getTrack(state, { uid }))
 
-  const user = useSelectorWeb(
-    (state) => getUserFromTrack(state, { uid }),
-    isEqual
-  )
+  const user = useSelector((state) => getUserFromTrack(state, { uid }))
 
   if (!track || !user) {
     console.warn('Track or user missing for TrackTile, preventing render')
@@ -75,7 +68,7 @@ const TrackTileComponent = ({
 }: TrackTileProps) => {
   const dispatchWeb = useDispatchWeb()
   const navigation = useNavigation()
-  const currentUserId = useSelectorWeb(getUserId)
+  const currentUserId = useSelector(getUserId)
   const isPlayingUid = useSelector(
     (state: AppState) => getPlayingUid(state) === lineupTileProps.uid
   )

diff --git a/packages/mobile/src/components/lineup/Lineup.tsx b/packages/mobile/src/components/lineup/Lineup.tsx
@@ -11,14 +11,14 @@ import {
 import { range } from 'lodash'
 import type { SectionList as RNSectionList } from 'react-native'
 import { Dimensions, StyleSheet, View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { SectionList } from 'app/components/core'
 import {
   CollectionTile,
   TrackTile,
   LineupTileSkeleton
 } from 'app/components/lineup-tile'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useScrollToTop } from 'app/hooks/useScrollToTop'
 import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
@@ -141,7 +141,7 @@ export const Lineup = ({
   ...listProps
 }: LineupProps) => {
   const showTip = useSelectorWeb(getShowTip)
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const ref = useRef<RNSectionList>(null)
   const [isPastLoadThreshold, setIsPastLoadThreshold] = useState(false)
   useScrollToTop(() => {
@@ -187,7 +187,7 @@ export const Lineup = ({
     if (shouldLoadMore) {
       const itemLoadCount = itemCounts.initial + page * itemCounts.loadMore
 
-      dispatchWeb(actions.setPage(page + 1))
+      dispatch(actions.setPage(page + 1))
 
       const limit =
         Math.min(itemLoadCount, Math.max(countOrDefault, itemCounts.minimum)) -
@@ -196,15 +196,15 @@ export const Lineup = ({
       if (loadMore) {
         loadMore(offset, limit, page === 0)
       } else {
-        dispatchWeb(
+        dispatch(
           actions.fetchLineupMetadatas(offset, limit, page === 0, fetchPayload)
         )
       }
     }
   }, [
     actions,
     countOrDefault,
-    dispatchWeb,
+    dispatch,
     fetchPayload,
     includeLineupStatus,
     itemCounts,
@@ -247,7 +247,7 @@ export const Lineup = ({
       // we remove the web-view.
       setImmediate(() => {
         if (!isPlayingUid || !isPlaying) {
-          dispatchWeb(actions.play(uid))
+          dispatch(actions.play(uid))
           track(
             make({
               eventName: Name.PLAYBACK_PLAY,
@@ -256,7 +256,7 @@ export const Lineup = ({
             })
           )
         } else {
-          dispatchWeb(actions.pause())
+          dispatch(actions.pause())
           track(
             make({
               eventName: Name.PLAYBACK_PAUSE,
@@ -267,7 +267,7 @@ export const Lineup = ({
         }
       })
     },
-    [actions, dispatchWeb]
+    [actions, dispatch]
   )
 
   const getLineupTileComponent = (item: LineupItem) => {

diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
@@ -7,15 +7,14 @@ import {
   feedPageSelectors,
   modalsActions
 } from '@audius/common'
-import { omit } from 'lodash'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
-import { useSelectorWeb, isEqual } from 'app/hooks/useSelectorWeb'
+import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
 import { getIsSignedIn } from 'app/store/lifecycle/selectors'
 
@@ -34,20 +33,19 @@ export const FeedScreen = () => {
   usePopToTopOnDrawerOpen()
 
   const dispatchWeb = useDispatchWeb()
-  const feedLineup = useSelectorWeb(getFeedLineup, (a, b) => {
-    const omitUneeded = <T extends object>(o: T) => omit(o, ['inView'])
-    return isEqual(omitUneeded(a), omitUneeded(b))
-  })
+  const dispatch = useDispatch()
+
+  const feedLineup = useSelector(getFeedLineup)
   const signedIn = useSelector(getIsSignedIn)
   const feedFilter = useSelectorWeb(getFeedFilter)
   const [isRefreshing, setIsRefreshing] = useState(false)
 
   const loadMore = useCallback(
     (offset: number, limit: number, overwrite: boolean) => {
-      dispatchWeb(feedActions.fetchLineupMetadatas(offset, limit, overwrite))
+      dispatch(feedActions.fetchLineupMetadatas(offset, limit, overwrite))
       track(make({ eventName: Name.FEED_PAGINATE, offset, limit }))
     },
-    [dispatchWeb]
+    [dispatch]
   )
 
   useEffect(() => {
@@ -58,8 +56,8 @@ export const FeedScreen = () => {
 
   const handleRefresh = useCallback(() => {
     setIsRefreshing(true)
-    dispatchWeb(feedActions.refreshInView(true))
-  }, [dispatchWeb])
+    dispatch(feedActions.refreshInView(true))
+  }, [dispatch])
 
   const handleFilterButtonPress = useCallback(() => {
     dispatchWeb(setVisibility({ modal: 'FeedFilter', visible: true }))

diff --git a/packages/mobile/src/store/sagas.ts b/packages/mobile/src/store/sagas.ts
@@ -8,8 +8,10 @@ import tracksSagas from 'common/store/cache/tracks/sagas'
 import usersSagas from 'common/store/cache/users/sagas'
 import confirmerSagas from 'common/store/confirmer/sagas'
 import collectionPageSagas from 'common/store/pages/collection/sagas'
+import feedPageSagas from 'common/store/pages/feed/sagas'
 import signOnSagas from 'common/store/pages/signon/sagas'
 import trackPageSagas from 'common/store/pages/track/sagas'
+import queueSagas from 'common/store/queue/sagas'
 import searchBarSagas from 'common/store/search-bar/sagas'
 import signOutSagas from 'common/store/sign-out/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
@@ -35,6 +37,9 @@ export default function* rootSaga() {
     ...tracksSagas(),
     ...usersSagas(),
 
+    // Playback
+    queueSagas(),
+
     // Sign in / Sign out
     ...signOnSagas(),
     ...signOutSagas(),
@@ -47,6 +52,7 @@ export default function* rootSaga() {
     // Pages
     ...trackPageSagas(),
     ...collectionPageSagas(),
+    ...feedPageSagas(),
 
     initKeyboardEvents,
     ...remoteConfig(),