Nativefy remixes screen (#1887)

* nativefy remixes screen

* fix errors

* fix type errors again?

* fix type errors again again

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

packages/common/src/store/pages/remixes/slice.ts

@@ -27,7 +27,11 @@ const slice = createSlice({
     },
     fetchTrack: (
       _state,
-      _action: PayloadAction<{ handle: string; slug: string }>
+      _action: PayloadAction<{
+        handle?: string
+        slug?: string
+        id?: ID
+      }>
     ) => {},
     fetchTrackSucceeded: (state, action: PayloadAction<{ trackId: ID }>) => {
       const { trackId } = action.payload

packages/mobile/src/screens/track-screen/TrackRemixesScreen.tsx

@@ -1,19 +1,25 @@
+import { useCallback, useEffect } from 'react'
+
 import {
   pluralize,
   lineupSelectors,
   remixesPageLineupActions as tracksActions,
-  remixesPageSelectors
+  remixesPageSelectors,
+  remixesPageActions
 } from '@audius/common'
 import { Text, View } from 'react-native'
+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 UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+import { useRoute } from 'app/hooks/useRoute'
 import { flexRowCentered, makeStyles } from 'app/styles'
+
 const { getTrack, getUser, getLineup, getCount } = remixesPageSelectors
+const { fetchTrack, reset } = remixesPageActions
 const { makeGetLineupMetadatas } = lineupSelectors
 
 const getRemixesTracksLineup = makeGetLineupMetadatas(getLineup)
@@ -47,20 +53,35 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 
 export const TrackRemixesScreen = () => {
   const navigation = useNavigation()
-  const lineup = useSelectorWeb(getRemixesTracksLineup)
-  const count = useSelectorWeb(getCount)
-  const track = useSelectorWeb(getTrack)
-  const user = useSelectorWeb(getUser)
+  const lineup = useSelector(getRemixesTracksLineup)
+  const count = useSelector(getCount)
+  const track = useSelector(getTrack)
+  const user = useSelector(getUser)
+  const dispatch = useDispatch()
 
   const styles = useStyles()
+  const { params } = useRoute<'TrackRemixes'>()
+
+  const trackId = params.id
+  useEffect(() => {
+    dispatch(fetchTrack({ id: trackId }))
+    dispatch(
+      tracksActions.fetchLineupMetadatas(0, 10, false, {
+        trackId: trackId ?? null
+      })
+    )
+    return function cleanup() {
+      dispatch(reset())
+      dispatch(tracksActions.reset())
+    }
+  }, [dispatch, trackId])
 
   const handlePressTrack = () => {
     if (!track) {
       return
     }
     navigation.push({
-      native: { screen: 'Track', params: { id: track.track_id } },
-      web: { route: track.permalink }
+      native: { screen: 'Track', params: { id: trackId } }
     })
   }
 
@@ -70,11 +91,21 @@ export const TrackRemixesScreen = () => {
     }
 
     navigation.push({
-      native: { screen: 'Profile', params: { handle: user.handle } },
-      web: { route: `/${user.handle}` }
+      native: { screen: 'Profile', params: { handle: user.handle } }
     })
   }
 
+  const loadMore = useCallback(
+    (offset: number, limit: number, overwrite: boolean) => {
+      dispatch(
+        tracksActions.fetchLineupMetadatas(offset, limit, overwrite, {
+          trackId: trackId ?? null
+        })
+      )
+    },
+    [dispatch, trackId]
+  )
+
   const remixesText = pluralize(messages.remix, count, 'es', !count)
   const remixesCountText = `${count || ''} ${remixesText} ${messages.of}`
 
@@ -83,7 +114,7 @@ export const TrackRemixesScreen = () => {
       <Header text={messages.header} />
       <Lineup
         lineup={lineup}
-        fetchPayload={{ trackId: track?.track_id }}
+        loadMore={loadMore}
         header={
           track && user ? (
             <View style={styles.header}>

packages/mobile/src/screens/track-screen/TrackScreenRemix.tsx

@@ -6,7 +6,6 @@ import {
   cacheTracksSelectors,
   cacheUsersSelectors
 } from '@audius/common'
-import { profilePage } from 'audius-client/src/utils/route'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
@@ -115,7 +114,7 @@ const TrackScreenRemixComponent = ({
 }: TrackScreenRemixComponentProps) => {
   const styles = useStyles()
 
-  const { _co_sign, permalink, track_id } = track
+  const { _co_sign, track_id } = track
   const { name, handle } = user
   const navigation = useNavigation()
 
@@ -133,15 +132,13 @@ const TrackScreenRemixComponent = ({
 
   const handlePressTrack = useCallback(() => {
     navigation.push({
-      native: { screen: 'Track', params: { id: track_id } },
-      web: { route: permalink }
+      native: { screen: 'Track', params: { id: track_id } }
     })
-  }, [navigation, permalink, track_id])
+  }, [navigation, track_id])
 
   const handlePressArtist = useCallback(() => {
     navigation.push({
-      native: { screen: 'Profile', params: { handle } },
-      web: { route: profilePage(handle) }
+      native: { screen: 'Profile', params: { handle } }
     })
   }, [handle, navigation])
 

packages/mobile/src/store/sagas.ts

@@ -22,6 +22,7 @@ import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreColle
 import explorePageSagas from 'common/store/pages/explore/sagas'
 import feedPageSagas from 'common/store/pages/feed/sagas'
 import historySagas from 'common/store/pages/history/sagas'
+import remixesSagas from 'common/store/pages/remixes-page/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'
@@ -125,6 +126,7 @@ export default function* rootSaga() {
 
     // Cast
     ...castSagas(),
+    ...remixesSagas(),
 
     // Application
     ...addToPlaylistSagas(),

packages/web/src/pages/remixes-page/store/lineups/tracks/sagas.ts → packages/web/src/common/store/pages/remixes-page/lineups/tracks/sagas.ts

@@ -4,13 +4,13 @@ import {
   remixesPageActions,
   remixesPageSelectors,
   getContext,
-  waitForAccount
+  waitForAccount,
+  CommonState
 } from '@audius/common'
 import { call, put, select } from 'typed-redux-saga'
 
 import { processAndCacheTracks } from 'common/store/cache/tracks/utils'
 import { LineupSagas } from 'common/store/lineup/sagas'
-import { AppState } from 'store/types'
 const { getTrackId, getLineup } = remixesPageSelectors
 const { setCount } = remixesPageActions
 const getUserId = accountSelectors.getUserId
@@ -44,7 +44,7 @@ function* getTracks({
   return processedTracks
 }
 
-const sourceSelector = (state: AppState) =>
+const sourceSelector = (state: CommonState) =>
   `${tracksActions.prefix}:${getTrackId(state)}`
 
 class TracksSagas extends LineupSagas {

packages/web/src/common/store/pages/remixes-page/sagas.ts

@@ -0,0 +1,46 @@
+import { TrackMetadata, remixesPageActions, Track } from '@audius/common'
+import { takeEvery, call, put } from 'redux-saga/effects'
+
+import { waitForBackendSetup } from 'common/store/backend/sagas'
+import {
+  retrieveTrackByHandleAndSlug,
+  retrieveTracks
+} from 'common/store/cache/tracks/utils/retrieveTracks'
+
+import tracksSagas from './lineups/tracks/sagas'
+
+const { fetchTrack, fetchTrackSucceeded } = remixesPageActions
+
+function* watchFetch() {
+  yield takeEvery(
+    fetchTrack.type,
+    function* (action: ReturnType<typeof fetchTrack>) {
+      yield call(waitForBackendSetup)
+      const { handle, slug, id } = action.payload
+      if (!id && (!handle || !slug)) {
+        throw new Error(
+          'Programming error - fetch tracks action for remixes page requires either `id` or both `handle` and `slug` params in the payload.'
+        )
+      }
+      let track: TrackMetadata | Track
+      if (id) {
+        // @ts-ignore - TS complains about the generator lacking a return type annotation
+        const res = yield call(retrieveTracks, { trackIds: [id] })
+        track = res[0]
+      } else {
+        if (!handle || !slug) return // This line not needed, but is here to appease typescript
+        track = yield call(retrieveTrackByHandleAndSlug, {
+          handle,
+          slug
+        })
+      }
+
+      // TODO: The track could potentially be null or undefined - should have a way to deal with that.
+      yield put(fetchTrackSucceeded({ trackId: track.track_id }))
+    }
+  )
+}
+
+export default function sagas() {
+  return [...tracksSagas(), watchFetch]
+}

packages/web/src/store/sagas.ts

@@ -28,6 +28,7 @@ import exploreCollectionsPageSagas from 'common/store/pages/explore/exploreColle
 import explorePageSagas from 'common/store/pages/explore/sagas'
 import feedPageSagas from 'common/store/pages/feed/sagas'
 import historySagas from 'common/store/pages/history/sagas'
+import remixesSagas from 'common/store/pages/remixes-page/sagas'
 import savedSagas from 'common/store/pages/saved/sagas'
 import searchResultsSagas from 'common/store/pages/search-page/sagas'
 import signOnSaga from 'common/store/pages/signon/sagas'
@@ -63,7 +64,6 @@ import remixSettingsModalSagas from 'components/remix-settings-modal/store/sagas
 import shareSoundToTikTokModalSagas from 'components/share-sound-to-tiktok-modal/store/sagas'
 import dashboardSagas from 'pages/artist-dashboard-page/store/sagas'
 import deletedSagas from 'pages/deleted-page/store/sagas'
-import remixesSagas from 'pages/remixes-page/store/sagas'
 import settingsSagas from 'pages/settings-page/store/sagas'
 import uploadSagas from 'pages/upload-page/store/sagas'
 import webAnalyticsSagas from 'store/analytics/sagas'