From f753e9e2dc807dbaf57584c94769ffc80ab0b1c6 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Wed, 1 Jun 2022 16:13:05 -0500 Subject: [PATCH] incorporating basic logic for viewing distinct products --- .../src/components/Products/ProductCard.tsx | 20 ++++++---- client/src/components/Products/Products.tsx | 39 +++++++++++++++++-- client/src/components/User/LoginForm.tsx | 10 ++--- client/src/components/User/Register.tsx | 24 ++++++++---- client/src/components/User/UserProfile.tsx | 21 ++++------ client/src/store/store.ts | 4 -- client/src/store/store_types.ts | 1 + client/src/util/apiUtils.ts | 19 +++++++++ package-lock.json | 31 ++++++++++++++- package.json | 6 ++- 10 files changed, 130 insertions(+), 45 deletions(-) diff --git a/client/src/components/Products/ProductCard.tsx b/client/src/components/Products/ProductCard.tsx index b5296ea..f6ee762 100644 --- a/client/src/components/Products/ProductCard.tsx +++ b/client/src/components/Products/ProductCard.tsx @@ -1,11 +1,17 @@ -export default function ProductCard() { +export default function ProductCard({ productData }: any) { + const { name, category, description, price, id } = productData; + return ( -
-
-

Product name

-

$4.99

-

This is a mini description of the product

- +
+
+

{name}

+

Category: {category}

+

{description}

+

Price: {`$${price}` || "Free, apparently!"}

+
+ + +
) } \ No newline at end of file diff --git a/client/src/components/Products/Products.tsx b/client/src/components/Products/Products.tsx index 38438b2..0b31d38 100644 --- a/client/src/components/Products/Products.tsx +++ b/client/src/components/Products/Products.tsx @@ -1,14 +1,47 @@ import Page from "../../util/Page"; import ProductCard from "./ProductCard"; +import { getAllProducts } from '../../util/apiUtils'; +import { useState, useEffect } from "react"; + +type ProductResponse = { + category: string, + category_id?: number, + description: string, + id: number, + inventory: number, + minidescription?: string, + name: string, + price: string +} function Products() { + const [productData, setProductData] = useState([]); + const [productFeed, setProductFeed] = useState>([]); + + useEffect(() => { + getAllProducts().then(res => setProductData(res)); + }, []) + + useEffect(() => { + if (!productData) return; + console.log(productData); + + let results = productData.map((each: ProductResponse) => { + return + }); + + setProductFeed(results); + }, [productData]); + return ( -

Found 2 products

+

Found {productFeed.length} products

+
+ +
- - + { productFeed ||

Loading...

}
) diff --git a/client/src/components/User/LoginForm.tsx b/client/src/components/User/LoginForm.tsx index 69930c1..55131ce 100644 --- a/client/src/components/User/LoginForm.tsx +++ b/client/src/components/User/LoginForm.tsx @@ -16,7 +16,6 @@ function LoginForm() { 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; @@ -27,21 +26,18 @@ function LoginForm() { if (json) { const { session, userProfile } = json; let thisUser: userInfo = { + firstName: userProfile.first_name, + lastName: userProfile.last_name, id: userProfile.id, email: userProfile.email, password: userProfile.password, headers: session } - setToDispatch(thisUser); + dispatch({ type: ActionType.USERLOGIN, payload: thisUser }); } } - useEffect(() => { - if (!toDispatch) return; - 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 ab05bd5..1dd89c8 100644 --- a/client/src/components/User/Register.tsx +++ b/client/src/components/User/Register.tsx @@ -1,7 +1,8 @@ -import { useEffect, useState } from "react"; -import { emptySessionHeader } from "../../store/store_types"; +import { useEffect, useReducer, useState } from "react"; +import { initialState, reducer } from "../../store/store"; +import { ActionType, emptySessionHeader } from "../../store/store_types"; import { userInfo } from '../../types/main'; -import { registerNewUser } from "../../util/apiUtils"; +import { handleLogin, registerNewUser, unwrapLogin } from "../../util/apiUtils"; import Page from "../../util/Page"; function Register() { @@ -15,6 +16,7 @@ function Register() { headers: emptySessionHeader } + const [state, dispatch] = useReducer(reducer, initialState); const [userInput, setUserInput] = useState(formInitialState); const [warningText, setWarningText] = useState('initial'); @@ -50,9 +52,15 @@ function Register() { // allows registration submission if warning text has correct value and userData is defined with all required values const handleRegistration = async () => { if (userInput === formInitialState) return; - warningText === "Conditions met!" && await registerNewUser(userInput); + if (warningText !== "Conditions met!") return; + + let register = await registerNewUser(userInput); - setUserInput(formInitialState); + if (register.ok) { + setUserInput(formInitialState); + } else { + console.log('Something went wrong'); + } } return ( @@ -73,7 +81,7 @@ function Register() {
- setUserInput({...userInput, email: e.target.value})}/> + setUserInput({...userInput, email: e.target.value})}/>

{warningText}

@@ -82,13 +90,13 @@ function Register() { - setUserInput({...userInput, password: e.target.value})}/> + setUserInput({...userInput, password: e.target.value})}/>
- setUserInput({...userInput, verifyPassword: e.target.value})}/> + setUserInput({...userInput, verifyPassword: e.target.value})}/>
diff --git a/client/src/components/User/UserProfile.tsx b/client/src/components/User/UserProfile.tsx index 5ac92e2..7bb572e 100644 --- a/client/src/components/User/UserProfile.tsx +++ b/client/src/components/User/UserProfile.tsx @@ -1,5 +1,4 @@ -import { useContext, useEffect } from "react" -import { useNavigate } from "react-router-dom"; +import { useContext } from "react" import { AppContext } from "../../store/store" import Page from "../../util/Page"; @@ -7,18 +6,10 @@ import Page from "../../util/Page"; export default function UserProfile(profile: any): JSX.Element { const [state, dispatch] = useContext(AppContext); - const navigate = useNavigate(); - - // useEffect(() => { - // if (!state.user.headers.authenticated) { - // console.log('bad'); - // } - // }, []); - - return ( - + if (state.user) return ( +

User Profile

-

Thanks for supporting us{`, ${state.user.name}!` || '!'}

+

Thanks for supporting us{`, ${state.user.firstName}!` || '!'}

{state.user.id || 'Profile not found'}

{state.user.email}

@@ -29,5 +20,7 @@ export default function UserProfile(profile: any): JSX.Element { - ) + ); + + return (<>) } \ No newline at end of file diff --git a/client/src/store/store.ts b/client/src/store/store.ts index 110d74f..c88c42e 100644 --- a/client/src/store/store.ts +++ b/client/src/store/store.ts @@ -19,15 +19,11 @@ 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 diff --git a/client/src/store/store_types.ts b/client/src/store/store_types.ts index bbe4889..90db9b6 100644 --- a/client/src/store/store_types.ts +++ b/client/src/store/store_types.ts @@ -3,6 +3,7 @@ import { userInfo, Cart } from '../types/main'; // type definitions for reducer export enum ActionType { GETALL, + GETPROFILE, GETCATEGORY, REGISTERNEW, UPDATEONE, diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts index 7d2130d..27c011c 100644 --- a/client/src/util/apiUtils.ts +++ b/client/src/util/apiUtils.ts @@ -24,6 +24,7 @@ export const registerNewUser = async (user: userInfo) => { }); if (serverCall.ok) console.log('User added successfully.'); + return serverCall; } export const handleLogin = async (email: string, password: string) => { @@ -37,3 +38,21 @@ export const handleLogin = async (email: string, password: string) => { return serverCall; } + +export const unwrapLogin = async (email: string, password: string) => { + const response = await handleLogin(email, password); + const { session, userProfile } = await response.json(); + + return { session, userProfile }; +} + +export const getAllProducts = async () => { + let serverCall = await fetch('http://localhost:8088/products', { + method: "GET", + headers: { + "Content-Type": "application/json" + } + }).then(res => res.json()); + + return serverCall; +} diff --git a/package-lock.json b/package-lock.json index 4cba98e..0f359a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,11 @@ "oauth2-server": "^3.1.1", "passport": "^0.6.0", "passport-local": "^1.0.0", - "pg": "^8.7.3" + "pg": "^8.7.3", + "uuid": "^8.3.2" + }, + "devDependencies": { + "@types/uuid": "^8.3.4" } }, "node_modules/@mapbox/node-pre-gyp": { @@ -41,6 +45,12 @@ "node-pre-gyp": "bin/node-pre-gyp" } }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "node_modules/abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -1581,6 +1591,14 @@ "node": ">= 0.4.0" } }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -1647,6 +1665,12 @@ "tar": "^6.1.11" } }, + "@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -2804,6 +2828,11 @@ "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index a4f3703..f50d9c9 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,10 @@ "oauth2-server": "^3.1.1", "passport": "^0.6.0", "passport-local": "^1.0.0", - "pg": "^8.7.3" + "pg": "^8.7.3", + "uuid": "^8.3.2" + }, + "devDependencies": { + "@types/uuid": "^8.3.4" } }