simplifying code

Author: wesrisenmay-mx

example/app/connect.tsx

@@ -41,6 +41,9 @@ export default function Connect() {
         onMemberConnected={(payload) => {
           console.log(`Member connected with payload: ${JSON.stringify(payload)}`)
         }}
+        onOAuthRequested={(payload) => {
+          console.log(`OAuth requested with URL: ${payload.url}`)
+        }}
         onStepChange={(payload) => {
           console.log(`Moving from ${payload.previous} to ${payload.current}`)
         }}

package-lock.json

@@ -34,7 +34,7 @@
     "@mxenabled/widget-post-message-definitions": "^1.4.0",
     "expo-web-browser": "^13.0.0",
     "react-native-base64": "^0.2.1",
-    "url": "^0.11.0"
+    "url": "^0.11.4"
   },
   "peerDependencies": {
     "react": "*",

package.json

@@ -1,10 +1,11 @@
 import {
   dispatchConnectLocationChangeEvent,
   ConnectPostMessageCallbackProps,
+  ConnectOAuthRequestedPayload,
 } from "@mxenabled/widget-post-message-definitions"
 
 import { Type, SsoUrlProps, ConnectWidgetConfigurationProps } from "../sso"
-import { makeDefaultConnectOnOAuthRequested } from "./oauth"
+import * as WebBrowser from "expo-web-browser"
 import { makeWidgetComponentWithDefaults } from "./make_component"
 import { useOAuthDeeplink, OAuthProps } from "./oauth"
 import { useWidgetRendererWithRef, StylingProps } from "./renderer"
@@ -22,17 +23,29 @@ export const ConnectVerificationWidget = makeWidgetComponentWithDefaults(Connect
 })
 
 export function ConnectWidget(props: ConnectWidgetProps) {
+  const onOAuthRequested = (payload: ConnectOAuthRequestedPayload) => {
+    const { url } = payload
+    WebBrowser.openAuthSessionAsync(url)
+
+    props.onOAuthRequested?.(payload)
+  }
+
   props = {
-    onOAuthRequested: makeDefaultConnectOnOAuthRequested(),
+    onOAuthRequested,
+    ...props,
+  }
+
+  const modifiedProps = {
     ...props,
+    onOAuthRequested,
   }
 
   const [ref, elem] = useWidgetRendererWithRef(
-    { ...props, widgetType: Type.ConnectWidget },
+    { ...modifiedProps, widgetType: Type.ConnectWidget },
     dispatchConnectLocationChangeEvent,
   )
 
-  useOAuthDeeplink(ref, props)
+  useOAuthDeeplink(ref, modifiedProps)
 
   return elem
 }

src/components/ConnectWidgets.tsx

@@ -1,17 +1,7 @@
 import { useEffect, useState } from "react"
 import { parse as parseUrl, UrlWithParsedQuery } from "url"
-
-import { ConnectOAuthRequestedPayload } from "@mxenabled/widget-post-message-definitions"
-
 import { WebViewRef } from "./webview"
 import { onUrlChange } from "../platform/deeplink"
-import { loadUrlInBrowser } from "./loadUrlInBrowser"
-
-export function makeDefaultConnectOnOAuthRequested() {
-  return function ({ url }: ConnectOAuthRequestedPayload) {
-    loadUrlInBrowser(url)
-  }
-}
 
 /* Used when handling and parsing an OAuth deeplink. This is what the OAuth
  * flow uses to communicate state and status back to the app.

src/components/loadUrlInBrowser.test.ts

@@ -1,52 +1,22 @@
 import { WebViewNavigation } from "react-native-webview"
-import { parse as parseUrl } from "url"
-
-import { loadUrlInBrowser } from "./loadUrlInBrowser"
-
-export enum Action {
-  LoadInApp,
-  LoadInBrowser,
-  Intercept,
-}
+import * as WebBrowser from "expo-web-browser"
 
 type Callbacks = {
   onIntercept: (url: string) => void
 }
 
-class Interceptor {
-  constructor(protected widgetUrl: string) {}
-
-  action(request: WebViewNavigation): Action {
-    if (request.url === this.widgetUrl) {
-      return Action.LoadInApp
-    }
-
-    const { protocol } = parseUrl(request.url)
-
-    if (protocol === "mx:") {
-      return Action.Intercept
-    }
-
-    return Action.LoadInBrowser
-  }
-}
-
 export function makeRequestInterceptor(widgetUrl: string, callbacks: Callbacks) {
-  const interceptor = new Interceptor(widgetUrl)
-
-  return function (request: WebViewNavigation) {
-    const action = interceptor.action(request)
-    switch (action) {
-      case Action.LoadInApp:
-        return true
-
-      case Action.Intercept:
-        callbacks.onIntercept(request.url)
-        return false
-
-      case Action.LoadInBrowser:
-        loadUrlInBrowser(request.url)
-        return false
+  return (request: WebViewNavigation) => {
+    const { protocol } = new URL(request.url)
+
+    if (request.url === widgetUrl) {
+      return true
+    } else if (protocol === "mx:") {
+      callbacks.onIntercept(request.url)
+      return false
+    } else {
+      WebBrowser.openBrowserAsync(request.url)
+      return false
     }
   }
 }