[C-933] Add fully native social actions (#1825)

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

@@ -22,7 +22,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux'
 
 import type { LineupItemProps } from 'app/components/lineup-tile/types'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
 
@@ -67,7 +66,6 @@ const TrackTileComponent = ({
   ...lineupTileProps
 }: TrackTileProps) => {
   const dispatch = useDispatch()
-  const dispatchWeb = useDispatchWeb()
   const navigation = useNavigation()
   const currentUserId = useSelector(getUserId)
   const playingUid = useSelector(getUid)
@@ -175,22 +173,22 @@ const TrackTileComponent = ({
       return
     }
     if (has_current_user_saved) {
-      dispatchWeb(unsaveTrack(track_id, FavoriteSource.TILE))
+      dispatch(unsaveTrack(track_id, FavoriteSource.TILE))
     } else {
-      dispatchWeb(saveTrack(track_id, FavoriteSource.TILE))
+      dispatch(saveTrack(track_id, FavoriteSource.TILE))
     }
-  }, [track_id, dispatchWeb, has_current_user_saved])
+  }, [track_id, dispatch, has_current_user_saved])
 
   const handlePressRepost = useCallback(() => {
     if (track_id === undefined) {
       return
     }
     if (has_current_user_reposted) {
-      dispatchWeb(undoRepostTrack(track_id, RepostSource.TILE))
+      dispatch(undoRepostTrack(track_id, RepostSource.TILE))
     } else {
-      dispatchWeb(repostTrack(track_id, RepostSource.TILE))
+      dispatch(repostTrack(track_id, RepostSource.TILE))
     }
-  }, [track_id, dispatchWeb, has_current_user_reposted])
+  }, [track_id, dispatch, has_current_user_reposted])
 
   const hideShare = field_visibility?.share === false
   const hidePlays = field_visibility?.play_count === false

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

