refactor: create more sustainable solution for understanding a user's…

… login status (null, true, false)
LetsGetTechnical · Nov 7, 2024 · 62d396b · 62d396b
1 parent 4e72c42
commit 62d396b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/app/(main)/login/page.tsx b/app/(main)/login/page.tsx
@@ -52,24 +52,15 @@ type LoginUserSchemaType = z.infer<typeof LoginUserSchema>;
  */
 const Login = (): React.JSX.Element => {
   const router = useRouter();
-  const { login, getUser } = useAuthContext();
+  const { login, isSignedIn } = useAuthContext();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [checkAuth, setCheckAuth] = useState<boolean>(true);
 
   useEffect(() => {
-    async function checkSignedIn() {
-      const userSignedIn = await getUser();
-      if (userSignedIn) {
-        router.push('/league/all');
-      }
-      else {
-        setCheckAuth(false);
-      }
+    if (isSignedIn === true) {
+      router.push('league/all');
     }
-
-    checkSignedIn();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isSignedIn]);
 
   const form = useForm<LoginUserSchemaType>({
     resolver: zodResolver(LoginUserSchema),
@@ -106,9 +97,11 @@ const Login = (): React.JSX.Element => {
   };
 
   return (
-    <section className={`grid xl:${checkAuth ? '' : 'grid-cols-2'} xl:grid-rows-none`}>
-      {checkAuth ? (
-        <GlobalSpinner data-testid="global-spinner" />) : (
+    <section className={`grid xl:${isSignedIn === null ? '' : 'grid-cols-2'} xl:grid-rows-none`}>
+      {isSignedIn === null || isSignedIn === true &&
+        <GlobalSpinner data-testid="global-spinner" />
+      }
+      {isSignedIn === false &&
       <>
         <div className="row-span-1 grid w-full place-items-center from-[#4E160E] to-zinc-950 bg-gradient-to-b xl:h-screen xl:bg-gradient-to-b">
           <Logo className="mx-auto w-52 xl:w-64 xl:place-self-end" src={logo} />
@@ -202,7 +195,7 @@ const Login = (): React.JSX.Element => {
           </Form>
         </div>
       </>
-        )}
+    }
     </section>
   );
 };

diff --git a/context/AuthContextProvider.tsx b/context/AuthContextProvider.tsx
@@ -23,7 +23,7 @@ type AuthContextType = {
   getUser: () => Promise<IUser | undefined>;
   login: (user: UserCredentials) => Promise<void | Error>; // eslint-disable-line no-unused-vars
   logoutAccount: () => Promise<void | Error>;
-  isSignedIn: boolean;
+  isSignedIn: boolean | null;
 };
 
 export const AuthContext = createContext<AuthContextType | null>(null);
@@ -39,7 +39,7 @@ export const AuthContextProvider = ({
 }: {
   children: React.ReactNode;
 }): JSX.Element => {
-  const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
+  const [isSignedIn, setIsSignedIn] = useState<boolean | null>(null);
   const { updateUser, resetUser, user } = useDataStore<DataStore>(
     (state) => state,
   );
@@ -86,6 +86,7 @@ export const AuthContextProvider = ({
    */
   const getUser = async (): Promise<IUser | undefined> => {
     if (!isSessionInLocalStorage()) {
+      setIsSignedIn(false);
       if (isAuthRequiredPath(pathname)) {
         router.push('/login');
       }

diff --git a/context/AuthHelper.interface.ts b/context/AuthHelper.interface.ts
@@ -7,5 +7,5 @@ import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.share
 export interface ILogoutType {
   resetUser: React.Dispatch<React.SetStateAction<void>>;
   router: AppRouterInstance;
-  setIsSignedIn: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSignedIn: React.Dispatch<React.SetStateAction<boolean | null>>;
 }