[C-924] Add fully native explore screen (#1819)

packages/mobile/src/components/details-tile/DetailsTile.tsx

@@ -3,6 +3,7 @@ import { useCallback } from 'react'
 import { squashNewLines, accountSelectors } from '@audius/common'
 import type { ImageStyle } from 'react-native'
 import { TouchableOpacity, View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconPause from 'app/assets/images/iconPause.svg'
 import IconPlay from 'app/assets/images/iconPlay.svg'
@@ -13,7 +14,6 @@ import Text from 'app/components/text'
 import UserBadges from 'app/components/user-badges'
 import { light } from 'app/haptics'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { flexRowCentered, makeStyles } from 'app/styles'
 
 import { DetailsTileActionButtons } from './DetailsTileActionButtons'
@@ -187,7 +187,7 @@ export const DetailsTile = ({
   const styles = useStyles()
   const navigation = useNavigation()
 
-  const currentUserId = useSelectorWeb(accountSelectors.getUserId)
+  const currentUserId = useSelector(accountSelectors.getUserId)
 
   const isOwner = user?.user_id === currentUserId
 

packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
 import type { ID, UID } from '@audius/common'
 import {
@@ -12,16 +12,14 @@ import {
   collectionPageSelectors
 } from '@audius/common'
 import { Text, View } from 'react-native'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { DetailsTile } from 'app/components/details-tile'
 import type {
   DetailsTileDetail,
   DetailsTileProps
 } from 'app/components/details-tile/types'
 import { TrackList } from 'app/components/track-list'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { formatCount } from 'app/utils/format'
@@ -83,8 +81,13 @@ export const CollectionScreenDetailsTile = ({
   ...detailsTileProps
 }: CollectionScreenDetailsTileProps) => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
-  const tracksLineup = useSelectorWeb(getTracksLineup)
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(tracksActions.fetchLineupMetadatas(0, 200, false, undefined))
+  }, [dispatch])
+
+  const tracksLineup = useSelector(getTracksLineup)
   const tracksLoading = tracksLineup.status === Status.LOADING
   const numTracks = tracksLineup.entries.length
 
@@ -123,31 +126,31 @@ export const CollectionScreenDetailsTile = ({
 
   const handlePressPlay = useCallback(() => {
     if (isPlaying && isQueued) {
-      dispatchWeb(tracksActions.pause())
+      dispatch(tracksActions.pause())
       recordPlay(trackId, false)
     } else if (!isPlaying && isQueued) {
-      dispatchWeb(tracksActions.play())
+      dispatch(tracksActions.play())
       recordPlay(trackId)
     } else if (tracksLineup.entries.length > 0) {
-      dispatchWeb(tracksActions.play(tracksLineup.entries[0].uid))
+      dispatch(tracksActions.play(tracksLineup.entries[0].uid))
       recordPlay(tracksLineup.entries[0].track_id)
     }
-  }, [dispatchWeb, isPlaying, trackId, tracksLineup, isQueued])
+  }, [dispatch, isPlaying, trackId, tracksLineup, isQueued])
 
   const handlePressTrackListItemPlay = useCallback(
     (uid: UID, id: ID) => {
       if (isPlaying && playingUid === uid) {
-        dispatchWeb(tracksActions.pause())
+        dispatch(tracksActions.pause())
         recordPlay(id, false)
       } else if (playingUid !== uid) {
-        dispatchWeb(tracksActions.play(uid))
+        dispatch(tracksActions.play(uid))
         recordPlay(id)
       } else {
-        dispatchWeb(tracksActions.play())
+        dispatch(tracksActions.play())
         recordPlay(id)
       }
     },
-    [dispatchWeb, isPlaying, playingUid]
+    [dispatch, isPlaying, playingUid]
   )
 
   const headerText = useMemo(() => {

packages/mobile/src/screens/explore-screen/ExploreScreen.tsx

@@ -1,3 +1,7 @@
+import { explorePageActions } from '@audius/common'
+import { useDispatch } from 'react-redux'
+import { useEffectOnce } from 'react-use'
+
 import IconForYou from 'app/assets/images/iconExploreForYou.svg'
 import IconMoods from 'app/assets/images/iconExploreMoods.svg'
 import IconPlaylists from 'app/assets/images/iconPlaylists.svg'
@@ -12,6 +16,8 @@ import { ForYouTab } from './tabs/ForYouTab'
 import { MoodsTab } from './tabs/MoodsTab'
 import { PlaylistsTab } from './tabs/PlaylistsTab'
 
+const { fetchExplore } = explorePageActions
+
 const exploreScreens = [
   {
     name: 'forYou',
@@ -37,8 +43,13 @@ const exploreScreens = [
 ]
 
 const ExploreScreen = () => {
+  const dispatch = useDispatch()
   usePopToTopOnDrawerOpen()
 
+  useEffectOnce(() => {
+    dispatch(fetchExplore())
+  })
+
   return (
     <Screen>
       <Header text='Explore' />

packages/mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx

@@ -1,21 +1,19 @@
 import { explorePageSelectors } from '@audius/common'
 import { EXPLORE_PAGE } from 'audius-client/src/utils/route'
+import { useSelector } from 'react-redux'
 
 import { ArtistCard } from 'app/components/artist-card'
 import { CardList } from 'app/components/core'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { TabInfo } from '../components/TabInfo'
-const { makeGetExplore } = explorePageSelectors
+const { getExploreArtists } = explorePageSelectors
 
 const messages = {
   infoHeader: 'Featured Artists'
 }
 
-const getExplore = makeGetExplore()
-
 export const ArtistsTab = () => {
-  const { profiles } = useSelectorWeb(getExplore)
+  const profiles = useSelector(getExploreArtists)
 
   return (
     <CardList

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx

@@ -67,24 +67,24 @@ const tiles = [
   FEELING_LUCKY
 ]
 
+const tenTileLayout = {
+  halfTiles: [3, 4, 5, 6, 8, 9],
+  leftHalfTiles: [3, 5, 8]
+}
+
 export const ForYouTab = () => {
   const styles = useStyles()
 
-  const ref = useRef<ScrollViewElement>(null)
+  const scrollViewRef = useRef<ScrollViewElement>(null)
   useScrollToTop(() => {
-    ref.current?.scrollTo({
+    scrollViewRef.current?.scrollTo({
       y: 0,
       animated: true
     })
   })
 
-  const tenTileLayout = {
-    halfTiles: [3, 4, 5, 6, 8, 9],
-    leftHalfTiles: [3, 5, 8]
-  }
-
   return (
-    <ScrollView style={styles.tabContainer} ref={ref}>
+    <ScrollView style={styles.tabContainer} ref={scrollViewRef}>
       <TabInfo header={messages.infoHeader} text={messages.infoText} />
       <View style={styles.contentContainer}>
         {tiles.map((tile, idx) => (

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx

@@ -1,26 +1,35 @@
+import { useEffect } from 'react'
+
 import {
   Status,
   explorePageCollectionsSelectors,
-  ExploreCollectionsVariant
+  ExploreCollectionsVariant,
+  explorePageCollectionsActions
 } from '@audius/common'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { CollectionList } from 'app/components/collection-list'
 import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { LET_THEM_DJ } from '../../collections'
 const { getCollections, getStatus } = explorePageCollectionsSelectors
+const { fetch } = explorePageCollectionsActions
 
 export const LetThemDJScreen = () => {
-  const status = useSelectorWeb(
-    (state) =>
-      getStatus(state, { variant: ExploreCollectionsVariant.LET_THEM_DJ }),
-    isEqual
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(fetch({ variant: ExploreCollectionsVariant.LET_THEM_DJ }))
+  }, [dispatch])
+
+  const status = useSelector((state) =>
+    getStatus(state, { variant: ExploreCollectionsVariant.LET_THEM_DJ })
   )
-  const exploreData = useSelectorWeb((state) =>
+
+  const exploreData = useSelector((state) =>
     getCollections(state, { variant: ExploreCollectionsVariant.LET_THEM_DJ })
   )
 

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx

@@ -1,25 +1,34 @@
+import { useEffect } from 'react'
+
 import {
   Status,
   ExploreCollectionsVariant,
-  explorePageCollectionsSelectors
+  explorePageCollectionsSelectors,
+  explorePageCollectionsActions
 } from '@audius/common'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { CollectionList } from 'app/components/collection-list'
 import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { TOP_ALBUMS } from '../../collections'
 const { getCollections, getStatus } = explorePageCollectionsSelectors
+const { fetch } = explorePageCollectionsActions
 
 export const TopAlbumsScreen = () => {
-  const status = useSelectorWeb(
-    (state) =>
-      getStatus(state, { variant: ExploreCollectionsVariant.TOP_ALBUMS }),
-    isEqual
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(fetch({ variant: ExploreCollectionsVariant.TOP_ALBUMS }))
+  }, [dispatch])
+
+  const status = useSelector((state) =>
+    getStatus(state, { variant: ExploreCollectionsVariant.TOP_ALBUMS })
   )
-  const exploreData = useSelectorWeb((state) =>
+
+  const exploreData = useSelector((state) =>
     getCollections(state, { variant: ExploreCollectionsVariant.TOP_ALBUMS })
   )
 

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingPlaylistsScreen.tsx

@@ -3,12 +3,12 @@ import {
   trendingPlaylistsPageLineupSelectors,
   trendingPlaylistsPageLineupActions
 } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import { RewardsBanner } from 'app/components/audio-rewards'
 import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 const { getLineup } = trendingPlaylistsPageLineupSelectors
 const { makeGetLineupMetadatas } = lineupSelectors
 
@@ -19,7 +19,7 @@ const messages = {
 }
 
 export const TrendingPlaylistsScreen = () => {
-  const lineup = useSelectorWeb(getTrendingPlaylistsLineup)
+  const lineup = useSelector(getTrendingPlaylistsLineup)
 
   return (
     <Screen>
@@ -30,6 +30,7 @@ export const TrendingPlaylistsScreen = () => {
         actions={trendingPlaylistsPageLineupActions}
         rankIconCount={5}
         isTrending
+        selfLoad
       />
     </Screen>
   )

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingUndergroundScreen.tsx

@@ -3,22 +3,22 @@ import {
   trendingUndergroundPageLineupSelectors,
   lineupSelectors
 } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import { RewardsBanner } from 'app/components/audio-rewards'
 import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+const { makeGetLineupMetadatas } = lineupSelectors
 const { getLineup } = trendingUndergroundPageLineupSelectors
 
-const getTrendingUndergroundLineup =
-  lineupSelectors.makeGetLineupMetadatas(getLineup)
+const getTrendingUndergroundLineup = makeGetLineupMetadatas(getLineup)
 
 const messages = {
   header: 'Underground Trending'
 }
 
 export const TrendingUndergroundScreen = () => {
-  const lineup = useSelectorWeb(getTrendingUndergroundLineup)
+  const lineup = useSelector(getTrendingUndergroundLineup)
 
   return (
     <>
@@ -29,6 +29,7 @@ export const TrendingUndergroundScreen = () => {
         actions={trendingUndergroundPageLineupActions}
         rankIconCount={5}
         isTrending
+        selfLoad
       />
     </>
   )

packages/mobile/src/screens/explore-screen/tabs/PlaylistsTab.tsx

@@ -1,20 +1,18 @@
 import { explorePageSelectors } from '@audius/common'
 import { EXPLORE_PAGE } from 'audius-client/src/utils/route'
+import { useSelector } from 'react-redux'
 
 import { CollectionList } from 'app/components/collection-list'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import { TabInfo } from '../components/TabInfo'
-const { makeGetExplore } = explorePageSelectors
+const { getExplorePlaylists } = explorePageSelectors
 
 const messages = {
   infoHeader: 'Featured Playlists'
 }
 
-const getExplore = makeGetExplore()
-
 export const PlaylistsTab = () => {
-  const { playlists } = useSelectorWeb(getExplore)
+  const playlists = useSelector(getExplorePlaylists)
 
   return (
     <CollectionList