[C-995] Remove message passing interfaces (#1886)

packages/common/src/services/native-mobile-interface/types.ts

@@ -49,11 +49,6 @@ export enum MessageType {
   // Haptics
   HAPTIC_FEEDBACK = 'haptic-feedback',
 
-  // Action dispatchers
-  PUSH_ROUTE = 'action/push-route',
-  POP_ROUTE = 'action/pop-route',
-  SCROLL_TO_TOP = 'action/scroll-to-top',
-
   // OAuth
   REQUEST_TWITTER_AUTH = 'request-twitter-auth',
   REQUEST_TWITTER_AUTH_FAILED = 'request-twitter-auth-failed',

packages/common/src/store/storeContext.ts

@@ -1,16 +1,15 @@
-import { TrackDownload } from 'services'
-import { Cognito } from 'services/cognito'
-import { SolanaClient } from 'services/solana-client'
-
 import { AnalyticsEvent, LineupState, Track } from '../models'
 import { AudioPlayer } from '../services/audio-player'
 import { AudiusAPIClient } from '../services/audius-api-client'
 import { AudiusBackend } from '../services/audius-backend'
+import { Cognito } from '../services/cognito'
 import { Env } from '../services/env'
 import { Explore } from '../services/explore'
 import { FingerprintClient } from '../services/fingerprint'
 import { LocalStorage } from '../services/local-storage'
 import { FeatureFlags, RemoteConfigInstance } from '../services/remote-config'
+import { SolanaClient } from '../services/solana-client'
+import { TrackDownload } from '../services/track-download'
 import { WalletClient } from '../services/wallet-client'
 
 import { CommonState } from './reducers'
@@ -52,4 +51,5 @@ export type CommonStoreContext = {
   }
   cognito: Cognito
   trackDownload: TrackDownload
+  share: (url: string, message?: string) => Promise<void> | void
 }

packages/mobile/src/components/bottom-tab-bar/BottomTabBar.tsx

@@ -11,7 +11,6 @@ import { useDispatch } from 'react-redux'
 
 import { FULL_DRAWER_HEIGHT } from 'app/components/drawer'
 import { PLAY_BAR_HEIGHT } from 'app/components/now-playing-drawer'
-import { MessageType } from 'app/message/types'
 import { makeStyles } from 'app/styles'
 
 import { BottomTabBarButton } from './BottomTabBarButton'
@@ -81,14 +80,6 @@ export const BottomTabBar = ({
     [dispatch]
   )
 
-  const scrollToTop = useCallback(
-    () =>
-      dispatch({
-        type: MessageType.SCROLL_TO_TOP
-      }),
-    [dispatch]
-  )
-
   const navigate = useCallback(
     (route: NavigationRoute, isFocused) => {
       setIsNavigating(true)
@@ -100,10 +91,6 @@ export const BottomTabBar = ({
 
       const performNavigation = () => {
         setIsNavigating(false)
-        // Web navigation
-        if (isFocused) {
-          scrollToTop()
-        }
 
         resetExploreTab()
 
@@ -121,7 +108,7 @@ export const BottomTabBar = ({
       // new screen starts rendering
       setTimeout(performNavigation, 50)
     },
-    [navigation, resetExploreTab, scrollToTop]
+    [navigation, resetExploreTab]
   )
 
   const handleLongPress = useCallback(() => {

packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
 
 import type { User } from '@audius/common'
 import {
@@ -12,12 +12,11 @@ import {
   getRecentTipsStorage
 } from 'audius-client/src/common/store/tipping/storageUtils'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
+import { useAsync } from 'react-use'
 
 import IconRemove from 'app/assets/images/iconRemove.svg'
 import { Tile } from 'app/components/core'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
-import { MessageType } from 'app/message/types'
 import { make, track } from 'app/services/analytics'
 import { localStorage } from 'app/services/local-storage'
 import { makeStyles } from 'app/styles'
@@ -29,7 +28,7 @@ import { ReceiverDetails } from './ReceiverDetails'
 import { SendTipButton } from './SendTipButton'
 import { SenderDetails } from './SenderDetails'
 
-const { hideTip } = tippingActions
+const { hideTip, fetchRecentTips } = tippingActions
 const { getShowTip, getTipToDisplay } = tippingSelectors
 const { getUsers } = cacheUsersSelectors
 const { getAccountUser } = accountSelectors
@@ -61,35 +60,29 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 
 export const FeedTipTile = () => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
-  const account = useSelectorWeb(getAccountUser)
-  const showTip = useSelectorWeb(getShowTip)
-  const tipToDisplay = useSelectorWeb(getTipToDisplay)
+  const dispatch = useDispatch()
+  const account = useSelector(getAccountUser)
+  const showTip = useSelector(getShowTip)
+  const tipToDisplay = useSelector(getTipToDisplay)
   const tipperIds = tipToDisplay
     ? [
         tipToDisplay.sender_id,
         tipToDisplay.receiver_id,
         ...tipToDisplay.followee_supporter_ids
       ]
     : []
-  const usersMap = useSelectorWeb((state) =>
+  const usersMap = useSelector((state) =>
     getUsers(state, { ids: tipToDisplay ? tipperIds : [] })
   )
 
-  useEffect(() => {
-    const fetchRecentTipsAsync = async () => {
-      const storage = await getRecentTipsStorage(localStorage)
-      dispatchWeb({
-        type: MessageType.FETCH_RECENT_TIPS,
-        storage
-      })
-    }
-    fetchRecentTipsAsync()
-  }, [dispatchWeb])
+  useAsync(async () => {
+    const storage = await getRecentTipsStorage(localStorage)
+    dispatch(fetchRecentTips({ storage }))
+  }, [dispatch])
 
   const handlePressClose = useCallback(async () => {
     await dismissRecentTip(localStorage)
-    dispatchWeb(hideTip())
+    dispatch(hideTip())
     if (account && tipToDisplay) {
       track(
         make({
@@ -100,7 +93,7 @@ export const FeedTipTile = () => {
         })
       )
     }
-  }, [dispatchWeb, account, tipToDisplay])
+  }, [dispatch, account, tipToDisplay])
 
   if (!showTip) {
     return null

packages/mobile/src/message/types.ts

@@ -45,10 +45,6 @@ export enum MessageType {
   // Haptics
   HAPTIC_FEEDBACK = 'haptic-feedback',
 
-  // Action dispatchers
-  PUSH_ROUTE = 'action/push-route',
-  SCROLL_TO_TOP = 'action/scroll-to-top',
-
   // OAuth
   REQUEST_TWITTER_AUTH = 'request-twitter-auth',
   REQUEST_TWITTER_AUTH_SUCCEEDED = 'request-twitter-auth-succeeded',

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -9,8 +9,6 @@ import type {
 } from '@audius/common'
 import type { EventArg, NavigationState } from '@react-navigation/native'
 import type { createNativeStackNavigator } from '@react-navigation/native-stack'
-import { MessageType } from 'audius-client/src/services/native-mobile-interface/types'
-import { useDispatch } from 'react-redux'
 
 import { useDrawer } from 'app/hooks/useDrawer'
 import type { ContextualParams } from 'app/hooks/useNavigation'
@@ -89,7 +87,6 @@ type AppTabScreenProps = {
  * like track and profile
  */
 export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
-  const dispatch = useDispatch()
   const screenOptions = useAppScreenOptions()
   const { drawerNavigation } = useContext(NotificationsDrawerNavigationContext)
   const { isOpen: isNowPlayingDrawerOpen } = useDrawer('NowPlaying')
@@ -120,26 +117,6 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
               swipeEnabled: isOnFirstTab
             })
           }
-        },
-        beforeRemove: (e) => {
-          // hack for now to prevent pop for some pages
-          if (
-            !e.target?.includes('EditProfile') &&
-            !e.target?.includes('EditPlaylist') &&
-            !e.target?.includes('CreatePlaylist') &&
-            !(
-              e.target?.includes('Search') &&
-              !e.target?.includes('SearchResults')
-            ) &&
-            !e.target?.includes('TipArtist') &&
-            !e.target?.includes('TopSupporters') &&
-            !e.target?.includes('SupportingUsers')
-          ) {
-            // When a screen is removed, notify the web layer to pop navigation
-            dispatch({
-              type: MessageType.POP_ROUTE
-            })
-          }
         }
       }}
     >

packages/mobile/src/store/storeContext.ts

@@ -45,5 +45,5 @@ export const storeContext: CommonStoreContext = {
   audioPlayer,
   cognito,
   trackDownload,
-  share: (url, message) => share({ url, message })
+  share: (url: string, message?: string) => share({ url, message })
 }

packages/web/src/common/store/account/mobileSagas.ts

@@ -4,7 +4,6 @@ import { takeEvery, put, call } from 'redux-saga/effects'
 
 import { updateProfileAsync } from 'common/store/profile/sagas'
 import { FetchAccountFailed } from 'services/native-mobile-interface/lifecycle'
-import { ReloadMessage } from 'services/native-mobile-interface/linking'
 import { MessageType } from 'services/native-mobile-interface/types'
 import { SIGN_UP_PAGE, SIGN_IN_PAGE, doesMatchRoute } from 'utils/route'
 
@@ -49,9 +48,7 @@ function* watchAccountRecovery() {
       // If it's not the same account,
       // reload webview to reload libs
       // with the new entropy
-      if (!isSameAccount) {
-        new ReloadMessage().send()
-      } else {
+      if (isSameAccount) {
         yield put(setNeedsAccountRecovery())
       }
     }

packages/web/src/common/store/social/collections/sagas.ts

@@ -29,7 +29,6 @@ import * as confirmerActions from 'common/store/confirmer/actions'
 import { confirmTransaction } from 'common/store/confirmer/sagas'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import { albumPage, audioNftPlaylistPage, playlistPage } from 'utils/route'
-import { share } from 'utils/share'
 
 import watchCollectionErrors from './errorSagas'
 const { update: updatePlaylistLibrary } = playlistLibraryActions
@@ -548,6 +547,8 @@ export function* watchShareCollection() {
             collection.playlist_name,
             collection.playlist_id
           )
+
+      const share = yield* getContext('share')
       share(link, formatShareText(collection.playlist_name, user.name))
 
       const event = make(Name.SHARE, {
@@ -569,6 +570,7 @@ export function* watchShareAudioNftPlaylist() {
       const user = yield* select(getUser, { handle })
 
       const link = audioNftPlaylistPage(handle)
+      const share = yield* getContext('share')
       share(link, formatShareText('Audio NFT Playlist', user?.name ?? handle))
 
       const event = make(Name.SHARE, {

packages/web/src/common/store/social/tracks/sagas.ts

@@ -25,7 +25,6 @@ import { adjustUserField } from 'common/store/cache/users/sagas'
 import * as confirmerActions from 'common/store/confirmer/actions'
 import { confirmTransaction } from 'common/store/confirmer/sagas'
 import * as signOnActions from 'common/store/pages/signon/actions'
-import { share } from 'utils/share'
 
 import watchTrackErrors from './errorSagas'
 const { updateOptimisticListenStreak } = audioRewardsPageActions
@@ -685,6 +684,7 @@ function* watchShareTrack() {
       if (!user) return
 
       const link = track.permalink
+      const share = yield* getContext('share')
       share(link, formatShareText(track.title, user.name))
 
       const event = make(Name.SHARE, {

packages/web/src/common/store/social/users/sagas.ts

@@ -19,7 +19,6 @@ import * as confirmerActions from 'common/store/confirmer/actions'
 import { confirmTransaction } from 'common/store/confirmer/sagas'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import { profilePage } from 'utils/route'
-import { share } from 'utils/share'
 
 import errorSagas from './errorSagas'
 const { getUsers, getUser } = cacheUsersSelectors
@@ -255,6 +254,7 @@ export function* watchShareUser() {
       if (!user) return
 
       const link = profilePage(user.handle)
+      const share = yield* getContext('share')
       share(link, user.name)
 
       const event = make(Name.SHARE, {

packages/web/src/components/drawer/Drawer.tsx

@@ -8,18 +8,11 @@ import { useSpring, animated, useTransition } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 
 import { usePortal } from 'hooks/usePortal'
-import {
-  EnablePullToRefreshMessage,
-  DisablePullToRefreshMessage
-} from 'services/native-mobile-interface/android/pulltorefresh'
 
 import styles from './Drawer.module.css'
 
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
-// Hide the drawer when the keyboard is down
-const DRAWER_KEYBOARD_UP = 50
-
 // Fraction of swipe up to fade (1 / FADE_FRACTION_DENOMINATOR)
 const FADE_FRACTION_DENOMINATOR = 2
 
@@ -64,7 +57,6 @@ const interpY = (y: number) => `translate3d(0, ${y}px, 0)`
 export type DrawerProps = {
   isOpen: boolean
   children: ReactNode
-  keyboardVisible?: boolean
   shouldClose?: boolean
   onClose?: () => void
   isFullscreen?: boolean
@@ -73,7 +65,6 @@ export type DrawerProps = {
 const DraggableDrawer = ({
   isOpen,
   children,
-  keyboardVisible,
   shouldClose,
   onClose
 }: DrawerProps) => {
@@ -120,7 +111,6 @@ const DraggableDrawer = ({
 
   const open = useCallback(() => {
     setIsBackgroundVisible(true)
-    new DisablePullToRefreshMessage().send()
     setDrawerSlideProps({
       to: {
         y: -1 * getHeight()
@@ -152,7 +142,6 @@ const DraggableDrawer = ({
   ])
 
   const close = useCallback(() => {
-    new EnablePullToRefreshMessage(true).send()
     setDrawerSlideProps({
       to: {
         y: initialTranslation()
@@ -198,9 +187,9 @@ const DraggableDrawer = ({
   }, [shouldClose, close])
 
   useEffect(() => {
-    // Toggle drawer if isOpen and keyboard visibility toggles
+    // Toggle drawer if isOpen
     if (isOpen) {
-      const drawerY = keyboardVisible ? DRAWER_KEYBOARD_UP : -1 * getHeight()
+      const drawerY = -1 * getHeight()
       setDrawerSlideProps({
         to: {
           y: drawerY
@@ -209,7 +198,7 @@ const DraggableDrawer = ({
         config: fast
       })
     }
-  }, [isOpen, keyboardVisible, setDrawerSlideProps, getHeight])
+  }, [isOpen, setDrawerSlideProps, getHeight])
 
   const bind = useDrag(
     ({

packages/web/src/components/mobile-connect-wallets-drawer/MobileConnectWalletsDrawer.tsx

@@ -1,7 +1,5 @@
 import { useModalState } from 'common/hooks/useModalState'
 import Drawer from 'components/drawer/Drawer'
-import { getKeyboardVisibility } from 'store/application/ui/mobileKeyboard/selectors'
-import { useSelector } from 'utils/reducer'
 
 import styles from './MobileConnectWalletsDrawer.module.css'
 
@@ -12,11 +10,10 @@ const messages = {
 }
 
 const MobileConnectWalletsDrawer = ({ onClose }: { onClose: () => void }) => {
-  const keyboardVisible = useSelector(getKeyboardVisibility)
   const [isOpen] = useModalState('MobileConnectWalletsDrawer')
 
   return (
-    <Drawer isOpen={isOpen} keyboardVisible={keyboardVisible} onClose={onClose}>
+    <Drawer isOpen={isOpen} onClose={onClose}>
       <div className={styles.drawer}>
         <div className={styles.top}>
           <div className={styles.title}>{messages.title}</div>