Create auth.tsx to use dispatch to control state

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

Hide file tree

Showing 6 changed files with 132 additions and 176 deletions.
diff --git a/src/app/auth/forgotPassword.tsx b/src/app/auth/forgotPassword.tsx
@@ -5,17 +5,22 @@ import { Button, Input } from 'react-native-elements';
 
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
+import {
+  resetPassword,
+  signOut,
+  updateUser,
+  verifyOtp,
+} from '../../queries/auth';
 
 function ForgotPasswordScreen() {
   const { dispatch, isLoading } = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
   const [verificationCode, setCode] = useState<string>('');
   const [changingPassword, setChangingPassword] = useState(false);
 
   const sendResetEmail = async () => {
-    const { error } = await resetPassword(email);
+    const { error } = await resetPassword(dispatch, email);
     if (error)
       Alert.alert('Could not send a reset password email. Please try again.');
     else
@@ -24,10 +29,8 @@ function ForgotPasswordScreen() {
       );
   };
   const verifyCode = async () => {
-    setLoading(true);
-
     if (email && verificationCode) {
-      const { error } = await verifyOtp(email, verificationCode);
+      const { error } = await verifyOtp(dispatch, email, verificationCode);
 
       if (error) {
         Alert.alert(error.message);
@@ -40,23 +43,18 @@ function ForgotPasswordScreen() {
     } else {
       Alert.alert(`Please sign up again.`);
     }
-
-    setLoading(false);
   };
 
   const changePassword = async () => {
-    setLoading(true);
-    const { error } = await updateUser({ password });
+    const { error } = await updateUser(dispatch, { password });
 
     if (error) {
       console.error(error);
       Alert.alert('Updating password failed');
     } else {
-      await signOut();
+      await signOut(dispatch);
       router.replace('/auth/login');
     }
-
-    setLoading(false);
   };
 
   return (
@@ -72,7 +70,7 @@ function ForgotPasswordScreen() {
         />
       </View>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
-        <Button title="Send" disabled={loading} onPress={sendResetEmail} />
+        <Button title="Send" disabled={isLoading} onPress={sendResetEmail} />
       </View>
 
       <TextInput
@@ -85,7 +83,7 @@ function ForgotPasswordScreen() {
       />
 
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
-        <Button title="Verify" disabled={loading} onPress={verifyCode} />
+        <Button title="Verify" disabled={isLoading} onPress={verifyCode} />
       </View>
 
       {changingPassword && (
@@ -105,7 +103,7 @@ function ForgotPasswordScreen() {
           <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
             <Button
               title="Change Password"
-              disabled={loading}
+              disabled={isLoading}
               onPress={changePassword}
             />
           </View>

diff --git a/src/app/auth/login.tsx b/src/app/auth/login.tsx
@@ -1,13 +1,14 @@
 import { Link, router } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { 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';
+import { signInWithEmail } from '../../queries/auth';
 
 function LoginScreen() {
-  const { dispatch, isLoading, session, error } = useSession();
+  const { dispatch, isLoading } = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -18,22 +19,12 @@ function LoginScreen() {
     router.replace(path);
   };
 
-  const signInWithEmail = async () => {
-    dispatch({ type: 'SIGN_IN_WITH_EMAIL', email, password });
-  };
-
-  useEffect(() => {
-    if (error) {
-      Alert.alert(error.message);
-    }
-  }, [error]);
+  const signIn = async () => {
+    const { error } = await signInWithEmail(dispatch, email, password);
 
-  useEffect(() => {
-    console.log(session);
-    if (session) {
-      resetAndPushToRouter('/home');
-    }
-  }, [session]);
+    if (error) Alert.alert(error.message);
+    else resetAndPushToRouter('/home');
+  };
 
   return (
     <View style={globalStyles.auth_container}>
@@ -60,7 +51,7 @@ function LoginScreen() {
       </View>
       <Link href="/auth/forgotPassword">Forgot password?</Link>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
-        <Button title="Log In" disabled={isLoading} onPress={signInWithEmail} />
+        <Button title="Log In" disabled={isLoading} onPress={signIn} />
       </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,33 +1,28 @@
 import { Redirect, Link, router } from 'expo-router';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { 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';
+import { signUp } from '../../queries/auth';
 
 function SignUpScreen() {
-  const { session, dispatch, isLoading, error } = useSession();
+  const { session, isLoading, dispatch } = useSession();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const attemptedSignUp = useRef(false);
 
   if (session) {
     return <Redirect href="/home" />;
   }
 
   const signUpWithEmail = async () => {
-    dispatch({ type: 'SIGN_UP', email, password });
-    attemptedSignUp.current = true;
-  };
-
-  useEffect(() => {
-    if (!attemptedSignUp.current) return;
+    const { error } = await signUp(dispatch, email, password);
 
     if (error) Alert.alert(error.message);
     else router.replace('/auth/verify');
-  }, [error]);
+  };
 
   return (
     <View style={globalStyles.auth_container}>

diff --git a/src/app/auth/verify.tsx b/src/app/auth/verify.tsx
@@ -5,17 +5,15 @@ import { Button } from 'react-native-elements';
 
 import globalStyles from '../../styles/globalStyles';
 import { useSession } from '../../utils/AuthContext';
+import { resendVerification, verifyOtp } from '../../queries/auth';
 
 function VerificationScreen() {
-  const { user, verifyOtp, resendVerification } = useSession();
-  const [loading, setLoading] = useState(false);
+  const { user, dispatch, isLoading } = useSession();
   const [verificationCode, setCode] = useState<string>('');
 
   const verifyAccount = async () => {
-    setLoading(true);
-
     if (user?.email && verificationCode) {
-      const { error } = await verifyOtp(user.email, verificationCode);
+      const { error } = await verifyOtp(dispatch, user.email, verificationCode);
 
       if (error) Alert.alert(error.message);
       else router.replace('/auth/onboarding');
@@ -24,24 +22,18 @@ function VerificationScreen() {
     } else {
       Alert.alert(`Please sign up again.`);
     }
-
-    setLoading(false);
   };
 
   const resendCode = async () => {
-    setLoading(true);
-
     if (user?.email) {
-      const { error, data } = await resendVerification(user.email);
+      const { error, data } = await resendVerification(dispatch, user.email);
 
       console.log(data);
       if (error) Alert.alert(error.message);
       else Alert.alert(`Verification email sent to ${user.email}.`);
     } else {
       Alert.alert(`Please sign up again.`);
     }
-
-    setLoading(false);
   };
 
   return (
@@ -57,12 +49,12 @@ function VerificationScreen() {
 
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]} />
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
-        <Button title="Resend code" disabled={loading} onPress={resendCode} />
+        <Button title="Resend code" disabled={isLoading} onPress={resendCode} />
       </View>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
         <Button
           title="Verify Account"
-          disabled={loading}
+          disabled={isLoading}
           onPress={verifyAccount}
         />
       </View>

diff --git a/src/queries/auth.tsx b/src/queries/auth.tsx
@@ -0,0 +1,90 @@
+import { UserAttributes } from '@supabase/supabase-js';
+import supabase from '../utils/supabase';
+import { AuthDispatch, useAuthReducer } from '../utils/AuthContext';
+
+export const signInWithEmail = async (
+  dispatch: AuthDispatch,
+  email: string,
+  password: string,
+) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  dispatch({ type: 'SIGN_IN_WITH_EMAIL' });
+  return value;
+};
+
+export const signUp = async (
+  dispatch: AuthDispatch,
+  email: string,
+  password: string,
+) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.signUp({
+    email,
+    password,
+  });
+  dispatch({ type: 'SIGN_UP' });
+
+  return value;
+};
+
+export const signOut = async (dispatch: AuthDispatch) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.signOut();
+  dispatch({ type: 'SIGN_OUT' });
+
+  return value;
+};
+
+export const verifyOtp = async (
+  dispatch: AuthDispatch,
+  email: string,
+  token: string,
+) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.verifyOtp({
+    email,
+    token,
+    type: 'email',
+  });
+  dispatch({ type: 'VERIFY_OTP' });
+
+  return value;
+};
+
+export const resendVerification = async (
+  dispatch: AuthDispatch,
+  email: string,
+) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.resend({
+    type: 'signup',
+    email,
+  });
+  dispatch({ type: 'VERIFY_OTP' });
+
+  return value;
+};
+
+export const resetPassword = async (dispatch: AuthDispatch, email: string) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.resetPasswordForEmail(email);
+  dispatch({ type: 'RESET_PASSWORD' });
+
+  return value;
+};
+
+export const updateUser = async (
+  dispatch: AuthDispatch,
+  attributes: UserAttributes,
+) => {
+  dispatch({ type: 'LOADING' });
+  const value = await supabase.auth.updateUser(attributes);
+  dispatch({ type: 'UPDATE_USER', user: value.data?.user });
+
+  return value;
+};