diff --git a/client/src/App.tsx b/client/src/App.tsx index 4be7ff4..2aa7037 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,6 +1,6 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'; -import { useContext } from 'react'; -import { AppContext } from './store/store'; +import { useReducer } from 'react'; +import { AppContext, initialState, reducer } from './store/store'; import NavBar from './components/Navbar'; import LandingPage from './components/LandingPage'; @@ -11,11 +11,11 @@ import Register from './components/User/Register'; import './App.scss' function App() { - const context = useContext(AppContext); + const [state, dispatch] = useReducer(reducer, initialState); return ( - + diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx index 9bf0627..c58f564 100644 --- a/client/src/components/Navbar.tsx +++ b/client/src/components/Navbar.tsx @@ -1,29 +1,41 @@ -import { useReducer, useState } from "react"; -import { initialState, reducer } from "../store/store"; +import { useReducer, useState, useEffect, useContext } from "react"; +import { AppContext, initialState, reducer } from "../store/store"; import { ActionType } from "../store/store_types"; import { useNavigate } from 'react-router-dom'; function NavBar() { const [loggedIn, setLoggedIn] = useState(false); const [userID, setUserID] = useState(null); - const [searchTerm, setSearchTerm] = useState(''); - const [state, dispatch] = useReducer(reducer, initialState); + const [searchInput, setSearchInput] = useState(''); + + const [state, dispatch] = useContext(AppContext); + // const { searchTerm, user, cart } = useContext(AppContext); const navigate = useNavigate(); const handleSearch = () => { - if (searchTerm === '') return; + if (searchInput === '') return; - dispatch({ type: ActionType.SEARCH, payload: searchTerm }); - navigate(`/products?query=${searchTerm}`); + dispatch({ type: ActionType.SEARCH, payload: searchInput }); + navigate(`/products?query=${searchInput}`); } + // const forceRender = () => { + // console.log(searchTerm); + // console.log(user); + // } + + // useEffect(() => { + // console.log('state updated!'); + // }, [user]) + return ( diff --git a/client/src/components/User/LoginForm.tsx b/client/src/components/User/LoginForm.tsx index ac0f95f..d0abb77 100644 --- a/client/src/components/User/LoginForm.tsx +++ b/client/src/components/User/LoginForm.tsx @@ -1,8 +1,8 @@ -import { useState, useReducer } from "react"; -import { reducer, initialState } from "../../store/store"; -import { ActionType, undefinedUser } from "../../store/store_types"; -import { userInfo, LoginHeaders } from "../../types/main"; -import { handleLogin, getOneUser } from "../../util/apiUtils"; +import { useState, useEffect, useContext } from "react"; +import { AppContext } from "../../store/store"; +import { ActionType } from "../../store/store_types"; +import { userInfo } from "../../types/main"; +import { handleLogin } from "../../util/apiUtils"; import Page from "../../util/Page"; enum PassVisible { @@ -11,11 +11,12 @@ enum PassVisible { } function LoginForm() { - const [state, dispatch] = useReducer(reducer, initialState); + const [state, dispatch] = useContext(AppContext); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [showPass, setShowPass] = useState(PassVisible.hide); + const [toDispatch, setToDispatch] = useState(); const displaySession = async () => { if (username === '' || password === '') return; @@ -33,10 +34,15 @@ function LoginForm() { headers: json } - dispatch({ type: ActionType.UPDATEONE, payload: thisUser }); + setToDispatch(thisUser); } } + useEffect(() => { + console.log('thing?'); + dispatch({ type: ActionType.USERLOGIN, payload: toDispatch }); + }, [toDispatch]); + return (

Welcome back to my store!

diff --git a/client/src/components/User/Register.tsx b/client/src/components/User/Register.tsx index f479b5a..32a32fc 100644 --- a/client/src/components/User/Register.tsx +++ b/client/src/components/User/Register.tsx @@ -61,7 +61,8 @@ function Register() { let newInfo: userInfo = { name: name, email: email, - password: password + password: password, + headers: {} } setUserData(newInfo); @@ -80,7 +81,8 @@ function Register() { // allows registration submission if warning text has correct value and userData is defined with all required values const handleRegistration = async () => { - warningText === "Conditions met!" && userData && await registerNewUser(userData); + if (!userData) return; + warningText === "Conditions met!" && await registerNewUser(userData); setName(''); setEmail(''); diff --git a/client/src/store/store.ts b/client/src/store/store.ts index f43964a..110d74f 100644 --- a/client/src/store/store.ts +++ b/client/src/store/store.ts @@ -19,11 +19,15 @@ export const reducer = (state: appState, action: userAction) => { case ActionType.UPDATEONE: return state; case ActionType.SEARCH: + console.log(payload); + return { ...state, searchTerm: payload } case ActionType.USERLOGIN: + console.log(payload); + return { ...state, user: payload @@ -33,4 +37,4 @@ export const reducer = (state: appState, action: userAction) => { } } -export const AppContext = createContext(initialState) +export const AppContext = createContext(initialState) diff --git a/client/src/store/store_types.ts b/client/src/store/store_types.ts index 0bcab75..9e28d35 100644 --- a/client/src/store/store_types.ts +++ b/client/src/store/store_types.ts @@ -21,12 +21,23 @@ export interface appState { cart: Cart } +export type SessionHeader = { + authenticated: boolean + cookie: { + expires: string + httpOnly: boolean + originalMaxAge: number + path: string + secure: boolean + } + user?: userInfo +} + // empty object templates for initial state export const undefinedUser: userInfo = { email: '', name: '', password: '', - headers: {} } export const emptyCart: Cart = { @@ -34,4 +45,4 @@ export const emptyCart: Cart = { userInfo: undefinedUser, checkedOut: false, contents: [] -} +} \ No newline at end of file diff --git a/client/src/types/main.d.ts b/client/src/types/main.d.ts index 0e3eec5..40a49d7 100644 --- a/client/src/types/main.d.ts +++ b/client/src/types/main.d.ts @@ -1,10 +1,12 @@ +import { SessionHeader } from "../store/store_types"; + // user details and metadata export type userInfo = { email: string; id?: number; name?: string; password: string; - headers: object + headers?: SessionHeader } export type LoginHeaders = {