refactor: Remove loading state from TContextAuth and use local state in sign-in and sign-up views

Author: staszekz

src/App.tsx

@@ -4,7 +4,7 @@ import '@mantine/dates/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ModalsProvider } from '@mantine/modals';
 import { AuthProvider } from './context/auth-context';
-import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { RouterProvider, createRouter, useRouter } from '@tanstack/react-router';
 import './index.css';
 import { LoadingOverlay } from '@mantine/core';
 
@@ -34,15 +34,6 @@ const customTheme = createTheme(theme);
 
 function AppWithRouter() {
   const auth = useAuthContext();
-  if (auth.loading) {
-    return (
-      <LoadingOverlay
-        loaderProps={{ type: 'dots', color: 'var(--primary)', size: 'xl' }}
-        overlayProps={{ color: 'var(--dark-bg-color)' }}
-        visible
-      />
-    );
-  }
   return <RouterProvider router={router} context={{ auth }} />;
 }
 

src/context/auth-context.tsx

@@ -16,26 +16,30 @@ import {
 import { collection, doc, setDoc } from 'firebase/firestore';
 import { database } from '@notes/database';
 import { CollectionType } from '@notes/types';
+import { FirebaseError } from 'firebase/app';
+import { useRouter } from '@tanstack/react-router';
 
 export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState<User | null>(getAuth().currentUser);
   const [rememberMe, setRememberMe] = useState(false);
-  const [loading, setLoading] = useState(true);
+  // const router = useRouter();
 
-  function setLoadingState(loading: boolean) {
-    setLoading(loading);
-  }
   async function signIn(email: string, password: string) {
     try {
       if (!rememberMe) {
         await setPersistence(auth, inMemoryPersistence);
       }
 
-      return signInWithEmailAndPassword(auth, email, password);
+      const userCredential = await signInWithEmailAndPassword(auth, email, password);
+
+      setUser(userCredential.user);
+      return userCredential;
     } catch (error) {
-      if (error instanceof Error) {
+      if (error instanceof FirebaseError) {
+        throw new Error(error.code);
+      } else if (error instanceof Error) {
         throw new Error(error.message);
       } else {
         throw new Error('An unknown error occurred');
@@ -44,14 +48,22 @@ export function AuthProvider({ children }) {
   }
 
   async function signUp(email: string, password: string, displayName: string) {
-    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
-    // dodac jak mail juz jest uzywany
-    await setDoc(doc(collection(database, CollectionType.USERS), userCredential.user.uid), {});
-    await sendEmailVerification(userCredential.user);
-    await updateProfile(userCredential.user, {
-      displayName
-    });
-    return userCredential;
+    try {
+      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+
+      await setDoc(doc(collection(database, CollectionType.USERS), userCredential.user.uid), {});
+      await sendEmailVerification(userCredential.user);
+      await updateProfile(userCredential.user, {
+        displayName
+      });
+      return userCredential;
+    } catch (err) {
+      if (err instanceof FirebaseError) {
+        throw new Error(err.code);
+      } else {
+        throw new Error(String(err));
+      }
+    }
   }
 
   // sendPasswordResetEmail(auth, email)
@@ -68,22 +80,25 @@ export function AuthProvider({ children }) {
     return signOut(auth);
   }
   // add modal to display errors => maybe a global modal to be reused for every errors
-
   useEffect(() => {
-    setLoading(true);
     const unsubscribe = auth.onAuthStateChanged(user => {
       if (user) {
         setUser(user);
-        setLoading(false);
+        // router.invalidate(); // this is outside the router,
       } else {
         setUser(null);
-        setLoading(false);
       }
     });
     return unsubscribe;
   }, []);
 
-  const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState, setRememberMe };
+  const value: TContextAuth = {
+    user,
+    signIn,
+    signUp,
+    signUserOut,
+    setRememberMe
+  };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

src/types/contexts.ts

@@ -4,8 +4,6 @@ export type TContextAuth = {
   user: User | null;
   signIn: (email: string, password: string) => Promise<UserCredential>;
   signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
-  loading: boolean;
-  setLoadingState: (loading: boolean) => void;
   signUserOut: () => Promise<void>;
   setRememberMe: React.Dispatch<React.SetStateAction<boolean>>
 };

src/views/auth/sign-in.tsx

@@ -4,9 +4,10 @@ import { Button, Checkbox, Flex, TextInput, Title, Text } from '@mantine/core';
 import { z } from 'zod';
 import { IconLogin, IconLogin2 } from '@tabler/icons-react';
 import { useAuthContext } from 'src/hooks/use-auth-context';
-import { Link, useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { RoutesDef } from '@notes/utils';
 import classes from './style.module.css';
+import { useState } from 'react';
 
 type SignInValues = {
   email: string;
@@ -17,7 +18,9 @@ export const SignIn = () => {
     email: '',
     password: ''
   };
-  const { signIn, setLoadingState, setRememberMe } = useAuthContext();
+  const { signIn, setRememberMe } = useAuthContext();
+  const [loading, setLoading] = useState(false);
+
   const navigate = useNavigate();
 
   const { Field, Subscribe, handleSubmit, state } = useForm({
@@ -27,14 +30,18 @@ export const SignIn = () => {
       handleOnSubmit(state.values);
     }
   });
-
+  const router = useRouter();
   const handleOnSubmit = async (state: SignInValues) => {
-    setLoadingState(true);
+    setLoading(true);
     try {
       await signIn(state.email, state.password);
-      setLoadingState(false);
-      navigate({ to: RoutesDef.HOME });
+      console.log('🚀 ~ router:', router);
+
+      // router.invalidate();
+      setLoading(false);
+      navigate({ to: RoutesDef.HOME, invalidate: true });
     } catch (err) {
+      setLoading(false);
       alert((err as Error).message);
     }
   };
@@ -116,8 +123,9 @@ export const SignIn = () => {
                   right={0}
                   type="submit"
                   variant="notes-transparent-border"
-                  loading={isSubmitting}
+                  loading={isSubmitting || loading}
                   disabled={!canSubmit}
+                  loaderProps={{ color: 'var(--white)', size: 20 }}
                 >
                   <IconLogin2 stroke={1.5} />
                 </Button>

src/views/auth/sign-up.tsx

@@ -7,6 +7,7 @@ import classes from './style.module.css';
 import { useAuthContext } from '@notes/hooks';
 import { RoutesDef } from '@notes/utils';
 import { Link, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 
 export const SignUp = () => {
   const initialState = {
@@ -25,15 +26,21 @@ export const SignUp = () => {
     }
   });
   const navigate = useNavigate();
-  const { signUp, setLoadingState } = useAuthContext();
+  const { signUp } = useAuthContext();
+  const [emailError, setEmailError] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const handleOnSubmit = async () => {
-    setLoadingState(true);
+    setLoading(true);
     try {
       await signUp(state.values.email, state.values.password, state.values.name);
       navigate({ to: RoutesDef.VERIFY_EMAIL });
-      setLoadingState(false);
+      setLoading(false);
     } catch (error) {
+      if ((error as Error).message === 'auth/email-already-in-use') {
+        setEmailError('E-mail already in use');
+      }
+      setLoading(false);
       throw new Error((error as Error).message);
     }
   };
@@ -54,8 +61,8 @@ export const SignUp = () => {
         <Field
           name="name"
           validators={{
-             onSubmit: z.string().trim().min(1, "Field is required"),
-            onBlur: z.string().trim().min(1, "Field is required")
+            onSubmit: z.string().trim().min(1, 'Field is required'),
+            onBlur: z.string().trim().min(1, 'Field is required')
           }}
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -79,6 +86,13 @@ export const SignUp = () => {
           validators={{
             onSubmit: z.string().email('Invalid e-mail').trim(),
             onBlur: z.string().email('Invalid e-mail')
+            // onBlurAsync: async ({ value }) => {
+            //   console.log('auth:', auth);
+            //   await auth.getUserByEmail(value).then(data => {
+            //     console.log(data);
+            //     return 'sadgdfsg';
+            //   });
+            // }
           }}
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -92,7 +106,7 @@ export const SignUp = () => {
                 withAsterisk
                 label="E-mail"
                 placeholder="Enter e-mail address"
-                error={state.meta?.errors[0]}
+                error={state.meta?.errors[0] || emailError}
               />
             );
           }}
@@ -154,12 +168,13 @@ export const SignUp = () => {
             return (
               <Flex justify={'flex-end'}>
                 <Button
-                  loading={isSubmitting}
+                  loading={isSubmitting || loading}
                   variant="notes-transparent-border"
                   size="medium"
                   right={0}
                   type="submit"
                   disabled={!canSubmit}
+                  loaderProps={{ color: 'var(--white)', size: 20 }}
                 >
                   <IconLogin2 stroke={1.5} />
                 </Button>