diagnosing problem with session storage

client/src/App.tsx

@@ -1,5 +1,5 @@
 // framework tools and custom utils
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { AuthContext, IAuthContext, useAuthContext } from './context/AuthContext';
 import { attemptLogout, checkCredientials } from './util/apiUtils';
@@ -17,26 +17,26 @@ import Welcome from './components/pages/Welcome';
 import AddRecipe from './components/pages/AddRecipe';
 import CollectionBrowser from './components/pages/CollectionBrowser';
 import { Navbar } from './components/ui';
-import './sass/App.scss'
-import RichText from './components/ui/RichText';
 import GroceryList from './components/pages/GroceryList';
 import GroceryListCollection from './components/pages/GroceryListCollection';
+import './sass/App.scss';
 
 function App() {
-  const [user, setUser] = useState<IAuthContext>({ user: undefined });
-  const authContext = useAuthContext();
+  const [user, setUser] = useState<any>();
+  const parentState = { user, setUser };
 
-  const receiveChange = useCallback((change: IUser) => {
-    console.log(change);
-    authContext.user = change;
-  }, [])
+  const receiveChange = (() => {});
 
   useEffect(() => {
     const wrapper = async () => {
       try {
         const result: IAuthContext | undefined = await checkCredientials();
-        if (result == undefined) setUser({ user: undefined });
-        setUser(result!);
+        
+        if (result == undefined) {
+          setUser({ user: undefined });
+        } else {
+          setUser(result);
+        }
       } catch(e) {
         console.error(e);
       }
@@ -45,13 +45,9 @@ function App() {
     wrapper();
   }, [])
 
-  useEffect(() => {
-    console.log(authContext);
-  }, [authContext]);
-
   return (
     <BrowserRouter>
-      <AuthContext.Provider value={ user }>
+      <AuthContext.Provider value={ parentState }>
         <div className="App">
           <Navbar receiveChange={receiveChange} />
           <Routes>

client/src/components/pages/Login.tsx

@@ -1,13 +1,16 @@
-import { useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAuthContext } from "../../context/AuthContext";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { AuthContext, useAuthContext } from "../../context/AuthContext";
 import { attemptLogin } from "../../util/apiUtils";
 import { IUserAuth } from "../../schemas";
 import { Button, Form, Page, Panel } from "../ui";
 
 export default function Login() {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get("redirect");
+    const { user, setUser } = useContext(AuthContext);
+
     // setup and local state
-    const authContext = useAuthContext();
     const navigate = useNavigate();
     const [form, setForm] = useState<JSX.Element>();
     const [input, setInput] = useState<IUserAuth>({ email: '', password: '' });
@@ -20,14 +23,14 @@ export default function Login() {
 
     const handleLogin = async () => {
         if (!input.email || !input.password) return;
-        const result = await attemptLogin(input);
-        authContext.user = result.user;
-        navigate('/');
+        const { data, ok } = await attemptLogin(input);
+        if (ok) setUser(data);
+        navigate(`/${redirect ?? ''}`);
     }
 
     // check for logged in user and mount form
     useEffect(() => {
-        if (authContext.user) navigate('/');
+        if (user) navigate('/');
         setForm(
             new Form<IUserAuth>({
                 parent: 'login',

client/src/components/pages/Profile.tsx

@@ -12,7 +12,7 @@ export default function Profile() {
     const navigate = useNavigate();
 
     return (
-        <Protect>
+        <Protect redirect="profile">
             <div className="profile-authenticated">
                 <h1>{user?.firstname}'s Profile</h1>
                 <p>Things and stuff!</p>

client/src/components/pages/Welcome.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthContext } from "../../context/AuthContext";
 import { attemptLogout, checkCredientials } from "../../util/apiUtils";
@@ -6,8 +6,8 @@ import { Button, Page, Panel } from "../ui"
 import Divider from "../ui/Divider";
 
 const Welcome = () => {
-    const authContext = useAuthContext();
     const navigate = useNavigate();
+    const { user, setUser } = useAuthContext();
 
     const authUserActions = (
         <Panel extraStyles="inherit-background c-papyrus uppercase flexrow">
@@ -41,11 +41,12 @@ const Welcome = () => {
 
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Build Shopping Lists Directly from Your Recipes</h2>
+                <button onClick={checkCredientials}></button>
             </Panel>
 
             <Divider />
 
-            { authContext && authContext.user ? authUserActions : callToRegister }
+            { user ? authUserActions : callToRegister }
         </Page>
     )
 }

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

@@ -8,13 +8,17 @@ import "/src/sass/components/Navbar.scss";
 const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
     // setup and local state
     const navigate = useNavigate();
-    const authContext = useAuthContext();
+    const { user, setUser } = useAuthContext();
     const [received, setReceived] = useState<IUser | undefined>();
     const [displayed, setDisplayed] = useState<JSX.Element>();
 
     // lift and store state from navbar variants
     const liftChange = useCallback((newValue: IUser | undefined) => {
-        authContext.user = newValue;
+        if (!newValue) {
+            return;
+        }
+        
+        setUser(newValue);
         setReceived(newValue);
     }, [])
 
@@ -26,8 +30,8 @@ const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange })
 
     // side effects for live rendering
     useEffect(() => {
-        authContext && setReceived(authContext.user);
-    }, [authContext])
+        user && setReceived(user);
+    }, [user])
 
     useEffect(() => {
         if (received) receiveChange(received);

client/src/components/ui/Page.tsx

@@ -1,3 +1,6 @@
+import { useEffect } from "react";
+import { useAuthContext } from "../../context/AuthContext";
+import { checkCredientials } from "../../util/apiUtils";
 import { PageComponent } from "../../util/types"
 import Navbar from "./Navbar";
 import "/src/sass/components/Page.scss";

client/src/context/AuthContext.tsx

@@ -3,10 +3,12 @@ import { IUser } from "../schemas";
 
 export interface IAuthContext {
     user?: IUser
+    setUser: Dispatch<SetStateAction<IUser>> | VoidFunction
 }
 
 export const defaultValue: IAuthContext = {
-    user: undefined
+    user: undefined,
+    setUser: () => {}
 }
 
 export const AuthContext = createContext<IAuthContext>(defaultValue);

client/src/util/Protect.tsx

@@ -4,7 +4,7 @@ import Divider from "../components/ui/Divider";
 import { useAuthContext } from "../context/AuthContext";
 import { ProtectPortal } from "./types";
 
-const Protect: ProtectPortal = ({ children }) => {
+const Protect: ProtectPortal = ({ children, redirect = '' }) => {
     const { user } = useAuthContext();
     const navigate = useNavigate();
 
@@ -15,7 +15,7 @@ const Protect: ProtectPortal = ({ children }) => {
                     <h1>Hi there! You don't look too familiar.</h1>
                     <p>To view the content on this page, please log in below:</p>
                     <Divider />
-                    <Button onClick={() => navigate('/login')}>Log In</Button>
+                    <Button onClick={() => navigate(redirect ? `/login?redirect=${redirect}` : '/login')}>Log In</Button>
                 </div>
             </Page>
         )

client/src/util/apiUtils.tsx

@@ -1,11 +1,8 @@
 import { ICollection, IUser, IUserAuth } from "../schemas";
-import { IAuthContext } from "../context/AuthContext";
+// import { IAuthContext } from "../context/AuthContext";
 import axios from "axios";
 const API = import.meta.env.APISTRING || "http://localhost:8080";
 
-axios.defaults.withCredentials = false;
-axios.defaults.headers['Content-Type'] = 'application/json';
-
 export const getBaseAPI = async () => {
     return fetch(API);
 }
@@ -26,14 +23,26 @@ export const checkCredientials = async () => {
 
 export const attemptLogin = async (data: IUserAuth) => {
     try {
-        const response = await axios({
+        const response = await fetch(API + '/auth/login', {
+            body: JSON.stringify(data),
             method: "POST",
-            url: API + '/auth/login',
-            data: data
+            headers: {
+                'Content-Type': "application/json"
+            }
         });
 
-        const result = Promise.resolve(response.data);
-        return result;
+        const json = await response.json();
+        console.log(json);
+        return json;
+        
+        // const response = await axios({
+        //     method: "POST",
+        //     url: API + '/auth/login',
+        //     data: data
+        // });
+
+        // const result = Promise.resolve(response.data);
+        // return result;
     } catch (e: any) {
         throw e;
     }
@@ -72,9 +81,11 @@ export const createNewCollection = async (body: ICollection) => {
         const response = await axios({
             method: "POST",
             url: API + '/collection',
-            data: body
+            data: JSON.stringify(body)
         })
 
+        console.log(response);
+
         return Promise.resolve(response.data);
     } catch (e: any) {
         throw e;

client/src/util/types.ts

@@ -4,7 +4,7 @@ import { Form } from "../components/ui";
 import { IUser } from "../schemas";
 
 export interface PortalBase {
-    children?: ReactNode
+    children?: ReactNode | ReactNode[]
     extraStyles?: string
 }
 
@@ -14,8 +14,8 @@ interface ButtonParams extends PortalBase {
     disabledText?: string
 }
 
-export interface MultiChildPortal extends PortalBase {
-    children?: ReactNode | ReactNode[]
+export interface ProtectParams extends PortalBase {
+    redirect?: string
 }
 
 interface UserCardProps extends PortalBase {
@@ -43,7 +43,7 @@ interface CheckboxProps {
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
 export type ButtonComponent = FC<ButtonParams>
-export type ProtectPortal = FC<MultiChildPortal>
+export type ProtectPortal = FC<ProtectParams>
 export type UserCardType = FC<UserCardProps>
 export type NavbarType = FC<NavbarProps>
 export type CheckboxType = FC<CheckboxProps>