Add sample query (#264)

quiltt · May 16, 2024 · 75b5e79 · 75b5e79
1 parent 4271cd9
commit 75b5e79
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 30 deletions.
diff --git a/examples/react-native-expo/.env.example b/examples/react-native-expo/.env.example
@@ -1,3 +1,4 @@
+EXPO_PUBLIC_QUILTT_CLIENT_ID="GET_THIS_ID_FROM_YOUR_DASHBOARD"
 EXPO_PUBLIC_QUILTT_AUTH_TOKEN="GET_THIS_TOKEN_FROM_YOUR_SERVER"
 EXPO_PUBLIC_CONNECTOR_ID="GET_THIS_ID_FROM_YOUR_DASHBOARD"
 EXPO_PUBLIC_HTTPS_APP_LINK="YOUR_APP_LINK"

diff --git a/examples/react-native-expo/app/(tabs)/_layout.tsx b/examples/react-native-expo/app/(tabs)/_layout.tsx
@@ -11,6 +11,10 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
+        tabBarStyle: {
+          borderTopColor: Colors[colorScheme ?? 'light'].muted,
+          backgroundColor: Colors[colorScheme ?? 'light'].muted,
+        },
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
       }}

diff --git a/examples/react-native-expo/app/(tabs)/connector.tsx b/examples/react-native-expo/app/(tabs)/connector.tsx
@@ -1,38 +1,32 @@
-import { StyleSheet } from 'react-native'
-import { ThemedView } from '@/components/ThemedView'
 import { QuilttConnector } from '@quiltt/react-native'
 import type { ConnectorSDKCallbackMetadata } from '@quiltt/react-native'
 import { router } from 'expo-router'
-import { PageView } from '@/components/PageView'
 
 const CONNECTOR_ID = process.env.EXPO_PUBLIC_CONNECTOR_ID
 const HTTPS_APP_LINK = process.env.EXPO_PUBLIC_HTTPS_APP_LINK
 const INSTITUION_SEARCH_TERM = process.env.EXPO_PUBLIC_INSTITUION_SEARCH_TERM
 
 export default function ExplorerScreen() {
+  const navigateBack = () => {
+    router.canGoBack() ? router.back() : router.push('(tabs)')
+  }
+
   return (
     <QuilttConnector
       connectorId={CONNECTOR_ID!}
       oauthRedirectUrl={HTTPS_APP_LINK!}
       institution={INSTITUION_SEARCH_TERM}
       onExitSuccess={(metadata: ConnectorSDKCallbackMetadata) => {
         console.log(metadata.connectionId)
-        router.navigate('/index')
+        navigateBack()
+      }}
+      onExitAbort={() => {
+        navigateBack()
       }}
-      onExitAbort={() => router.navigate('/index')}
       onExitError={(metadata: ConnectorSDKCallbackMetadata) => {
         console.log(metadata.connectorId)
-        router.navigate('/index')
+        navigateBack()
       }}
     />
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 8,
-    marginBottom: 8,
-    minHeight: '100%',
-    width: '100%',
-  },
-})
diff --git a/examples/react-native-expo/app/(tabs)/index.tsx b/examples/react-native-expo/app/(tabs)/index.tsx
@@ -5,8 +5,39 @@ import { PageView } from '@/components/PageView'
 import { ThemedText } from '@/components/ThemedText'
 import { ThemedView } from '@/components/ThemedView'
 import { ButtonLink } from '@/components/ButtonLink'
