From ca28bb4bfb9b33ee875fba6c881a3076144ab3b1 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <aditya.pawar@warriorlife.net>
Date: Sun, 19 Nov 2023 15:43:13 -0800
Subject: [PATCH] Create auth.tsx to use dispatch to control state

---
 src/app/auth/forgotPassword.tsx |  28 ++++---
 src/app/auth/login.tsx          |  27 +++----
 src/app/auth/signup.tsx         |  15 ++--
 src/app/auth/verify.tsx         |  20 ++---
 src/queries/auth.tsx            |  90 ++++++++++++++++++++++
 src/utils/AuthContext.tsx       | 128 +++-----------------------------
 6 files changed, 132 insertions(+), 176 deletions(-)
 create mode 100644 src/queries/auth.tsx

diff --git a/src/app/auth/forgotPassword.tsx b/src/app/auth/forgotPassword.tsx
index 9d67d625..8737828b 100644
--- 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
index 509945ec..841c767d 100644
--- 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
index d5ca5582..c542521d 100644
--- 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
index 89cb3181..b7068f1f 100644
--- 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,15 +22,11 @@ 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);
@@ -40,8 +34,6 @@ function VerificationScreen() {
     } 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
new file mode 100644
index 00000000..8273b63d
--- /dev/null
+++ 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;
+};
diff --git a/src/utils/AuthContext.tsx b/src/utils/AuthContext.tsx
index f820547e..c9544b6a 100644
--- a/src/utils/AuthContext.tsx
+++ b/src/utils/AuthContext.tsx
@@ -17,37 +17,14 @@ import supabase from './supabase';
 type AuthContextAction =
   | { type: 'LOADING' }
   | { type: 'CLEAR_ERROR' }
-  | {
-      type: 'SIGN_UP';
-      email: string;
-      password: string;
-      error?: AuthError | null;
-    }
-  | {
-      type: 'SIGN_IN_WITH_EMAIL';
-      email: string;
-      password: string;
-      error?: AuthError | null;
-    }
-  | {
-      type: 'VERIFY_OTP';
-      email: string;
-      token: string;
-      error?: AuthError | null;
-    }
-  | { type: 'RESEND_VERIFICATION'; email: string; error?: AuthError | null }
-  | { type: 'RESET_PASSWORD'; email: string; error?: AuthError | null }
-  | {
-      type: 'REFRESH_SESSION';
-      session: Session | null;
-      error?: AuthError | null;
-    }
-  | {
-      type: 'UPDATE_USER';
-      attributes: UserAttributes;
-      error?: AuthError | null;
-    }
-  | { type: 'SIGN_OUT'; error?: AuthError | null };
+  | { type: 'SIGN_UP' }
+  | { type: 'SIGN_IN_WITH_EMAIL' }
+  | { type: 'VERIFY_OTP' }
+  | { type: 'RESEND_VERIFICATION' }
+  | { type: 'RESET_PASSWORD' }
+  | { type: 'REFRESH_SESSION'; session: Session | null }
+  | { type: 'UPDATE_USER'; user: User | null }
+  | { type: 'SIGN_OUT' };
 
 export type AuthDispatch = React.Dispatch<AuthContextAction>;
 
@@ -55,7 +32,6 @@ export interface AuthState {
   session: Session | null;
   user: User | null;
   isLoading: boolean;
-  error: Error | null;
   dispatch: AuthDispatch;
 }
 
@@ -74,7 +50,6 @@ export const useAuthReducer = () =>
           return {
             ...prevState,
             isLoading: false,
-            error: action.error ?? null,
           };
         case 'SIGN_OUT':
           return {
@@ -82,7 +57,6 @@ export const useAuthReducer = () =>
             user: null,
             session: null,
             isLoading: false,
-            error: action.error ?? null,
           };
         case 'REFRESH_SESSION':
           return {
@@ -90,7 +64,6 @@ export const useAuthReducer = () =>
             session: action.session,
             user: action.session ? action.session?.user : null,
             isLoading: false,
-            error: action.error ?? null,
           };
         case 'LOADING':
           console.log('loading');
@@ -105,7 +78,6 @@ export const useAuthReducer = () =>
       session: null,
       isLoading: false,
       user: null,
-      error: null,
       dispatch: () => null,
     },
   );
@@ -144,92 +116,10 @@ export function AuthContextProvider({
     });
   }, []);
 
-  function dispatchMiddleware(dispatch: AuthDispatch) {
-    return (action: AuthContextAction) => {
-      dispatch({ type: 'LOADING' });
-      switch (action.type) {
-        case 'SIGN_UP':
-          signUp(action.email, action.password).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'SIGN_IN_WITH_EMAIL':
-          signInWithEmail(action.email, action.password).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'VERIFY_OTP':
-          verifyOtp(action.email, action.token).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'RESEND_VERIFICATION':
-          resendVerification(action.email).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'RESET_PASSWORD':
-          resetPassword(action.email).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'UPDATE_USER':
-          updateUser(action.attributes).then(({ error }) =>
-            dispatch({ ...action, error }),
-          );
-          break;
-        case 'SIGN_OUT':
-          signOut().then(({ error }) => dispatch({ ...action, error }));
-          break;
-        case 'REFRESH_SESSION':
-        case 'CLEAR_ERROR':
-        default:
-          return dispatch(action);
-      }
-    };
-  }
-
-  const signInWithEmail = async (email: string, password: string) =>
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
-
-  const signUp = async (email: string, password: string) => {
-    const value = await supabase.auth.signUp({
-      email,
-      password,
-    });
-    console.log(value);
-
-    return value;
-  };
-
-  const signOut = async () => await supabase.auth.signOut();
-
-  const verifyOtp = async (email: string, token: string) =>
-    await supabase.auth.verifyOtp({
-      email,
-      token,
-      type: 'email',
-    });
-
-  const resendVerification = async (email: string) =>
-    await supabase.auth.resend({
-      type: 'signup',
-      email,
-    });
-
-  const resetPassword = async (email: string) =>
-    await supabase.auth.resetPasswordForEmail(email);
-
-  const updateUser = async (attributes: UserAttributes) =>
-    await supabase.auth.updateUser(attributes);
-
   const authContextValue = useMemo(
     () => ({
       ...authState,
-      dispatch: dispatchMiddleware(dispatch),
+      dispatch,
     }),
     [authState],
   );