[C-917] Add native trending screen (#1816)

packages/mobile/src/screens/trending-screen/TrendingFilterButton.tsx

@@ -1,18 +1,18 @@
 import { useCallback } from 'react'
 
 import { Genre, trendingPageSelectors, modalsActions } from '@audius/common'
+import { useSelector } from 'audius-client/src/utils/reducer'
 
 import { HeaderButton } from 'app/components/header'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { MODAL_NAME } from './TrendingFilterDrawer'
 const { getTrendingGenre } = trendingPageSelectors
 const { setVisibility } = modalsActions
 
 export const TrendingFilterButton = () => {
   const dispatchWeb = useDispatchWeb()
-  const trendingGenre = useSelectorWeb(getTrendingGenre) ?? Genre.ALL
+  const trendingGenre = useSelector(getTrendingGenre) ?? Genre.ALL
 
   const handlePress = useCallback(() => {
     dispatchWeb(setVisibility({ modal: MODAL_NAME, visible: true }))

packages/mobile/src/screens/trending-screen/TrendingFilterDrawer.tsx

@@ -9,12 +9,12 @@ import {
   trendingPageSelectors,
   trendingPageActions
 } from '@audius/common'
+import { useSelector } from 'audius-client/src/utils/reducer'
 import { FlatList, Keyboard, View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { TextInput, Button } from 'app/components/core'
 import { AppDrawer, useDrawerState } from 'app/components/drawer'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 const { setTrendingGenre } = trendingPageActions
 const { getTrendingGenre } = trendingPageSelectors
@@ -47,9 +47,9 @@ const useStyles = makeStyles(({ spacing }) => ({
 export const TrendingFilterDrawer = () => {
   const styles = useStyles()
   const [searchValue, setSearchValue] = useState('')
-  const trendingGenre = useSelectorWeb(getTrendingGenre) ?? Genre.ALL
+  const trendingGenre = useSelector(getTrendingGenre) ?? Genre.ALL
   const { onClose } = useDrawerState(MODAL_NAME)
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   const genres = useMemo(() => {
     const searchValueLower = searchValue.toLowerCase()
@@ -66,17 +66,17 @@ export const TrendingFilterDrawer = () => {
           : (genre.replace(ELECTRONIC_PREFIX, '') as Genre)
 
       const handlePress = () => {
-        dispatchWeb(setTrendingGenre(trimmedGenre))
-        dispatchWeb(trendingWeekActions.reset())
-        dispatchWeb(trendingMonthActions.reset())
-        dispatchWeb(trendingAllTimeActions.reset())
+        dispatch(setTrendingGenre(trimmedGenre))
+        dispatch(trendingWeekActions.reset())
+        dispatch(trendingMonthActions.reset())
+        dispatch(trendingAllTimeActions.reset())
         Keyboard.dismiss()
         onClose()
       }
 
       return handlePress
     },
-    [dispatchWeb, onClose]
+    [dispatch, onClose]
   )
 
   return (

packages/mobile/src/screens/trending-screen/TrendingLineup.tsx

@@ -9,11 +9,11 @@ import {
   trendingPageSelectors
 } from '@audius/common'
 import { useNavigation } from '@react-navigation/native'
+import { useSelector } from 'audius-client/src/utils/reducer'
+import { useDispatch } from 'react-redux'
 
 import { Lineup } from 'app/components/lineup'
 import type { LineupProps } from 'app/components/lineup/types'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
 const {
   getDiscoverTrendingAllTimeLineup,
@@ -57,20 +57,20 @@ type TrendingLineupProps = BaseLineupProps & {
 
 export const TrendingLineup = (props: TrendingLineupProps) => {
   const { timeRange, ...other } = props
-  const trendingLineup = useSelectorWeb(selectorsMap[timeRange], isEqual)
+  const trendingLineup = useSelector(selectorsMap[timeRange])
   const [isRefreshing, setIsRefreshing] = useState(false)
   const navigation = useNavigation()
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const trendingActions = actionsMap[timeRange]
 
   useEffect(() => {
     // @ts-ignore tabPress is not a valid event, and wasn't able to figure out a fix
     const tabPressListener = navigation.addListener('tabPress', () => {
-      dispatchWeb(setTrendingTimeRange(timeRange))
+      dispatch(setTrendingTimeRange(timeRange))
     })
 
     return tabPressListener
-  }, [navigation, dispatchWeb, timeRange])
+  }, [navigation, dispatch, timeRange])
 
   useEffect(() => {
     if (!trendingLineup.isMetadataLoading) {
@@ -80,17 +80,15 @@ export const TrendingLineup = (props: TrendingLineupProps) => {
 
   const handleRefresh = useCallback(() => {
     setIsRefreshing(true)
-    dispatchWeb(trendingActions.refreshInView(true))
-  }, [dispatchWeb, trendingActions])
+    dispatch(trendingActions.refreshInView(true))
+  }, [dispatch, trendingActions])
 
   const handleLoadMore = useCallback(
     (offset: number, limit: number, overwrite: boolean) => {
-      dispatchWeb(
-        trendingActions.fetchLineupMetadatas(offset, limit, overwrite)
-      )
+      dispatch(trendingActions.fetchLineupMetadatas(offset, limit, overwrite))
       track(make({ eventName: Name.FEED_PAGINATE, offset, limit }))
     },
-    [dispatchWeb, trendingActions]
+    [dispatch, trendingActions]
   )
 
   return (

packages/mobile/src/screens/trending-screen/TrendingScreen.tsx

@@ -1,4 +1,5 @@
 import { TimeRange, trendingPageSelectors } from '@audius/common'
+import { useSelector } from 'audius-client/src/utils/reducer'
 
 import IconAllTime from 'app/assets/images/iconAllTime.svg'
 import IconDay from 'app/assets/images/iconDay.svg'
@@ -8,14 +9,13 @@ import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { TopTabNavigator } from 'app/components/top-tab-bar'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { TrendingFilterButton } from './TrendingFilterButton'
 import { TrendingLineup } from './TrendingLineup'
 const { getTrendingGenre } = trendingPageSelectors
 
 const ThisWeekTab = () => {
-  const trendingGenre = useSelectorWeb(getTrendingGenre)
+  const trendingGenre = useSelector(getTrendingGenre)
   return (
     <TrendingLineup
       header={trendingGenre ? null : <RewardsBanner type='tracks' />}

packages/mobile/src/store/sagas.ts

@@ -13,6 +13,7 @@ import feedPageSagas from 'common/store/pages/feed/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'
+import trendingPageSagas from 'common/store/pages/trending/sagas'
 import playerSagas from 'common/store/player/sagas'
 import queueSagas from 'common/store/queue/sagas'
 import searchBarSagas from 'common/store/search-bar/sagas'
@@ -59,14 +60,11 @@ export default function* rootSaga() {
     ...notificationsSagas(),
     ...notificationsSagasNative(),
 
-    // Pages
-    ...trackPageSagas(),
-    ...trackPageSagas(),
-
     // Pages
     ...trackPageSagas(),
     ...collectionPageSagas(),
     ...feedPageSagas(),
+    ...trendingPageSagas(),
 
     initKeyboardEvents,
     ...remoteConfig(),