[C-929] Add fully native drawers (#1824)

packages/mobile/src/components/audio-rewards/RewardsBanner.tsx

@@ -3,10 +3,10 @@ import { useCallback } from 'react'
 import { audioRewardsPageActions, modalsActions } from '@audius/common'
 import { Text, View } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import { useDispatch } from 'react-redux'
 
 import IconCrown from 'app/assets/images/iconCrown.svg'
 import { Tile } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 const { setVisibility } = modalsActions
@@ -64,16 +64,16 @@ type RewardsBannerProps = {
 export const RewardsBanner = (props: RewardsBannerProps) => {
   const { type } = props
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const { pageHeaderGradientColor1, pageHeaderGradientColor2 } =
     useThemeColors()
 
   const handlePress = useCallback(() => {
-    dispatchWeb(setTrendingRewardsModalType({ modalType: type }))
-    dispatchWeb(
+    dispatch(setTrendingRewardsModalType({ modalType: type }))
+    dispatch(
       setVisibility({ modal: 'TrendingRewardsExplainer', visible: true })
     )
-  }, [dispatchWeb, type])
+  }, [dispatch, type])
 
   return (
     <Tile

packages/mobile/src/components/feed-filter-drawer/FeedFilterDrawer.tsx

@@ -7,9 +7,9 @@ import {
   feedPageActions
 } from '@audius/common'
 import { Text } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import ActionDrawer from 'app/components/action-drawer'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
@@ -35,22 +35,22 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
 }))
 
 export const FeedFilterDrawer = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   const styles = useStyles()
 
   const handleSelectFilter = useCallback(
     (filter: FeedFilter) => {
-      dispatchWeb(setFeedFilter(filter))
+      dispatch(setFeedFilter(filter))
       // Clear the lineup
-      dispatchWeb(feedActions.reset())
+      dispatch(feedActions.reset())
       // Tell the store that the feed is still in view so it can be refetched
-      dispatchWeb(feedActions.setInView(true))
+      dispatch(feedActions.setInView(true))
       // Force a refresh for at least 10 tiles
-      dispatchWeb(feedActions.refreshInView(true, 10))
+      dispatch(feedActions.refreshInView(true, 10))
       track(make({ eventName: Name.FEED_CHANGE_VIEW, view: filter }))
     },
-    [dispatchWeb]
+    [dispatch]
   )
 
   const rows = useMemo(

packages/mobile/src/components/lineup-tile/CollectionTile.tsx

@@ -26,7 +26,7 @@ import {
   RepostType
 } from '@audius/common'
 import { albumPage, playlistPage } from 'audius-client/src/utils/route'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { useCollectionCoverArt } from 'app/hooks/useCollectionCoverArt'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
@@ -91,6 +91,7 @@ const CollectionTileComponent = ({
   user,
   ...lineupTileProps
 }: CollectionTileProps) => {
+  const dispatch = useDispatch()
   const dispatchWeb = useDispatchWeb()
   const navigation = useNavigation()
   const currentUserId = useSelector(getUserId)
@@ -179,7 +180,7 @@ const CollectionTileComponent = ({
       OverflowAction.VIEW_ARTIST_PAGE
     ].filter(Boolean) as OverflowAction[]
 
-    dispatchWeb(
+    dispatch(
       openOverflowMenu({
         source: OverflowSource.COLLECTIONS,
         id: playlist_id,
@@ -188,7 +189,7 @@ const CollectionTileComponent = ({
     )
   }, [
     playlist_id,
-    dispatchWeb,
+    dispatch,
     isOwner,
     has_current_user_reposted,
     has_current_user_saved,
@@ -199,14 +200,14 @@ const CollectionTileComponent = ({
     if (playlist_id === undefined) {
       return
     }
-    dispatchWeb(
+    dispatch(
       requestOpenShareModal({
         type: 'collection',
         collectionId: playlist_id,
         source: ShareSource.TILE
       })
     )
-  }, [dispatchWeb, playlist_id])
+  }, [dispatch, playlist_id])
 
   const handlePressSave = useCallback(() => {
     if (playlist_id === undefined) {

packages/mobile/src/components/lineup-tile/TrackTile.tsx

@@ -19,7 +19,7 @@ import {
   shareModalUIActions,
   RepostType
 } from '@audius/common'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import type { LineupItemProps } from 'app/components/lineup-tile/types'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
@@ -66,6 +66,7 @@ const TrackTileComponent = ({
   user,
   ...lineupTileProps
 }: TrackTileProps) => {
+  const dispatch = useDispatch()
   const dispatchWeb = useDispatchWeb()
   const navigation = useNavigation()
   const currentUserId = useSelector(getUserId)
@@ -140,7 +141,7 @@ const TrackTileComponent = ({
       isOnArtistsTracksTab ? null : OverflowAction.VIEW_ARTIST_PAGE
     ].filter(Boolean) as OverflowAction[]
 
-    dispatchWeb(
+    dispatch(
       openOverflowMenu({
         source: OverflowSource.TRACKS,
         id: track_id,
@@ -149,7 +150,7 @@ const TrackTileComponent = ({
     )
   }, [
     track_id,
-    dispatchWeb,
+    dispatch,
     has_current_user_reposted,
     has_current_user_saved,
     isOwner,
@@ -160,14 +161,14 @@ const TrackTileComponent = ({
     if (track_id === undefined) {
       return
     }
-    dispatchWeb(
+    dispatch(
       requestOpenShareModal({
         type: 'track',
         trackId: track_id,
         source: ShareSource.TILE
       })
     )
-  }, [dispatchWeb, track_id])
+  }, [dispatch, track_id])
 
   const handlePressSave = useCallback(() => {
     if (track_id === undefined) {

packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx

@@ -16,6 +16,7 @@ import {
 } from '@audius/common'
 import { View, Platform } from 'react-native'
 import { CastButton } from 'react-native-google-cast'
+import { useDispatch } from 'react-redux'
 
 import IconAirplay from 'app/assets/images/iconAirplay.svg'
 import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
@@ -72,6 +73,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
   const isCasting = useSelectorWeb(getIsCasting)
   const { neutral, primary } = useThemeColors()
   const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   useLayoutEffect(() => {
     if (Platform.OS === 'android' && castMethod === 'airplay') {
@@ -101,15 +103,15 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
 
   const onPressShare = useCallback(() => {
     if (track) {
-      dispatchWeb(
+      dispatch(
         requestOpenShareModal({
           type: 'track',
           trackId: track.track_id,
           source: ShareSource.NOW_PLAYING
         })
       )
     }
-  }, [dispatchWeb, track])
+  }, [dispatch, track])
 
   const onPressOverflow = useCallback(() => {
     if (track) {
@@ -131,15 +133,15 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
         OverflowAction.VIEW_ARTIST_PAGE
       ].filter(Boolean) as OverflowAction[]
 
-      dispatchWeb(
+      dispatch(
         openOverflowMenu({
           source: OverflowSource.TRACKS,
           id: track.track_id,
           overflowActions
         })
       )
     }
-  }, [track, currentUserId, dispatchWeb])
+  }, [track, currentUserId, dispatch])
 
   const { openAirplayDialog } = useAirplay()
 

packages/mobile/src/components/overflow-menu-drawer/CollectionOverflowMenuDrawer.tsx

@@ -1,4 +1,4 @@
-import type { ID, OverflowActionCallbacks, CommonState } from '@audius/common'
+import type { ID, OverflowActionCallbacks } from '@audius/common'
 import {
   FavoriteSource,
   RepostSource,
@@ -19,10 +19,9 @@ import {
   playlistPage,
   albumPage
 } from 'audius-client/src/utils/route'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 const { getMobileOverflowModal } = mobileOverflowMenuUISelectors
 const { requestOpen: openDeletePlaylist } =
   deletePlaylistConfirmationModalUIActions
@@ -43,16 +42,14 @@ type Props = {
 }
 
 const CollectionOverflowMenuDrawer = ({ render }: Props) => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const navigation = useNavigation()
-  const { id: modalId } = useSelectorWeb(getMobileOverflowModal)
+  const { id: modalId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
 
-  const playlist = useSelectorWeb((state: CommonState) =>
-    getCollection(state, { id })
-  )
+  const playlist = useSelector((state) => getCollection(state, { id }))
 
-  const user = useSelectorWeb((state: CommonState) =>
+  const user = useSelector((state) =>
     getUser(state, { id: playlist?.playlist_owner_id })
   )
 
@@ -68,15 +65,15 @@ const CollectionOverflowMenuDrawer = ({ render }: Props) => {
 
   const callbacks = {
     [OverflowAction.REPOST]: () =>
-      dispatchWeb(repostCollection(id, RepostSource.OVERFLOW)),
+      dispatch(repostCollection(id, RepostSource.OVERFLOW)),
     [OverflowAction.UNREPOST]: () =>
-      dispatchWeb(undoRepostCollection(id, RepostSource.OVERFLOW)),
+      dispatch(undoRepostCollection(id, RepostSource.OVERFLOW)),
     [OverflowAction.FAVORITE]: () =>
-      dispatchWeb(saveCollection(id, FavoriteSource.OVERFLOW)),
+      dispatch(saveCollection(id, FavoriteSource.OVERFLOW)),
     [OverflowAction.UNFAVORITE]: () =>
-      dispatchWeb(unsaveCollection(id, FavoriteSource.OVERFLOW)),
+      dispatch(unsaveCollection(id, FavoriteSource.OVERFLOW)),
     [OverflowAction.SHARE]: () =>
-      dispatchWeb(shareCollection(id, ShareSource.OVERFLOW)),
+      dispatch(shareCollection(id, ShareSource.OVERFLOW)),
     [OverflowAction.VIEW_ALBUM_PAGE]: () => {
       navigation.navigate({
         native: { screen: 'Collection', params: { id } },
@@ -99,12 +96,12 @@ const CollectionOverflowMenuDrawer = ({ render }: Props) => {
       navigation.navigate({
         native: { screen: 'EditPlaylist', params: { id } }
       })
-      dispatchWeb(openEditPlaylist(id))
+      dispatch(openEditPlaylist(id))
     },
     [OverflowAction.DELETE_PLAYLIST]: () =>
-      dispatchWeb(openDeletePlaylist({ playlistId: id })),
+      dispatch(openDeletePlaylist({ playlistId: id })),
     [OverflowAction.PUBLISH_PLAYLIST]: () =>
-      is_album ? () => {} : dispatchWeb(publishPlaylist(Number(id)))
+      is_album ? () => {} : dispatch(publishPlaylist(Number(id)))
   }
 
   return render(callbacks)

packages/mobile/src/components/overflow-menu-drawer/OverflowMenuDrawer.tsx

@@ -3,9 +3,9 @@ import {
   OverflowSource,
   mobileOverflowMenuUISelectors
 } from '@audius/common'
+import { useSelector } from 'react-redux'
 
 import ActionDrawer from 'app/components/action-drawer'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import CollectionOverflowMenuDrawer from './CollectionOverflowMenuDrawer'
 import ProfileOverflowMenuDrawer from './ProfileOverflowMenuDrawer'
@@ -34,7 +34,7 @@ const rowMessageMap = {
 }
 
 export const OverflowMenuDrawer = () => {
-  const overflowMenu = useSelectorWeb(getMobileOverflowModal)
+  const overflowMenu = useSelector(getMobileOverflowModal)
 
   if (!overflowMenu?.id) {
     return <></>

packages/mobile/src/components/overflow-menu-drawer/ProfileOverflowMenuDrawer.tsx

@@ -7,9 +7,8 @@ import {
   OverflowAction,
   mobileOverflowMenuUISelectors
 } from '@audius/common'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 const { getMobileOverflowModal } = mobileOverflowMenuUISelectors
 const { followUser, unfollowUser, shareUser } = usersSocialActions
 const { getUser } = cacheUsersSelectors
@@ -19,10 +18,10 @@ type Props = {
 }
 
 const ProfileOverflowMenuDrawer = ({ render }: Props) => {
-  const dispatchWeb = useDispatchWeb()
-  const { id: modalId } = useSelectorWeb(getMobileOverflowModal)
+  const dispatchWeb = useDispatch()
+  const { id: modalId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
-  const user = useSelectorWeb((state: CommonState) => getUser(state, { id }))
+  const user = useSelector((state: CommonState) => getUser(state, { id }))
 
   if (!user) {
     return null

packages/mobile/src/components/overflow-menu-drawer/TrackOverflowMenuDrawer.tsx

@@ -15,11 +15,11 @@ import {
 // Importing directly from audius-client for now, this will be removed
 // when the profile page is implemented in RN
 import { profilePage } from 'audius-client/src/utils/route'
+import { useSelector } from 'react-redux'
 
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 const { getMobileOverflowModal } = mobileOverflowMenuUISelectors
 const { requestOpen: openAddToPlaylistModal } = addToPlaylistUIActions
 const { followUser, unfollowUser } = usersSocialActions
@@ -36,12 +36,12 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
   const { onClose: closeNowPlayingDrawer } = useDrawer('NowPlaying')
   const navigation = useNavigation()
   const dispatchWeb = useDispatchWeb()
-  const { id: modalId } = useSelectorWeb(getMobileOverflowModal)
+  const { id: modalId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
 
-  const track = useSelectorWeb((state: CommonState) => getTrack(state, { id }))
+  const track = useSelector((state: CommonState) => getTrack(state, { id }))
 
-  const user = useSelectorWeb((state: CommonState) =>
+  const user = useSelector((state: CommonState) =>
     getUser(state, { id: track?.owner_id })
   )