Fix routing for sign up/in

package.json

@@ -14,11 +14,9 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "1.18.2",
-    "@react-native-community/datetimepicker": "^7.6.0",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
-    "@react-native-async-storage/async-storage": "^1.19.3",
-    "@react-native-community/datetimepicker": "^7.6.0",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/native-stack": "^6.9.14",
     "@react-navigation/stack": "^6.3.18",
@@ -38,7 +36,6 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-elements": "^3.4.3",
     "react-native-url-polyfill": "^2.0.0"
   },
   "devDependencies": {
@@ -59,7 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "prettier": "^2.8.8",
-    "typescript": "^4.3.0"
+    "typescript": "^5.1.3"
   },
   "private": true
 }

src/app/auth/index.tsx

@@ -6,8 +6,8 @@ import globalStyles from '../../../globalStyles';
 function LoginScreen() {
   return (
     <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Login</Text>
-      <Button title="Login" onPress={() => router.push('/home')} />
+      <Text style={globalStyles.h1}>Auth</Text>
+      <Button title="Login" onPress={() => router.push('/auth/onboarding')} />
       <Button title="Sign Up" onPress={() => router.push('/auth/signup')} />
     </SafeAreaView>
   );

src/app/auth/onboarding.tsx

@@ -1,16 +1,31 @@
-import { Link } from 'expo-router';
-import { Button, Text } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../../globalStyles';
+import { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { Session } from '@supabase/supabase-js';
+import supabase from '../../utils/supabase';
+import Login from '../../components/Login';
+import Account from '../../components/Account';
 
 function OnboardingScreen() {
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
+      setSession(newSession);
+    });
+
+    supabase.auth.onAuthStateChange((_event, newSession) => {
+      setSession(newSession);
+    });
+  }, []);
+
   return (
-    <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Onboarding</Text>
-      <Link href="/home" asChild>
-        <Button title="Update Profile" />
-      </Link>
-    </SafeAreaView>
+    <View>
+      {session && session.user ? (
+        <Account key={session.user.id} session={session} />
+      ) : (
+        <Login />
+      )}
+    </View>
   );
 }
 

src/app/auth/signup.tsx

@@ -1,14 +1,31 @@
-import { router } from 'expo-router';
-import { Button, Text } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import globalStyles from '../../../globalStyles';
+import { Session } from '@supabase/supabase-js';
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import Account from '../../components/Account';
+import Login from '../../components/Login';
+import supabase from '../../utils/supabase';
 
 function SignUpScreen() {
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
+      setSession(newSession);
+    });
+
+    supabase.auth.onAuthStateChange((_event, newSession) => {
+      setSession(newSession);
+    });
+  }, []);
+
   return (
-    <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Sign Up</Text>
-      <Button title="Sign Up" onPress={() => router.push('/auth/onboarding')} />
-    </SafeAreaView>
+    <View>
+      {session && session.user ? (
+        <Account key={session.user.id} session={session} />
+      ) : (
+        <Login />
+      )}
+    </View>
   );
 }
 

src/components/Login.tsx

@@ -42,6 +42,7 @@ export default function Login() {
     });
 
     if (error) Alert.alert(error.message);
+    console.error(error);
     setLoading(false);
   };
 
@@ -69,18 +70,10 @@ export default function Login() {
         />
       </View>
       <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Button
-          title="Sign in"
-          disabled={loading}
-          onPress={() => signInWithEmail()}
-        />
+        <Button title="Sign in" disabled={loading} onPress={signInWithEmail} />
       </View>
       <View style={styles.verticallySpaced}>
-        <Button
-          title="Sign up"
-          disabled={loading}
-          onPress={() => signUpWithEmail()}
-        />
+        <Button title="Sign up" disabled={loading} onPress={signUpWithEmail} />
       </View>
     </View>
   );