Implemented reducer in login and sign up

calblueprint · Nov 19, 2023 · 9c648ac · 9c648ac
1 parent e2d7b80
commit 9c648ac
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 87 deletions.
diff --git a/src/app/auth/forgotPassword.tsx b/src/app/auth/forgotPassword.tsx
@@ -7,7 +7,7 @@ import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 
 function ForgotPasswordScreen() {
-  const { updateUser, signOut, resetPassword, verifyOtp } = useSession();
+  const { dispatch, isLoading } = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);

diff --git a/src/app/auth/login.tsx b/src/app/auth/login.tsx
@@ -1,16 +1,15 @@
 import { Link, router } from 'expo-router';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Alert, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
 
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 
 function LoginScreen() {
-  const sessionHandler = useSession();
+  const { dispatch, isLoading, session, error } = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
 
   const resetAndPushToRouter = (path: string) => {
     while (router.canGoBack()) {
@@ -20,14 +19,22 @@ function LoginScreen() {
   };
 
   const signInWithEmail = async () => {
-    setLoading(true);
-    const { error } = await sessionHandler.signInWithEmail(email, password);
-
-    if (error) Alert.alert(error.message);
-    else resetAndPushToRouter('/home');
-    setLoading(false);
+    dispatch({ type: 'SIGN_IN_WITH_EMAIL', email, password });
   };
 
+  useEffect(() => {
+    if (error) {
+      Alert.alert(error.message);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    console.log(session);
+    if (session) {
+      resetAndPushToRouter('/home');
+    }
+  }, [session]);
+
   return (
     <View style={globalStyles.auth_container}>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
@@ -53,7 +60,7 @@ function LoginScreen() {
       </View>
       <Link href="/auth/forgotPassword">Forgot password?</Link>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
-        <Button title="Log In" disabled={loading} onPress={signInWithEmail} />
+        <Button title="Log In" disabled={isLoading} onPress={signInWithEmail} />
       </View>
       <Link href="/auth/signup">Don&apos;t have an account? Sign Up</Link>
     </View>

diff --git a/src/app/auth/signup.tsx b/src/app/auth/signup.tsx
@@ -1,31 +1,33 @@
 import { Redirect, Link, router } from 'expo-router';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Alert, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
 
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
 
 function SignUpScreen() {
-  const { session, signUp } = useSession();
+  const { session, dispatch, isLoading, error } = useSession();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
+  const attemptedSignUp = useRef(false);
 
   if (session) {
     return <Redirect href="/home" />;
   }
 
   const signUpWithEmail = async () => {
-    setLoading(true);
-    const { error } = await signUp(email, password);
+    dispatch({ type: 'SIGN_UP', email, password });
+    attemptedSignUp.current = true;
+  };
+
+  useEffect(() => {
+    if (!attemptedSignUp.current) return;
 
     if (error) Alert.alert(error.message);
     else router.replace('/auth/verify');
-
-    setLoading(false);
-  };
+  }, [error]);
 
   return (
     <View style={globalStyles.auth_container}>
@@ -55,7 +57,7 @@ function SignUpScreen() {
         <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
           <Button
             title="Sign Up"
-            disabled={loading}
+            disabled={isLoading}
             onPress={signUpWithEmail}
           />
         </View>

diff --git a/src/app/settings.tsx b/src/app/settings.tsx
@@ -11,7 +11,7 @@ import { useSession } from '../utils/AuthContext';
 import supabase from '../utils/supabase';
 
 function SettingsScreen() {
-  const { session, signOut } = useSession();
+  const { dispatch, user, session } = useSession();
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -23,12 +23,12 @@ function SettingsScreen() {
   const getProfile = async () => {
     try {
       setLoading(true);
-      if (!session?.user) throw new Error('No user on the session!');
+      if (!user) throw new Error('No user on the session!');
 
       const { data, error, status } = await supabase
         .from('profiles')
         .select(`first_name, last_name, birthday, gender, race_ethnicity`)
-        .eq('user_id', session?.user.id)
+        .eq('user_id', user?.id)
         .single();
 
       if (error && status !== 406 && error instanceof Error) {
@@ -164,7 +164,10 @@ function SettingsScreen() {
           onPress={updateProfile}
           disabled={loading}
         />
-        <Button title="Sign Out" onPress={signOut} />
+        <Button
+          title="Sign Out"
+          onPress={() => dispatch({ type: 'SIGN_OUT' })}
+        />
       </View>
     </SafeAreaView>
   );