[Reloaded] No more useDispatchWeb, messages C-1089 (#1927)

* dispatch * no more use dispatch web or messages * fixes * reorg Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
AudiusProject · Sep 15, 2022 · 2fd28e4 · 2fd28e4
1 parent 6fc8709
commit 2fd28e4
Show file tree

Hide file tree

Showing 12 changed files with 15 additions and 410 deletions.
diff --git a/packages/common/src/services/index.ts b/packages/common/src/services/index.ts
@@ -1,6 +1,5 @@
 export * from './remote-config'
 export * from './RandomImage'
-export * from './native-mobile-interface'
 export * from './audius-api-client'
 export * from './audius-backend'
 export * from './fingerprint'

diff --git a/packages/common/src/services/native-mobile-interface/index.ts b/packages/common/src/services/native-mobile-interface/index.ts
diff --git a/packages/common/src/services/native-mobile-interface/types.ts b/packages/common/src/services/native-mobile-interface/types.ts
diff --git a/packages/mobile/src/components/oauth/OAuth.tsx b/packages/mobile/src/components/oauth/OAuth.tsx
@@ -17,8 +17,7 @@ import {
   getMessageType
 } from 'app/store/oauth/selectors'
 import type { Credentials } from 'app/store/oauth/types'
-
-const AUTH_RESPONSE = 'auth-response'
+import { AUTH_RESPONSE_MESSAGE_TYPE } from 'app/store/oauth/types'
 
 const IDENTITY_SERVICE = Config.IDENTITY_SERVICE
 
@@ -27,7 +26,7 @@ const TWITTER_POLLER = `
   const exit = () => {
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
-        type: '${AUTH_RESPONSE}'
+        type: '${AUTH_RESPONSE_MESSAGE_TYPE}'
       })
     )
   }
@@ -47,7 +46,7 @@ const TWITTER_POLLER = `
 
           window.ReactNativeWebView.postMessage(
             JSON.stringify({
-              type: '${AUTH_RESPONSE}',
+              type: '${AUTH_RESPONSE_MESSAGE_TYPE}',
               oauthToken,
               oauthVerifier
             })
@@ -70,7 +69,7 @@ const INSTAGRAM_POLLER = `
   const exit = () => {
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
-        type: '${AUTH_RESPONSE}'
+        type: '${AUTH_RESPONSE_MESSAGE_TYPE}'
       })
     )
   }
@@ -88,7 +87,7 @@ const INSTAGRAM_POLLER = `
 
           window.ReactNativeWebView.postMessage(
             JSON.stringify({ 
-              type: '${AUTH_RESPONSE}',
+              type: '${AUTH_RESPONSE_MESSAGE_TYPE}',
               instagramCode
             })
           )
@@ -110,7 +109,7 @@ const TIKTOK_POLLER = `
   const exit = (error) => {
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
-        type: '${AUTH_RESPONSE}',
+        type: '${AUTH_RESPONSE_MESSAGE_TYPE}',
         error: error.message
       })
     )
@@ -144,7 +143,7 @@ const TIKTOK_POLLER = `
 
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
-        type: '${AUTH_RESPONSE}',
+        type: '${AUTH_RESPONSE_MESSAGE_TYPE}',
         accessToken: access_token,
         openId: open_id,
         expiresIn: expires_in
@@ -191,7 +190,7 @@ const OAuth = () => {
     if (event.nativeEvent.data) {
       const data = JSON.parse(event.nativeEvent.data)
 
-      if (data.type === AUTH_RESPONSE) {
+      if (data.type === AUTH_RESPONSE_MESSAGE_TYPE) {
         const payloadByProvider = {
           [Provider.TWITTER]: (message: any) =>
             message.oauthToken && message.oauthVerifier
@@ -218,7 +217,7 @@ const OAuth = () => {
                 }
         }
 
-        const isNativeOAuth = !messageType && !messageId
+        const isNativeOAuth = !messageType && !messageId // i.e. if the Oauth flow occured in a native app (e.g. the Tiktok app) instead of a webview
         const payload = payloadByProvider[provider as Provider](data)
 
         if (isNativeOAuth) {

diff --git a/packages/mobile/src/components/share-to-tiktok-drawer/ShareToTikTokDrawer.tsx b/packages/mobile/src/components/share-to-tiktok-drawer/ShareToTikTokDrawer.tsx
@@ -7,15 +7,14 @@ import {
   shareSoundToTiktokModalSelectors
 } from '@audius/common'
 import { StyleSheet, View } from 'react-native'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 
 import IconTikTok from 'app/assets/images/iconTikTok.svg'
 import IconTikTokInverted from 'app/assets/images/iconTikTokInverted.svg'
 import Button from 'app/components/button'
 import { AppDrawer, useDrawerState } from 'app/components/drawer'
 import LoadingSpinner from 'app/components/loading-spinner'
 import Text from 'app/components/text'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import type { ThemeColors } from 'app/hooks/useThemedStyles'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import { useTikTokAuth } from 'app/hooks/useTikTokAuth'
@@ -89,7 +88,7 @@ export const ShareToTikTokDrawer = () => {
 
   const { onClose } = useDrawerState(MODAL_NAME)
 
-  const dispatchWeb = useDispatchWeb()
+  const dispatchWeb = useDispatch()
 
   const track = useSelector(getTrack)
   const status = useSelector(getStatus)

diff --git a/packages/mobile/src/hooks/useDispatchWeb.ts b/packages/mobile/src/hooks/useDispatchWeb.ts
diff --git a/packages/mobile/src/message/index.ts b/packages/mobile/src/message/index.ts
diff --git a/packages/mobile/src/message/types.ts b/packages/mobile/src/message/types.ts
diff --git a/packages/mobile/src/store/oauth/reducer.ts b/packages/mobile/src/store/oauth/reducer.ts
@@ -1,5 +1,3 @@
-import type { MessageType } from 'app/message'
-
 import type { OAuthActions } from './actions'
 import {
   NATIVE_OPEN_POPUP,
@@ -10,6 +8,7 @@ import {
   SET_INSTAGRAM_ERROR,
   RESET_OAUTH_STATE
 } from './actions'
+import type { AUTH_RESPONSE_MESSAGE_TYPE } from './types'
 
 type TwitterInfo = {
   uuid: any
@@ -32,7 +31,7 @@ export type OAuthState = {
   isOpen: boolean
   // Incoming message id to reply back to with OAuth results
   messageId: string | null
-  messageType: MessageType | null
+  messageType: typeof AUTH_RESPONSE_MESSAGE_TYPE | null
   url: string | null
   provider: Provider | null
   twitterInfo: TwitterInfo | null

diff --git a/packages/mobile/src/store/oauth/types.ts b/packages/mobile/src/store/oauth/types.ts
@@ -17,3 +17,5 @@ export type Credentials = (
 ) & {
   error?: string
 }
+
+export const AUTH_RESPONSE_MESSAGE_TYPE = 'auth-response' as const