diff --git a/src/containers/Information.tsx b/src/containers/Information.tsx index a91fefc..f7a862c 100644 --- a/src/containers/Information.tsx +++ b/src/containers/Information.tsx @@ -1,7 +1,60 @@ -import React from 'react'; +import React, { useContext, useRef } from 'react'; import { Link } from 'react-router-dom'; +import AppContext from '../context/AppContext'; -const Information = (): JSX.Element => { +interface ProductsObject { + id: string; + image: string; + title: string; + price: number; + description: string; +} +interface ObjectBuyer { + name: string | null | File; + email: string | null | File; + address: string | null | File; + apt: string | null | File; + country: string | null | File; + state: string | null | File; + pc: string | null | File; + city: string | null | File; + phone: string | null | File; +} +interface AppState { + cart?: ProductsObject[]; + buyer?: ObjectBuyer | null; + products?: ProductsObject[]; +} +interface Cart { + state?: AppState; + addToBuyer?: (buyer: ObjectBuyer) => void; +} + +const Information: React.FunctionComponent = () => { + const { state = {}, addToBuyer } = useContext(AppContext); + const { cart } = state; + + const form = useRef(null); + + const handleSubmit = () => { + if (form && form.current) { + const formData = new FormData(form.current); + const buyer: ObjectBuyer = { + name: formData.get('nm'), + email: formData.get('ml'), + address: formData.get('ddrss'), + apt: formData.get('prtmnt'), + country: formData.get('cntr'), + state: formData.get('stt'), + pc: formData.get('pstlcd'), + city: formData.get('ct'), + phone: formData.get('phn'), + }; + if (addToBuyer) { + addToBuyer(buyer); + } + } + }; return ( <>
@@ -9,33 +62,38 @@ const Information = (): JSX.Element => {

Contact Form:

-
- - - - - - - - - + + + + + + + + + +
- - - - +
+ go back +
+

List of items:

-
-
-

Item name

- 10$ -
-
+ {cart && + cart.map((_item) => { +
+
+

{_item.title}

+ {_item.price} +
+
; + })}
); diff --git a/src/hooks/useInitialState.tsx b/src/hooks/useInitialState.tsx index 0d187ec..46055cd 100644 --- a/src/hooks/useInitialState.tsx +++ b/src/hooks/useInitialState.tsx @@ -8,14 +8,28 @@ interface StateObject { price: number; description: string; } + +interface ObjectBuyer { + name: string | null; + email: string | null; + address: string | null; + apt: string | null; + country: string | null; + state: string | null; + pc: string | null; + city: string | null; + phone: string | null; +} interface AppState { cart?: StateObject[]; + buyer?: ObjectBuyer; products?: StateObject[]; } interface InitState { addToCart: (payload: StateObject) => void; removeFromCart: (payload: StateObject, indexToRemove: number) => void; + addToBuyer: (payload: ObjectBuyer) => void; state: AppState; } @@ -34,10 +48,17 @@ const useInitialState = (): InitState => { cart: state?.cart?.filter((_item, indexCurrent) => indexCurrent !== indexToRemove), }); }; + const addToBuyer = (payload: ObjectBuyer) => { + setState({ + ...state, + ...(state.buyer = payload), + }); + }; return { addToCart, removeFromCart, + addToBuyer, state, }; }; diff --git a/src/initialState.ts b/src/initialState.ts index 94bec5b..499d6b8 100644 --- a/src/initialState.ts +++ b/src/initialState.ts @@ -5,13 +5,36 @@ interface ObjectState { price: number; description: string; } +interface ObjectBuyer { + name: string | null; + email: string | null; + address: string | null; + apt: string | null; + country: string | null; + state: string | null; + pc: string | null; + city: string | null; + phone: string | null; +} interface State { cart?: ObjectState[]; + buyer?: ObjectBuyer; products: ObjectState[]; } const initialState: State = { cart: [], + buyer: { + name: null, + email: null, + address: null, + apt: null, + country: null, + state: null, + pc: null, + city: null, + phone: null, + }, products: [ { id: '1',