+import { useQuery, gql } from '@quiltt/react-native'
+import { useEffect } from 'react'
+import { Colors } from '@/constants/Colors'
+
+const SAMPLE_QUERY = gql`
+  query SampleQuery {
+    profile {
+      id
+      name
+      email
+    }
+    connections(filter: { status: [INITIALIZING, SYNCING, SYNCED] }) {
+      id
+      institution {
+        id
+        name
+      }
+    }
+  }
+`
 
 export default function HomeScreen() {
+  const { data, error, loading } = useQuery<{
+    profile: { id: string; name: string; email: string }
+    connections: { id: string; institution: { id: string; name: string } }[]
+  }>(SAMPLE_QUERY as any) // TODO: Fix type error
+
+  useEffect(() => {
+    if (error) {
+      console.error(error)
+    }
+  }, [error])
+
   return (
     <PageView
       title={
@@ -19,13 +50,59 @@ export default function HomeScreen() {
       <ThemedView style={styles.container}>
         <ButtonLink href="/connector">Launch Connector</ButtonLink>
       </ThemedView>
+
+      {loading ? (
+        <ThemedText>Loading...</ThemedText>
+      ) : (
+        <ThemedView style={styles.container}>
+          <ThemedView style={styles.container}>
+            <ThemedText style={styles.title}>Profile</ThemedText>
+            <ThemedText>ID: {data?.profile?.id}</ThemedText>
+            <ThemedText>Name: {data?.profile?.name}</ThemedText>
+            <ThemedText>Email: {data?.profile?.email}</ThemedText>
+          </ThemedView>
+          {data?.connections && data?.connections?.length >= 1 ? (
+            <ThemedView style={styles.container}>
+              <ThemedText style={styles.title}>Connections</ThemedText>
+              {data.connections.map((item, index) => (
+                <ThemedView
+                  key={`${item.id}-${item.institution.id}`}
+                  style={
+                    index === data.connections.length - 1 ? styles.listItemLast : styles.listItem
+                  }
+                >
+                  <ThemedText>ID: {item.institution.id}</ThemedText>
+                  <ThemedText>Name: {item.institution.name}</ThemedText>
+                </ThemedView>
+              ))}
+            </ThemedView>
+          ) : null}
+        </ThemedView>
+      )}
     </PageView>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    gap: 8,
-    marginBottom: 8,
+    gap: 4,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 8,
+  },
+  listItem: {
+    gap: 2,
+    borderBottomColor: Colors.light.muted,
+    borderBottomWidth: 1,
+    paddingVertical: 8,
+  },
+  listItemLast: {
+    gap: 2,
+    borderBottomColor: Colors.light.muted,
+    borderBottomWidth: 0,
+    paddingVertical: 8,
   },
 })
diff --git a/examples/react-native-expo/app/+not-found.tsx b/examples/react-native-expo/app/+not-found.tsx
@@ -3,12 +3,11 @@ import { StyleSheet } from 'react-native'
 
 import { ThemedText } from '@/components/ThemedText'
 import { ThemedView } from '@/components/ThemedView'
-import { Colors } from '@/constants/Colors'
 
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ headerShown: false }} />
       <ThemedView style={styles.container}>
         <ThemedText type="title">This screen doesn't exist.</ThemedText>
         <Link href="/" style={styles.link}>
@@ -29,6 +28,5 @@ const styles = StyleSheet.create({
   link: {
     marginTop: 15,
     paddingVertical: 15,
-    color: Colors.light.tint,
   },
 })
diff --git a/examples/react-native-expo/app/_layout.tsx b/examples/react-native-expo/app/_layout.tsx
@@ -8,6 +8,7 @@ import { QuilttProvider } from '@quiltt/react-native'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import * as Linking from 'expo-linking'
 
+const QUILTT_CLIENT_ID = process.env.EXPO_PUBLIC_QUILTT_CLIENT_ID
 const QUILTT_AUTH_TOKEN = process.env.EXPO_PUBLIC_QUILTT_AUTH_TOKEN
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
@@ -44,7 +45,7 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <QuilttProvider token={QUILTT_AUTH_TOKEN}>
+      <QuilttProvider clientId={QUILTT_CLIENT_ID!} token={QUILTT_AUTH_TOKEN!}>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
           <Stack.Screen name="+not-found" />

diff --git a/examples/react-native-expo/assets/images/quiltt-logo-partial.png b/examples/react-native-expo/assets/images/quiltt-logo-partial.png
diff --git a/examples/react-native-expo/components/ButtonLink.tsx b/examples/react-native-expo/components/ButtonLink.tsx
@@ -2,11 +2,14 @@ import { Link } from 'expo-router'
 import type { ComponentProps } from 'react'
 import { StyleSheet, Text } from 'react-native'
 import { Colors } from '@/constants/Colors'