@@ -84,22 +84,22 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
   const onToggleFavorite = useCallback(() => {
     if (track) {
       if (track.has_current_user_saved) {
-        dispatchWeb(unsaveTrack(track.track_id, FavoriteSource.NOW_PLAYING))
+        dispatch(unsaveTrack(track.track_id, FavoriteSource.NOW_PLAYING))
       } else {
-        dispatchWeb(saveTrack(track.track_id, FavoriteSource.NOW_PLAYING))
+        dispatch(saveTrack(track.track_id, FavoriteSource.NOW_PLAYING))
       }
     }
-  }, [dispatchWeb, track])
+  }, [dispatch, track])
 
   const onToggleRepost = useCallback(() => {
     if (track) {
       if (track.has_current_user_reposted) {
-        dispatchWeb(undoRepostTrack(track.track_id, RepostSource.NOW_PLAYING))
+        dispatch(undoRepostTrack(track.track_id, RepostSource.NOW_PLAYING))
       } else {
-        dispatchWeb(repostTrack(track.track_id, RepostSource.NOW_PLAYING))
+        dispatch(repostTrack(track.track_id, RepostSource.NOW_PLAYING))
       }
     }
-  }, [dispatchWeb, track])
+  }, [dispatch, track])
 
   const onPressShare = useCallback(() => {
     if (track) {

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

@@ -7,11 +7,11 @@ import {
   tracksSocialActions
 } from '@audius/common'
 import { TouchableOpacity, Animated, View, Dimensions } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import { DynamicImage } from 'app/components/core'
 import { FavoriteButton } from 'app/components/favorite-button'
 import Text from 'app/components/text'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
 import { makeStyles } from 'app/styles'
 
@@ -104,17 +104,17 @@ export const PlayBar = ({
   translationAnim
 }: PlayBarProps) => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   const onPressFavoriteButton = useCallback(() => {
     if (track) {
       if (track.has_current_user_saved) {
-        dispatchWeb(unsaveTrack(track.track_id, FavoriteSource.PLAYBAR))
+        dispatch(unsaveTrack(track.track_id, FavoriteSource.PLAYBAR))
       } else {
-        dispatchWeb(saveTrack(track.track_id, FavoriteSource.PLAYBAR))
+        dispatch(saveTrack(track.track_id, FavoriteSource.PLAYBAR))
       }
     }
-  }, [dispatchWeb, track])
+  }, [dispatch, track])
 
   const renderFavoriteButton = () => {
     return (

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

@@ -18,7 +18,7 @@ type Props = {
 }
 
 const ProfileOverflowMenuDrawer = ({ render }: Props) => {
-  const dispatchWeb = useDispatch()
+  const dispatch = useDispatch()
   const { id: modalId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
   const user = useSelector((state: CommonState) => getUser(state, { id }))
@@ -34,11 +34,10 @@ const ProfileOverflowMenuDrawer = ({ render }: Props) => {
 
   const callbacks = {
     [OverflowAction.FOLLOW]: () =>
-      dispatchWeb(followUser(id, FollowSource.OVERFLOW)),
+      dispatch(followUser(id, FollowSource.OVERFLOW)),
     [OverflowAction.UNFOLLOW]: () =>
-      dispatchWeb(unfollowUser(id, FollowSource.OVERFLOW)),
-    [OverflowAction.SHARE]: () =>
-      dispatchWeb(shareUser(id, ShareSource.OVERFLOW))
+      dispatch(unfollowUser(id, FollowSource.OVERFLOW)),
+    [OverflowAction.SHARE]: () => dispatch(shareUser(id, ShareSource.OVERFLOW))
   }
 
   return render(callbacks)

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

@@ -15,7 +15,7 @@ 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 { useDispatch, useSelector } from 'react-redux'
 
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useDrawer } from 'app/hooks/useDrawer'
@@ -35,6 +35,7 @@ type Props = {
 const TrackOverflowMenuDrawer = ({ render }: Props) => {
   const { onClose: closeNowPlayingDrawer } = useDrawer('NowPlaying')
   const navigation = useNavigation()
+  const dispatch = useDispatch()
   const dispatchWeb = useDispatchWeb()
   const { id: modalId } = useSelector(getMobileOverflowModal)
   const id = modalId as ID
@@ -57,15 +58,15 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
 
   const callbacks = {
     [OverflowAction.REPOST]: () =>
-      dispatchWeb(repostTrack(id, RepostSource.OVERFLOW)),
+      dispatch(repostTrack(id, RepostSource.OVERFLOW)),
     [OverflowAction.UNREPOST]: () =>
-      dispatchWeb(undoRepostTrack(id, RepostSource.OVERFLOW)),
+      dispatch(undoRepostTrack(id, RepostSource.OVERFLOW)),
     [OverflowAction.FAVORITE]: () =>
-      dispatchWeb(saveTrack(id, FavoriteSource.OVERFLOW)),
+      dispatch(saveTrack(id, FavoriteSource.OVERFLOW)),
     [OverflowAction.UNFAVORITE]: () =>
-      dispatchWeb(unsaveTrack(id, FavoriteSource.OVERFLOW)),
+      dispatch(unsaveTrack(id, FavoriteSource.OVERFLOW)),
     [OverflowAction.SHARE]: () =>
-      dispatchWeb(shareTrack(id, ShareSource.OVERFLOW)),
+      dispatch(shareTrack(id, ShareSource.OVERFLOW)),
     [OverflowAction.ADD_TO_PLAYLIST]: () =>
       dispatchWeb(openAddToPlaylistModal(id, title)),
     [OverflowAction.VIEW_TRACK_PAGE]: () => {
@@ -83,9 +84,9 @@ const TrackOverflowMenuDrawer = ({ render }: Props) => {
       })
     },
     [OverflowAction.FOLLOW_ARTIST]: () =>
-      dispatchWeb(followUser(owner_id, FollowSource.OVERFLOW)),
+      dispatch(followUser(owner_id, FollowSource.OVERFLOW)),
     [OverflowAction.UNFOLLOW_ARTIST]: () =>
-      dispatchWeb(unfollowUser(owner_id, FollowSource.OVERFLOW))
+      dispatch(unfollowUser(owner_id, FollowSource.OVERFLOW))
   }
 
   return render(callbacks)

packages/mobile/src/components/user/FollowButton.tsx

@@ -3,12 +3,12 @@ import { useCallback } from 'react'
 import type { FollowSource, User } from '@audius/common'
 import { usersSocialActions } from '@audius/common'
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import IconFollow from 'app/assets/images/iconFollow.svg'
 import IconFollowing from 'app/assets/images/iconFollowing.svg'
 import type { ButtonProps } from 'app/components/core'
 import { Button } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 const { followUser, unfollowUser } = usersSocialActions
 
 const messages = {
@@ -27,7 +27,7 @@ export const FollowButton = (props: FollowButtonsProps) => {
   const { profile, noIcon, style, onPress, followSource, ...other } = props
   const { does_current_user_follow, user_id } = profile
   const isFollowing = does_current_user_follow
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
 
   const Icon = isFollowing ? IconFollowing : IconFollow
 
@@ -37,12 +37,12 @@ export const FollowButton = (props: FollowButtonsProps) => {
     (event: GestureResponderEvent) => {
       onPress?.(event)
       if (does_current_user_follow) {
-        dispatchWeb(unfollowUser(user_id, followSource))
+        dispatch(unfollowUser(user_id, followSource))
       } else {
-        dispatchWeb(followUser(user_id, followSource))
+        dispatch(followUser(user_id, followSource))
       }
     },
-    [onPress, dispatchWeb, does_current_user_follow, user_id, followSource]
+    [onPress, dispatch, does_current_user_follow, user_id, followSource]
   )
 
   return (

packages/mobile/src/screens/profile-screen/ArtistRecommendations/ArtistRecommendations.tsx

@@ -7,6 +7,7 @@ import {
   artistRecommendationsUIActions
 } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
+import { useDispatch } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 
 import IconFollow from 'app/assets/images/iconFollow.svg'
@@ -89,6 +90,7 @@ export const ArtistRecommendations = (props: ArtistRecommendationsProps) => {
   const navigation = useNavigation()
   const { user_id, name } = useSelectProfile(['user_id', 'name'])
 
+  const dispatch = useDispatch()
   const dispatchWeb = useDispatchWeb()
 
   useEffectOnce(() => {
@@ -114,19 +116,19 @@ export const ArtistRecommendations = (props: ArtistRecommendationsProps) => {
   const handlePressFollow = useCallback(() => {
     suggestedArtists.forEach((artist) => {
       if (isFollowingAllArtists) {
-        dispatchWeb(
+        dispatch(
           unfollowUser(
             artist.user_id,
             FollowSource.ARTIST_RECOMMENDATIONS_POPUP
           )
         )
       } else {
-        dispatchWeb(
+        dispatch(
           followUser(artist.user_id, FollowSource.ARTIST_RECOMMENDATIONS_POPUP)
         )
       }
     })
-  }, [suggestedArtists, isFollowingAllArtists, dispatchWeb])
+  }, [suggestedArtists, isFollowingAllArtists, dispatch])
 
   const handlePressArtist = useCallback(
     (artist) => () => {

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

@@ -35,7 +35,6 @@ import IconHidden from 'app/assets/images/iconHidden.svg'
 import { Tag, Text } from 'app/components/core'
 import { DetailsTile } from 'app/components/details-tile'
 import type { DetailsTileDetail } from 'app/components/details-tile/types'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
@@ -128,7 +127,6 @@ export const TrackScreenDetailsTile = ({
   const { accentOrange } = useThemeColors()
 
   const currentUserId = useSelectorWeb(getUserId)
-  const dispatchWeb = useDispatchWeb()
   const dispatch = useDispatch()
   const playingUid = useSelector(getUid)
   const isPlaying = useSelector(getPlaying)
@@ -200,38 +198,38 @@ export const TrackScreenDetailsTile = ({
     if (isLineupLoading) return
 
     if (isPlaying && isPlayingUid) {
-      dispatchWeb(tracksActions.pause())
+      dispatch(tracksActions.pause())
       recordPlay(track_id, false)
     } else if (!isPlayingUid) {
-      dispatchWeb(tracksActions.play(uid))
+      dispatch(tracksActions.play(uid))
       recordPlay(track_id)
     } else {
-      dispatchWeb(tracksActions.play())
+      dispatch(tracksActions.play())
       recordPlay(track_id)
     }
-  }, [track_id, uid, isPlayingUid, dispatchWeb, isPlaying, isLineupLoading])
+  }, [track_id, uid, isPlayingUid, dispatch, isPlaying, isLineupLoading])
 
   const handlePressFavorites = useCallback(() => {
-    dispatchWeb(setFavorite(track_id, FavoriteType.TRACK))
+    dispatch(setFavorite(track_id, FavoriteType.TRACK))
     navigation.push({
       native: {
         screen: 'Favorited',
         params: { id: track_id, favoriteType: FavoriteType.TRACK }
       },
       web: { route: FAVORITING_USERS_ROUTE }
     })
-  }, [dispatchWeb, track_id, navigation])
+  }, [dispatch, track_id, navigation])
 
   const handlePressReposts = useCallback(() => {
-    dispatchWeb(setRepost(track_id, RepostType.TRACK))
+    dispatch(setRepost(track_id, RepostType.TRACK))
     navigation.push({
       native: {
         screen: 'Reposts',
         params: { id: track_id, repostType: RepostType.TRACK }
       },
       web: { route: REPOSTING_USERS_ROUTE }
     })
-  }, [dispatchWeb, track_id, navigation])
+  }, [dispatch, track_id, navigation])
 
   const handlePressTag = useCallback(
     (tag: string) => {
@@ -250,19 +248,19 @@ export const TrackScreenDetailsTile = ({
   const handlePressSave = () => {
     if (!isOwner) {
       if (has_current_user_saved) {
-        dispatchWeb(unsaveTrack(track_id, FavoriteSource.TRACK_PAGE))
+        dispatch(unsaveTrack(track_id, FavoriteSource.TRACK_PAGE))
       } else {
-        dispatchWeb(saveTrack(track_id, FavoriteSource.TRACK_PAGE))
+        dispatch(saveTrack(track_id, FavoriteSource.TRACK_PAGE))
       }
     }
   }
 
   const handlePressRepost = () => {
     if (!isOwner) {
       if (has_current_user_reposted) {
-        dispatchWeb(undoRepostTrack(track_id, RepostSource.TRACK_PAGE))
+        dispatch(undoRepostTrack(track_id, RepostSource.TRACK_PAGE))
       } else {
-        dispatchWeb(repostTrack(track_id, RepostSource.TRACK_PAGE))
+        dispatch(repostTrack(track_id, RepostSource.TRACK_PAGE))
       }
     }
   }

packages/mobile/src/store/sagas.ts

@@ -28,6 +28,7 @@ import queueSagas from 'common/store/queue/sagas'
 import searchBarSagas from 'common/store/search-bar/sagas'
 import signOutSagas from 'common/store/sign-out/sagas'
 import smartCollectionPageSagas from 'common/store/smart-collection/sagas'
+import socialSagas from 'common/store/social/sagas'
 import tippingSagas from 'common/store/tipping/sagas'
 import walletSagas from 'common/store/wallet/sagas'
 import { all, fork } from 'typed-redux-saga'
@@ -80,6 +81,7 @@ export default function* rootSaga() {
     ...trendingPlaylistSagas(),
     ...trendingUndergroundSagas(),
     ...savedSagas(),
+    ...socialSagas(),
 
     // Application
     ...smartCollectionPageSagas(),