type wrangling

client/src/components/Navbar.tsx

@@ -1,5 +1,6 @@
 import { useReducer, useState } from "react";
-import { initialState, reducer, ActionType } from "../store/store";
+import { initialState, reducer } from "../store/store";
+import { ActionType } from "../store/store_types";
 import { useNavigate } from 'react-router-dom';
 
 function NavBar() {

client/src/components/User/LoginForm.tsx

@@ -1,16 +1,29 @@
-import { useState } from "react";
+import { useState, useReducer } from "react";
+import { reducer, initialState } from "../../store/store";
+import { handleLogin } from "../../util/apiUtils";
 import Page from "../../util/Page";
 
-function LoginForm() {
-    enum PassVisible {
-        hide = 'password',
-        show = 'text'
-    }
+enum PassVisible {
+    hide = 'password',
+    show = 'text'
+}
 
-    const [username, setUsername] = useState<string>();
-    const [password, setPassword] = useState<string>();
+function LoginForm() {
+    const [state, dispatch] = useReducer(reducer, initialState);
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
     const [showPass, setShowPass] = useState<PassVisible>(PassVisible.hide);
 
+    const displaySession = async () => {
+        if (username === '' || password === '') return;
+        
+        const headers = handleLogin(username, password)
+        .then(res => res?.json());
+
+        if (headers) console.log(headers);
+    }
+
     return (
         <Page classes="login light-page">
             <h1>Welcome back to my store!</h1>
@@ -42,12 +55,9 @@ function LoginForm() {
                             onClick={() => setShowPass((showPass === PassVisible.hide) ? PassVisible.show : PassVisible.hide)}
                         >Show password</button>
                     </div>
-
-                    <p>Username is: {username}</p>
-                    <p>Password is: {password}</p>
                 </form>
 
-
+                <button onClick={displaySession}>Log In</button>
             </section>
 
             <section className="link-to-register">

client/src/store/store.ts

@@ -1,39 +1,5 @@
 import { createContext } from "react";
-import { userInfo, Cart,  } from "../types/main";
-
-// type definitions for reducer
-export enum ActionType {
-    GETALL,
-    GETCATEGORY,
-    REGISTERNEW,
-    UPDATEONE,
-    SEARCH,
-}
-
-export interface userAction {
-    type: ActionType;
-    payload: any;
-}
-
-export interface appState {
-    searchTerm: string,
-    user: userInfo,
-    cart: Cart
-}
-
-// empty object templates for initial state
-const undefinedUser: userInfo = {
-    email: '',
-    name: '',
-    password: ''
-}
-
-const emptyCart: Cart = {
-    cartID: 0,
-    userInfo: undefinedUser,
-    checkedOut: false,
-    contents: []
-}
+import { ActionType,userAction, appState, undefinedUser, emptyCart } from './store_types';
 
 export const initialState: appState = {
     searchTerm: '',
@@ -53,14 +19,13 @@ export const reducer = (state: appState, action: userAction) => {
         case ActionType.UPDATEONE:
             return state;
         case ActionType.SEARCH:
-            let newState = {
+            return {
                 ...state,
                 searchTerm: payload
             }
-            state = newState;
-            console.log(state.searchTerm);
+        default:
             return state;
     }
 }
 
-export const AppContext = createContext(initialState)
+export const AppContext = createContext(initialState)

client/src/store/store_types.ts

@@ -0,0 +1,36 @@
+import { userInfo, Cart } from '../types/main';
+
+// type definitions for reducer
+export enum ActionType {
+    GETALL,
+    GETCATEGORY,
+    REGISTERNEW,
+    UPDATEONE,
+    SEARCH,
+}
+
+export interface userAction {
+    type: ActionType;
+    payload: any;
+}
+
+export interface appState {
+    searchTerm: string,
+    user: userInfo,
+    cart: Cart
+}
+
+// empty object templates for initial state
+export const undefinedUser: userInfo = {
+    email: '',
+    name: '',
+    password: '',
+    headers: {}
+}
+
+export const emptyCart: Cart = {
+    cartID: 0,
+    userInfo: undefinedUser,
+    checkedOut: false,
+    contents: []
+}

client/src/types/main.d.ts

@@ -3,6 +3,7 @@ export type userInfo = {
     id?: number;
     name: string;
     password: string;
+    headers: object
 }
 
 export type Product = {

client/src/util/apiUtils.ts

@@ -16,5 +16,17 @@ export const registerNewUser = async (user: userInfo) => {
         body: JSON.stringify(user)
     });
   
-    if (serverCall.ok) return 'User added successfully.';
+    if (serverCall.ok) console.log('User added successfully.');
+}
+
+export const handleLogin = async (email: string, password: string) => {
+    let serverCall = await fetch('http://localhost:8088/login', {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ email: email, password: password })
+    });
+
+    if (serverCall.ok) return serverCall;
 }