diff --git a/client/src/components/pages/Login.tsx b/client/src/components/pages/Login.tsx index 7e32af5..1a4418e 100644 --- a/client/src/components/pages/Login.tsx +++ b/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(); const [input, setInput] = useState({ 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(formConfig).mount()) }, []) diff --git a/client/src/components/pages/Register/register.aboutyou.tsx b/client/src/components/pages/Register/register.aboutyou.tsx index c397c1e..5737255 100644 --- a/client/src/components/pages/Register/register.aboutyou.tsx +++ b/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([

Loading content...

]); const [input, setInput] = useState({ 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 ( diff --git a/client/src/components/pages/Welcome.tsx b/client/src/components/pages/Welcome.tsx index 8a5903b..88a4a11 100644 --- a/client/src/components/pages/Welcome.tsx +++ b/client/src/components/pages/Welcome.tsx @@ -51,7 +51,7 @@ const Welcome = () => { - { authContext.user ? authUserActions : callToRegister } + { authContext && authContext.user ? authUserActions : callToRegister } ) } diff --git a/client/src/components/ui/Navbar.tsx b/client/src/components/ui/Navbar/index.tsx similarity index 50% rename from client/src/components/ui/Navbar.tsx rename to client/src/components/ui/Navbar/index.tsx index bb1019b..29c073e 100644 --- a/client/src/components/ui/Navbar.tsx +++ b/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(); + const [displayed, setDisplayed] = useState(); + // helper to unwrap async result + const handleLogout = async () => { + const success = await attemptLogout(); + if (success) setReceived(undefined); + } + + // jsx variations const navbarLoggedIn = ( ) @@ -42,12 +51,23 @@ const Navbar = () => { navigate('/')}>RECIPIN
-

Hi, {user?.firstname}

+

Hi, {received?.firstname}.

) - 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 ||

Loading...

; } export default Navbar; \ No newline at end of file diff --git a/client/src/util/apiUtils.tsx b/client/src/util/apiUtils.tsx index 4aa3631..34dbad3 100644 --- a/client/src/util/apiUtils.tsx +++ b/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 => { 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 = 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; } diff --git a/server/routes/auth.ts b/server/routes/auth.ts index b5c5347..2232a47 100644 --- a/server/routes/auth.ts +++ b/server/routes/auth.ts @@ -44,7 +44,8 @@ export const authRoute = (app: Express, passport: PassportStatic) => { // const { id, email, handle, firstname, lastname } = response.user; // await UserControl.updateOne(response.user.id, { ...response.user, datemodified: now }) // res.status(200).send({ id: id, handle: handle, firstname: firstname, lastname: lastname }); - res.cookie('userid', response.user.id, { maxAge: 1000 * 60 * 60 * 24 * 7 }); + res.cookie('userid', response.user.id, { maxAge: 1000 * 60 * 60 * 24 }); + res.send(response); res.end(); } else { res.status(401).send({ message: "Login unsuccessful" });