troubleshooting login/logout

client/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Browser from './components/pages/Browser';
 import Collection from './components/pages/Collection';
@@ -6,9 +7,15 @@ import Profile from './components/pages/Profile';
 import Recipe from './components/pages/Recipe';
 import Register from './components/pages/Register';
 import Welcome from './components/pages/Welcome';
+import { useAuthContext } from './context/AuthContext';
 import './sass/App.scss'
 
 function App() {
+  const authContext = useAuthContext();
+
+  useEffect(() => {
+    console.log(fetch("http://localhost:8080/auth").then(res => res.json()).then(x => console.log(x)));
+  })
 
   return (
     <BrowserRouter>

client/src/components/pages/Login.tsx

@@ -1,10 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthContext } from "../../context/AuthContext";
 import { IUserAuth } from "../../schemas";
 import { attemptLogin } from "../../util/apiUtils";
 import { Button, Page, Panel } from "../ui";
 import Form, { FormConfig } from "../ui/Form";
 
 export default function Login() {
+    const authContext = useAuthContext();
+    const navigate = useNavigate();
+
     const [form, setForm] = useState<JSX.Element[]>();
     const [input, setInput] = useState<IUserAuth>({
         email: '',
@@ -18,7 +23,8 @@ export default function Login() {
     const handleLogin = async () => {
         if (!input.email || !input.password) return;
         const result = await attemptLogin(input);
-        console.log(result);
+        authContext.user = result;
+        navigate('/');
     }
 
     const formConfig: FormConfig<IUserAuth> = {

client/src/components/pages/Welcome.tsx

@@ -1,17 +1,18 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useAuthContext } from "../../context/AuthContext";
 import { Button, Page, Panel } from "../ui"
 import Divider from "../ui/Divider";
 
 const Welcome = () => {
-    const [authorized, setAuthorized] = useState(false);
+    const authContext = useAuthContext();
     const navigate = useNavigate();
 
     const authUserActions = (
-        <Panel extraStyles="inherit-background c-papyrus uppercase">
-            <Button>Browse Recipes</Button>
-            <Button>Collections</Button>
-            <Button>Grocery List</Button>
+        <Panel extraStyles="inherit-background c-papyrus uppercase flexrow">
+            <Button onClick={() => navigate('/explore')}>Browse Recipes</Button>
+            <Button onClick={() => navigate('/subscriptions')}>Subscriptions</Button>
+            <Button onClick={() => navigate('/grocery-lists')}>Grocery Lists</Button>
         </Panel>
     )
 
@@ -42,7 +43,7 @@ const Welcome = () => {
 
             <Divider />
 
-            { authorized ? authUserActions : callToRegister }
+            { authContext.user ? authUserActions : callToRegister }
         </Page>
     )
 }

client/src/components/ui/Navbar.tsx

@@ -1,22 +1,24 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthContext } from "../../context/AuthContext";
+import { attemptLogout } from "../../util/apiUtils";
+import Button from "./Button";
 import "/src/sass/components/Navbar.scss";
 
 const Navbar = () => {
-    // state will be evaluated here to determine which navbar
-    // variant will be displayed
-
-    // this will come from state (session?)
+    const authContext = useAuthContext();
+    const navigate = useNavigate();
     const [user, setUser] = useState('Mikayla');
 
     const navbarLoggedIn = (
         <div id="navbar">
             <div className="navbar-block">
-                <a href="/">RECIPIN</a>
+                <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {user}</p>
+                <p>Hi, {authContext.user?.firstname}</p>
                 <span id="search-icon"></span>
-                <button onClick={() => console.log('menu button')}>...</button>
+                <Button onClick={attemptLogout}>Log Out</Button>
             </div>
         </div>
     )
@@ -24,10 +26,10 @@ const Navbar = () => {
     const navbarNotLoggedIn = (
         <div id="navbar">
             <div className="navbar-block">
-                <a href="/">RECIPIN</a>
+                <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className='navbar-block'>
-                <button>LOG IN</button>
+                <button onClick={() => navigate('/login')}>LOG IN</button>
             </div>
         </div>
     )
@@ -35,15 +37,19 @@ const Navbar = () => {
     const navbarRegistering = (
         <div id="navbar">
             <div className="navbar-block">
-                <a href="/">RECIPIN</a>
+                <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {user}</p>
+                <p>Hi, {authContext.user?.firstname}</p>
             </div>
         </div>
     )
 
-    return navbarLoggedIn;
+    if (authContext.user) {
+        return navbarLoggedIn;
+    } else {
+        return navbarNotLoggedIn;
+    }
 }
 
 export default Navbar;

client/src/context/AuthContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+import { IUser } from "../schemas";
+
+
+interface IAuthContext {
+    user?: IUser
+}
+
+const defaultValue: IAuthContext = {
+    user: undefined,
+}
+
+export const AuthContext = createContext<IAuthContext>(defaultValue);
+
+export const useAuthContext = () => useContext(AuthContext);

client/src/sass/helpers/_placeholders.scss

@@ -18,4 +18,10 @@
             width: 45vw;
         }
     }
+
+    &.flexrow {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+    }
 }

client/src/util/apiUtils.tsx

@@ -1,9 +1,17 @@
 import { IUser, IUserAuth } from "../schemas";
 const API = import.meta.env.APISTRING || "http://localhost:8080/";
 
+export const getBaseAPI = async () => {
+    return fetch(API);
+}
+
+export const getCookies = async () => {
+    return fetch(API + 'auth');
+}
+
 // auth handlers
 export const attemptLogin = async (data: IUserAuth) => {
-    const result: Array<keyof IUser> | null = await fetch(API + 'auth/login/', {
+    const success = await fetch(API + 'auth/login/', {
             method: "POST",
             headers: {
                 "Content-Type": "application/json"
@@ -11,7 +19,13 @@ export const attemptLogin = async (data: IUserAuth) => {
             body: JSON.stringify(data)
         }).then(response => response.json());
     
-    return result;
+    if (success) return success;
+    return null;
+}
+
+export const attemptLogout = async () => {
+    const response = await fetch(API + 'auth').then(response => response.json());
+    return response;
 }
 
 export const attemptRegister = async (data: IUser) => {