Merge pull request #122 from mxenabled/wes/redirectE2ETest

converted to expo router, example app now navigates back to the app a…

Author: wesrisenmay-mx

CHANGELOG.md

@@ -13,6 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [2.0.3]
+
+### Added
+
+- An E2E test for the app redirect
+
+### Fixed
+
+- Redirect back to the example app after a successful connection
+
 ## [2.0.2]
 
 ### Added

example/app/App.tsx

@@ -1,5 +1,60 @@
-import { Stack } from "expo-router";
+import { Stack } from "expo-router"
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+      }}>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Widgets",
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="connect"
+        options={{
+          title: "Connect Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Stack.Screen
+        name="budgets"
+        options={{
+          title: "Budgets Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Stack.Screen
+        name="goals"
+        options={{
+          title: "Goals Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Stack.Screen
+        name="pulse"
+        options={{
+          title: "Pulse Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Stack.Screen
+        name="spending"
+        options={{
+          title: "Spending Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Stack.Screen
+        name="transactions"
+        options={{
+          title: "Transactions Widget",
+          headerBackTitle: "Back",
+        }}
+      />
+    </Stack>
+  )
 }

example/app/_layout.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { SafeAreaView, StyleSheet, Platform } from "react-native"
+
+import { BudgetsWidget } from "@mxenabled/react-native-widget-sdk"
+
+const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"
+const proxy = `${baseUrl}/user/widget_urls`
+
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    paddingTop: 10,
+  },
+})
+
+export default function Budgets() {
+  return (
+    <SafeAreaView style={styles.page}>
+      <BudgetsWidget proxy={proxy} />
+    </SafeAreaView>
+  )
+}

example/app/budgets.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { SafeAreaView, StyleSheet, Platform } from "react-native"
+import * as Linking from "expo-linking"
+
+import { ConnectWidget } from "@mxenabled/react-native-widget-sdk"
+
+const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"
+const proxy = `${baseUrl}/user/widget_urls`
+
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    paddingTop: 10,
+  },
+})
+
+export default function Connect() {
+  const clientRedirectUrl = Linking.createURL("connect")
+
+  return (
+    <SafeAreaView style={styles.page}>
+      <ConnectWidget
+        proxy={proxy}
+        clientRedirectUrl={clientRedirectUrl}
+        onSsoUrlLoadError={(error) => {
+          console.error(`SSO URL load error: ${error}`)
+        }}
+        onMessage={(url) => {
+          console.log(`Got a message: ${url}`)
+        }}
+        onInvalidMessageError={(url, _error) => {
+          console.log(`Got an unknown message: ${url}`)
+        }}
+        onLoad={(_payload) => {
+          console.log("Widget is loading")
+        }}
+        onLoaded={(_payload) => {
+          console.log("Widget has loaded")
+        }}
+        onStepChange={(payload) => {
+          console.log(`Moving from ${payload.previous} to ${payload.current}`)
+        }}
+        onSelectedInstitution={(payload) => {
+          console.log(`Selecting ${payload.name}`)
+        }}
+      />
+    </SafeAreaView>
+  )
+}

example/app/connect.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { SafeAreaView, StyleSheet, Platform } from "react-native"
+
+import { GoalsWidget } from "@mxenabled/react-native-widget-sdk"
+
+const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"
+const proxy = `${baseUrl}/user/widget_urls`
+
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    paddingTop: 10,
+  },
+})
+
+export default function Goals() {
+  return (
+    <SafeAreaView style={styles.page}>
+      <GoalsWidget proxy={proxy} />
+    </SafeAreaView>
+  )
+}

example/app/goals.tsx

@@ -1,5 +1,46 @@
-import App from "./App"
+import React, { FC, PropsWithChildren } from "react"
+import { SafeAreaView, Text, View, StyleSheet } from "react-native"
+import { Link } from "expo-router"
 
-export default function Index() {
-  return <App />
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    paddingTop: 10,
+  },
+  navigation: {
+    display: "flex",
+    height: "100%",
+    gap: 10,
+    margin: 50,
+  },
+  navigationButton: {
+    alignItems: "center",
+    backgroundColor: "rgb(144, 202, 249)",
+    padding: 20,
+  },
+  navItemNormalText: {
+    color: "rgba(0, 0, 0, 0.87)",
+    fontSize: 20,
+  },
+})
+
+export default function Home() {
+  return (
+    <SafeAreaView style={styles.page}>
+      <View style={styles.navigation}>
+        <NavigationButton href="/connect">Connect</NavigationButton>
+        <NavigationButton href="/budgets">Budgets</NavigationButton>
+        <NavigationButton href="/goals">Goals</NavigationButton>
+        <NavigationButton href="/pulse">Pulse</NavigationButton>
+        <NavigationButton href="/spending">Spending</NavigationButton>
+        <NavigationButton href="/transactions">Transactions</NavigationButton>
+      </View>
+    </SafeAreaView>
+  )
 }
+
+const NavigationButton: FC<PropsWithChildren<{ href: string }>> = ({ href, children }) => (
+  <Link href={href} style={styles.navigationButton} asChild>
+    <Text style={styles.navItemNormalText}>{children}</Text>
+  </Link>
+)