From 2c4f868cb1f59334a145a9830eebe828f7eae046 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 2 Apr 2024 21:30:39 -0400
Subject: [PATCH] housekeeping, better code

---
 .../Authentication/Authentication.tsx         | 88 +++++++++++++------
 app/contexts/Authentication/utilities.tsx     |  2 +-
 app/modules/TopBar/AuthButtons.tsx            | 12 +--
 app/routes/Login.tsx                          | 24 +----
 4 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/app/contexts/Authentication/Authentication.tsx b/app/contexts/Authentication/Authentication.tsx
index 06194e8284..b2851e232e 100644
--- a/app/contexts/Authentication/Authentication.tsx
+++ b/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>
   )
diff --git a/app/contexts/Authentication/utilities.tsx b/app/contexts/Authentication/utilities.tsx
index 6d71af7b6b..ccd7915e30 100644
--- a/app/contexts/Authentication/utilities.tsx
+++ b/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: {
diff --git a/app/modules/TopBar/AuthButtons.tsx b/app/modules/TopBar/AuthButtons.tsx
index 2321997947..972cc9e2df 100644
--- a/app/modules/TopBar/AuthButtons.tsx
+++ b/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(
diff --git a/app/routes/Login.tsx b/app/routes/Login.tsx
index 5f5c536a19..28a0d81f31 100644
--- a/app/routes/Login.tsx
+++ b/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