+import { useThemeColor } from '@/hooks/useThemeColor'
 
 type ButtonLinkProps = ComponentProps<typeof Link>
 
 export function ButtonLink({ href, style, children, ...props }: ButtonLinkProps) {
-  const mergedStyle = [styles.button, style]
+  const tintColor = useThemeColor({}, 'tint')
+
+  const mergedStyle = [{ ...styles.button, backgroundColor: tintColor }, style]
   return (
     <Link {...props} href={href} style={mergedStyle}>
       <Text style={styles.text}>{children}</Text>

diff --git a/examples/react-native-expo/components/PageView.tsx b/examples/react-native-expo/components/PageView.tsx
@@ -1,18 +1,19 @@
 import { Image, StyleSheet } from 'react-native'
-
 import { ParallaxScrollView } from '@/components/ParallaxScrollView'
 import { ThemedText } from '@/components/ThemedText'
 import { ThemedView } from '@/components/ThemedView'
+import { useThemeColor } from '@/hooks/useThemeColor'
 
 type PageViewProps = {
   children: React.ReactNode
   title?: React.ReactNode
 }
 
 export const PageView = ({ children, title }: PageViewProps) => {
+  const muted = useThemeColor({}, 'muted')
   return (
     <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D3C1F0', dark: '#D3C1F0' }}
+      headerBackgroundColor={{ light: '#D3C1F0', dark: muted }}
       headerImage={
         <Image source={require('@/assets/images/quiltt-logo-partial.png')} style={styles.logo} />
       }
@@ -39,10 +40,12 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   logo: {
-    height: 178,
-    width: 290,
+    height: 128,
+    width: 360,
     bottom: 0,
     left: 0,
+    top: 0,
+    right: 0,
     position: 'absolute',
   },
 })
diff --git a/examples/react-native-expo/components/ParallaxScrollView.tsx b/examples/react-native-expo/components/ParallaxScrollView.tsx
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   header: {
-    height: 250,
+    height: 128,
     overflow: 'hidden',
   },
   content: {

diff --git a/examples/react-native-expo/components/ThemedText.tsx b/examples/react-native-expo/components/ThemedText.tsx
@@ -1,6 +1,7 @@
 import { Text, type TextProps, StyleSheet } from 'react-native'
 
 import { useThemeColor } from '@/hooks/useThemeColor'
+import { Colors } from '@/constants/Colors'
 
 export type ThemedTextProps = TextProps & {
   lightColor?: string
@@ -16,6 +17,7 @@ export function ThemedText({
   ...rest
 }: ThemedTextProps) {
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text')
+  const tintColor = useThemeColor({ light: lightColor, dark: darkColor }, 'tint')
 
   return (
     <Text
@@ -25,7 +27,7 @@ export function ThemedText({
         type === 'title' ? styles.title : undefined,
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
         type === 'subtitle' ? styles.subtitle : undefined,
-        type === 'link' ? styles.link : undefined,
+        type === 'link' ? { ...styles.link, color: tintColor } : undefined,
         style,
       ]}
       {...rest}
@@ -55,6 +57,5 @@ const styles = StyleSheet.create({
   link: {
     lineHeight: 30,
     fontSize: 16,
-    color: '#0a7ea4',
   },
 })
diff --git a/examples/react-native-expo/constants/Colors.ts b/examples/react-native-expo/constants/Colors.ts
@@ -4,11 +4,14 @@
  */
 
 const tintColorLight = '#5928A3'
-const tintColorDark = '#5928A3'
+const tintColorDark = '#7C3AED'
+const mutedColorLight = '#f9f7fd'
+const mutedColorDark = '#2A134D'
 
 export const Colors = {
   light: {
     text: '#11181C',
+    muted: mutedColorLight,
     background: '#fff',
     tint: tintColorLight,
     icon: '#687076',
@@ -17,6 +20,7 @@ export const Colors = {
   },
   dark: {
     text: '#ECEDEE',
+    muted: mutedColorDark,
     background: '#1A0C30',
     tint: tintColorDark,
     icon: '#9BA1A6',