navbar renders appropriately for now

client/src/components/pages/Login.tsx

@@ -7,23 +7,25 @@ import { Button, Page, Panel } from "../ui";
 import Form, { FormConfig } from "../ui/Form";
 
 export default function Login() {
+    // setup and local state
     const authContext = useAuthContext();
     const navigate = useNavigate();
-
     const [form, setForm] = useState<JSX.Element[]>();
     const [input, setInput] = useState<IUserAuth>({
         email: '',
         password: ''
     })
 
+    // retrieve and store state from form
     const getFormState = useCallback((received: IUserAuth) => {
         setInput(received);
     }, [])
 
+
     const handleLogin = async () => {
         if (!input.email || !input.password) return;
         const result = await attemptLogin(input);
-        authContext.user = result;
+        authContext.user = result.user;
         navigate('/');
     }
 
@@ -37,7 +39,7 @@ export default function Login() {
     }
 
     useEffect(() => {
-        if (authContext) navigate('/');
+        if (authContext.user) navigate('/');
         setForm(new Form<IUserAuth>(formConfig).mount())
     }, [])
 

client/src/components/pages/Register/register.aboutyou.tsx

@@ -1,12 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { v4 } from "uuid";
 import { IUser } from "../../../schemas";
-import { attemptRegister } from "../../../util/apiUtils";
+import { attemptLogin, attemptRegister } from "../../../util/apiUtils";
 import { Button, Page, Panel } from "../../ui";
 import Divider from "../../ui/Divider";
 import Form, { FormConfig } from "../../ui/Form";
 
 export default function AboutYou() {
+    const navigate = useNavigate();
     const [form, setForm] = useState<JSX.Element[]>([<p key={v4()}>Loading content...</p>]);
     const [input, setInput] = useState<IUser>({
         firstname: '',
@@ -35,14 +37,8 @@ export default function AboutYou() {
     }, [])
 
     const handleRegister = async () => {
-        for (let key of Object.keys(input)) {
-            if (!input[key as keyof IUser]) return;
-        }
-
-        console.log(input);
-
         const result = await attemptRegister(input);
-        console.log(result);
+        await attemptLogin({ email: result.email, password: result.password }).then(() => navigate('/'));
     }
 
     return (

client/src/components/pages/Welcome.tsx

@@ -51,7 +51,7 @@ const Welcome = () => {
 
             <Divider />
 
-            { authContext.user ? authUserActions : callToRegister }
+            { authContext && authContext.user ? authUserActions : callToRegister }
         </Page>
     )
 }

client/src/components/ui/Navbar/index.tsx

@@ -1,26 +1,35 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { AuthContext, useAuthContext } from "../../context/AuthContext";
-import { IUser } from "../../schemas";
-import { attemptLogout } from "../../util/apiUtils";
-import Button from "./Button";
+import { useAuthContext } from "../../../context/AuthContext";
+import { attemptLogout } from "../../../util/apiUtils";
+import { IUser } from "../../../schemas";
+import Button from "../Button";
 import "/src/sass/components/Navbar.scss";
 
 const Navbar = () => {
-    const { user } = useAuthContext();
+    // setup and local state
     const navigate = useNavigate();
+    const authContext = useAuthContext();
+    const [received, setReceived] = useState<IUser>();
+    const [displayed, setDisplayed] = useState<JSX.Element>();
 
+    // helper to unwrap async result
+    const handleLogout = async () => {
+        const success = await attemptLogout();
+        if (success) setReceived(undefined);
+    }
+
+    // jsx variations
     const navbarLoggedIn = (
         <div id="navbar">
             <div className="navbar-block">
                 <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {user?.firstname}</p>
+                <p>Hi, {received?.firstname}.</p>
                 <span id="search-icon"></span>
-                <Button onClick={() => console.log(user)}>Auth Context?</Button>
                 <Button onClick={() => navigate('/profile')}>Profile</Button>
-                <Button onClick={attemptLogout}>Log Out</Button>
+                <Button onClick={handleLogout}>Log Out</Button>
             </div>
         </div>
     )
@@ -42,12 +51,23 @@ const Navbar = () => {
                 <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {user?.firstname}</p>
+                <p>Hi, {received?.firstname}.</p>
             </div>
         </div>
     )
 
-    return user ? navbarLoggedIn : navbarNotLoggedIn;
+    // side effects for live rendering
+    useEffect(() => {
+        console.log(authContext);
+        authContext && setReceived(authContext.user);
+    }, [authContext])
+
+    useEffect(() => {
+        console.log(received);
+        setDisplayed(received ? navbarLoggedIn : navbarNotLoggedIn);
+    }, [received, setReceived]);
+
+    return displayed || <p>Loading...</p>;
 }
 
 export default Navbar;

client/src/util/apiUtils.tsx

@@ -1,4 +1,5 @@
 import { IUser, IUserAuth } from "../schemas";
+import { IAuthContext } from "../context/AuthContext";
 import axios from "axios";
 const API = import.meta.env.APISTRING || "http://localhost:8080";
 
@@ -10,7 +11,7 @@ export const getBaseAPI = async () => {
 }
 
 // auth handlers
-export const attemptLogin = async (data: IUserAuth) => {
+export const attemptLogin = async (data: IUserAuth): Promise<IAuthContext> => {
     try {
         const response = await axios({
             method: "POST",
@@ -18,7 +19,8 @@ export const attemptLogin = async (data: IUserAuth) => {
             data: data
         });
 
-        return Promise.resolve(response.data);
+        const result: Promise<IAuthContext> = Promise.resolve(response.data);
+        return result;
     } catch (e: any) {
         throw e;
     }
@@ -43,6 +45,8 @@ export const attemptLogout = async () => {
             method: "DELETE",
             url: API + '/auth/logout',
         })
+
+        return true;
     } catch (e: any) {
         throw e;
     }