[C-858] Add track page sagas to native, Refactor TrackScreen (#1768)

packages/common/package.json

@@ -17,10 +17,11 @@
     "url": "git+https://github.com/AudiusProject/audius-client.git"
   },
   "scripts": {
+    "build": "rollup -c",
     "lint": "eslint --cache src",
     "lint:fix": "npm run lint -- --fix",
-    "build": "rollup -c",
-    "start": "rollup -c -w"
+    "start": "rollup -c -w",
+    "typecheck": "tsc --noEmit"
   },
   "bugs": {
     "url": "https://github.com/AudiusProject/audius-client/issues"

packages/common/src/store/pages/track/actions.ts

@@ -34,7 +34,12 @@ export const makeTrackPublic = (trackId) => ({
   trackId
 })
 
-export const fetchTrack = (trackId, slug, handle, canBeUnlisted) => ({
+export const fetchTrack = (
+  trackId: Nullable<number>,
+  slug?: string,
+  handle?: string,
+  canBeUnlisted?: boolean
+) => ({
   type: FETCH_TRACK,
   trackId,
   slug,

packages/mobile/src/hooks/useImageSize.ts

@@ -8,9 +8,7 @@ import type {
 } from '@audius/common'
 import type { ImageSourcePropType } from 'react-native'
 import { Image } from 'react-native'
-import type { useDispatch } from 'react-redux'
-
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
+import { useDispatch } from 'react-redux'
 
 type UseImageSizeOptions = Parameters<typeof useImageSizeCommon>[0]
 
@@ -33,7 +31,7 @@ export const getUseImageSizeHook = <Sizes extends SquareSizes | WidthSizes>({
       size: Sizes
     }
   ) => {
-    const dispatch = useDispatchWeb() as typeof useDispatch
+    const dispatch = useDispatch()
 
     // This resolves a statically imported image into a uri
     const defaultImage = Image.resolveAssetSource(defaultImageSource).uri

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

@@ -1,11 +1,15 @@
+import { useEffect } from 'react'
+
 import {
   lineupSelectors,
   trackPageLineupActions,
+  trackPageActions,
   trackPageSelectors
 } from '@audius/common'
 import { trackRemixesPage } from 'audius-client/src/utils/route'
-import { omit } from 'lodash'
+import { useSelector } from 'common/hooks/useSelector'
 import { Text, View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import { Button, Screen } from 'app/components/core'
@@ -16,6 +20,7 @@ import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
 import { TrackScreenMainContent } from './TrackScreenMainContent'
+const { fetchTrack } = trackPageActions
 const { tracksActions } = trackPageLineupActions
 const { getLineup, getRemixParentTrack, getTrack, getUser } = trackPageSelectors
 const { makeGetLineupMetadatas } = lineupSelectors
@@ -51,20 +56,16 @@ export const TrackScreen = () => {
   const styles = useStyles()
   const navigation = useNavigation()
   const { params } = useRoute<'Track'>()
+  const dispatch = useDispatch()
 
   // params is incorrectly typed and can sometimes be undefined
-  const { searchTrack } = params ?? {}
-
-  const cachedTrack = useSelectorWeb(
-    (state) => getTrack(state, params),
-    // Omitting uneeded fields from the equality check because they are
-    // causing extra renders when added to the `track` object
-    (a, b) => {
-      const omitUneeded = <T extends object | null>(o: T) =>
-        omit(o, ['_stems', '_remix_parents'])
-      return isEqual(omitUneeded(a), omitUneeded(b))
-    }
-  )
+  const { searchTrack, id } = params ?? {}
+
+  useEffect(() => {
+    dispatch(fetchTrack(id))
+  }, [dispatch, id])
+
+  const cachedTrack = useSelector((state) => getTrack(state, params))
 
   const track = cachedTrack ?? searchTrack
 

packages/mobile/src/services/audius-backend-instance.ts

@@ -101,18 +101,15 @@ export const audiusBackendInstance = audiusBackend({
     registryAddress,
     entityManagerAddress,
     web3ProviderUrls
-  ) => {
-    const config = {
-      error: false,
-      web3Config: libs.configInternalWeb3(
-        registryAddress,
-        web3ProviderUrls,
-        undefined,
-        entityManagerAddress
-      )
-    }
-    return config
-  },
+  ) => ({
+    error: false,
+    web3Config: libs.configInternalWeb3(
+      registryAddress,
+      web3ProviderUrls,
+      undefined,
+      entityManagerAddress
+    )
+  }),
   hedgehogConfig: {
     createKey
   },
@@ -165,5 +162,6 @@ export const audiusBackendInstance = audiusBackend({
     if (audiusLibs) {
       return normal(audiusLibs)(...args)
     }
-  }
+  },
+  disableImagePreload: true
 })