[auth] Implement email account creation

package.json

@@ -12,19 +12,30 @@
     "prettier": "prettier --check ."
   },
   "dependencies": {
+    "@expo/vector-icons": "^13.0.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-native-async-storage/async-storage": "1.18.2",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/native-stack": "^6.9.14",
+    "@react-navigation/stack": "^6.3.18",
+    "@react-native-async-storage/async-storage": "^1.19.3",
     "@supabase/supabase-js": "^2.36.0",
     "axios": "^1.5.0",
     "expo": "~49.0.11",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native-root-siblings": "^4.1.1",
+    "react-native-root-toast": "^3.5.1",
+    "react-native-ionicons": "^4.6.5",
+    "react-native": "0.72.5",
     "react-native-elements": "^3.4.3",
     "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": {
@@ -45,7 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.5"
+    "typescript": "^4.3.0"
   },
   "private": true
 }

src/components/Account.tsx

@@ -3,7 +3,8 @@ import { StyleSheet, View, Alert, ScrollView } from 'react-native';
 import { Button, Input } from 'react-native-elements';
 import { Session } from '@supabase/supabase-js';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import supabase from '../lib/supabase';
+import UserStringInput from './UserStringInput';
+import supabase from '../utils/supabase';
 
 const styles = StyleSheet.create({
   container: {
@@ -20,24 +21,6 @@ const styles = StyleSheet.create({
   },
 });
 
-type UserDataInputProps = {
-  label: string;
-  value: string;
-  set: React.Dispatch<React.SetStateAction<string>>;
-};
-
-function UserStringInput({ label, value, set }: UserDataInputProps) {
-  return (
-    <View style={styles.verticallySpaced}>
-      <Input
-        label={label}
-        value={value || ''}
-        onChangeText={text => set(text)}
-      />
-    </View>
-  );
-}
-
 export default function Account({ session }: { session: Session }) {
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
@@ -46,6 +29,11 @@ export default function Account({ session }: { session: Session }) {
   const [gender, setGender] = useState('');
   const [raceEthnicity, setRaceEthnicity] = useState('');
 
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (session) getProfile();
+  }, [session]);
+
   const getProfile = async () => {
     try {
       setLoading(true);
@@ -77,16 +65,12 @@ export default function Account({ session }: { session: Session }) {
     }
   };
 
-  useEffect(() => {
-    if (session) getProfile();
-  }, [session]);
-
   const updateProfile = async () => {
     try {
       setLoading(true);
       if (!session?.user) throw new Error('No user on the session!');
 
-      // Only update value that are not blank
+      // Only update values that are not blank
       const updates = {
         ...(firstName && { first_name: firstName }),
         ...(lastName && { last_name: lastName }),
@@ -132,7 +116,6 @@ export default function Account({ session }: { session: Session }) {
       <View style={[styles.verticallySpaced, styles.mt20]}>
         <Input label="Email" value={session?.user?.email} disabled />
       </View>
-
       <UserStringInput
         label="First Name"
         value={firstName}
@@ -145,13 +128,14 @@ export default function Account({ session }: { session: Session }) {
         value={raceEthnicity}
         set={setRaceEthnicity}
       />
-
       <DateTimePicker
         testID="dateTimePicker"
         value={birthday}
         mode="date"
         onChange={date => {
-          setBirthday(new Date(date.nativeEvent.timestamp));
+          if (date.nativeEvent.timestamp) {
+            setBirthday(new Date(date.nativeEvent.timestamp));
+          }
         }}
       />
       <View style={[styles.verticallySpaced, styles.mt20]}>
@@ -161,7 +145,6 @@ export default function Account({ session }: { session: Session }) {
           disabled={loading}
         />
       </View>
-
       <View style={styles.verticallySpaced}>
         <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
       </View>

src/components/Login.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Alert, StyleSheet, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import supabase from '../lib/supabase';
+import supabase from '../utils/supabase';
 
 const styles = StyleSheet.create({
   container: {

src/components/UserStringInput.tsx

@@ -0,0 +1,30 @@
+import { View, StyleSheet } from 'react-native';
+import { Input } from 'react-native-elements';
+
+const styles = StyleSheet.create({
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+});
+
+type UserStringInputProps = {
+  label: string;
+  value: string;
+  set: React.Dispatch<React.SetStateAction<string>>;
+};
+
+function UserStringInput({ label, value, set }: UserStringInputProps) {
+  return (
+    <View style={styles.verticallySpaced}>
+      <Input
+        label={label}
+        value={value || ''}
+        onChangeText={text => set(text)}
+      />
+    </View>
+  );
+}
+
+export default UserStringInput;

src/screens/LoginScreen.tsx

@@ -2,11 +2,11 @@ import 'react-native-url-polyfill/auto';
 import { useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { Session } from '@supabase/supabase-js';
-import supabase from '../lib/supabase';
+import supabase from '../utils/supabase';
 import Login from '../components/Login';
 import Account from '../components/Account';
 
-export default function App() {
+export default function LoginScreen() {
   const [session, setSession] = useState<Session | null>(null);
 
   useEffect(() => {