housekeeping, better code

app/contexts/Authentication/Authentication.tsx

@@ -1,6 +1,7 @@
 import {
   createContext,
-  useEffect, 
+  useEffect,
+  useCallback,
   useState, 
   ReactNode,
   Dispatch,
@@ -11,44 +12,79 @@ import { useCookies } from 'react-cookie';
 import {
   SessionResponse,
   AuthState,
-  UserInfo
 } from "./types";
 
-import { GetSession } from "./utilities";
+import { CreateSession, DestroySession, GetSession } from "./utilities";
 
-export const AuthenticationContext = createContext<[
-  AuthState | undefined,
-  Dispatch<SetStateAction<AuthState | undefined>> | undefined
-]>([
-  undefined, undefined
-]);
+export const AuthenticationContext = createContext<{
+  authState?: AuthState,
+  setAuthState?: Dispatch<SetStateAction<AuthState | undefined>>,
+  persistLoginOrOut?: ()=>void,
+  loginAndGetUserInfo?: (usernameOrEmail: string, password:string)=>void;
+  logout?: ()=>void;
+}>({});
 
 export const AuthenticationProvider = ({children}:{children:ReactNode})=>{
   const [authCookies, setAuthCookie, removeAuthCookie] = useCookies(['userInfo']);
   const [authState, setAuthState] = useState<AuthState | undefined>(undefined);
 
-  useEffect(()=>{
-    console.log(authCookies);
-    console.log(authState);
-    if (authCookies !== undefined && authState===undefined){
-      GetSession().then((
-        res: SessionResponse
-      )=>{
-        if(res.success && res.user){ 
-          setAuthCookie('userInfo', res.user);
-          setAuthState({
-            isLoggedIn: true,
-            userInfo: res.user
-          });
-        }else{
-          removeAuthCookie('userInfo');
-        }
+  const persistLoginOrOut = useCallback(()=>{
+    GetSession().then((
+      res: SessionResponse
+    )=>{
+      if(res.success && res.user){ 
+        setAuthCookie('userInfo', res.user);
+        setAuthState({
+          isLoggedIn: true,
+          userInfo: res.user
+        });
+      }else{
+        removeAuthCookie('userInfo');
+      }
+    });
+  }, []);
+
+  const loginAndGetUserInfo = (usernameOrEmail: string, password:string)=>{
+    CreateSession({usernameOrEmail, password})
+      .then((respond)=>{
+        GetSession().then((
+          res: SessionResponse
+        )=>{
+          if(res.success && res.user && setAuthState){
+            setAuthCookie('userInfo', res.user);
+            setAuthState({
+              isLoggedIn: true,
+              userInfo: res.user
+            });
+          }
+        });
       });
+  }
+
+  const logout = ()=>{
+    DestroySession().then((res)=>{
+      if (res && setAuthState) {
+        setAuthState({
+          isLoggedIn: false,
+          userInfo: undefined
+        });
+      }
+    });
+  }
+  useEffect(()=>{
+    if (authCookies !== undefined && authState===undefined){
+      persistLoginOrOut();
     }
   },[]);
 
   return(
-    <AuthenticationContext.Provider value={[authState, setAuthState]}>
+    <AuthenticationContext.Provider value={{
+      authState,
+      setAuthState,
+      persistLoginOrOut,
+      loginAndGetUserInfo,
+      logout,
+    }}>
       {children}
     </AuthenticationContext.Provider>
   )

app/contexts/Authentication/utilities.tsx

@@ -59,7 +59,7 @@ export const GetSession = async () => {
     };
   });
 }
-export async function DestorySession() : Promise<boolean> {
+export async function DestroySession() : Promise<boolean> {
   return await fetch(logout, {
     method: 'POST',
     headers: {

app/modules/TopBar/AuthButtons.tsx

@@ -1,20 +1,12 @@
 import { useContext, } from "react";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
-import { DestorySession } from "~/contexts/Authentication/utilities";
 import { Button, ButtonLink } from "~/components";
 
 export const AuthButtons = ()=>{
-  const [authState, setAuthState] = useContext(AuthenticationContext);
+  const {authState, logout} = useContext(AuthenticationContext);
   const handleLogout = ()=>{
-    DestorySession().then((res)=>{
-      if (res && setAuthState) {
-        setAuthState({
-          isLoggedIn: false,
-          userInfo: undefined
-        });
-      }
-    });
+    if(logout)logout();
   }
   if ( authState && authState.isLoggedIn ) {
     return(

app/routes/Login.tsx

@@ -4,10 +4,6 @@ import { useCookies } from 'react-cookie';
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
-import { CreateSession, GetSession } from '~/contexts/Authentication/utilities'
-import {
-  SessionResponse,
-} from "~/contexts/Authentication/types";
 
 import {
   Button,
@@ -25,7 +21,7 @@ export default function LoginScreen() {
   const [showLoader, setShowLoader] = useState<string|undefined>(undefined);
   const formRef = useRef<HTMLFormElement | null>(null);
   const [authCookies, setAuthCookie, removeAuthCookie] = useCookies(['userInfo']);
-  const [authState, setAuthState] = useContext(AuthenticationContext);
+  const {authState, loginAndGetUserInfo} = useContext(AuthenticationContext);
 
 
   const handleOnSumbit = (ev: React.FormEvent<HTMLFormElement>)=>{
@@ -34,23 +30,9 @@ export default function LoginScreen() {
       const form = new FormData(formRef.current);
       const usernameOrEmail =  form.get("usernameOrEmail")?.toString();
       const password = form.get("password")?.toString();
-      if( usernameOrEmail && password){
+      if( usernameOrEmail && password && loginAndGetUserInfo){
         setShowLoader("Authenticating");
-        CreateSession({usernameOrEmail, password})
-        .then((respond)=>{
-          setShowLoader("Retreiving User Information");
-          GetSession().then((
-            res: SessionResponse
-          )=>{
-            if(res.success && res.user && setAuthState){
-              setAuthCookie('userInfo', res.user);
-              setAuthState({
-                isLoggedIn: true,
-                userInfo: res.user
-              });
-            }
-          });
-        });
+        loginAndGetUserInfo(usernameOrEmail, password);
       }
     }
   }// end handleOnSubmit