Commit e9082886 authored by Pavel Mishakov's avatar Pavel Mishakov

finished lesson 61

parent d80e73dc
......@@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
......@@ -2905,6 +2906,14 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
"integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
......@@ -13477,6 +13486,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.4.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
"integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
"dependencies": {
"@remix-run/router": "1.0.4"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.4.4",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
"integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
"dependencies": {
"@remix-run/router": "1.0.4",
"react-router": "6.4.4"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......@@ -18232,6 +18271,11 @@
"source-map": "^0.7.3"
}
},
"@remix-run/router": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
"integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg=="
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
......@@ -25780,6 +25824,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.4.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
"integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
"requires": {
"@remix-run/router": "1.0.4"
}
},
"react-router-dom": {
"version": "6.4.4",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
"integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
"requires": {
"@remix-run/router": "1.0.4",
"react-router": "6.4.4"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......@@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......
import { BrowserRouter, Route, Routes } from "react-router-dom";
import BurgerBuilder from "./containers/BurgerBuilder/BurgerBuilder";
import Checkout from "./containers/Checkout/Checkout";
import ContactData from "./containers/Checkout/ContactData/ContactData";
function App() {
return (
<BurgerBuilder/>
<BrowserRouter>
<Routes>
<Route path='/' element={<BurgerBuilder/>} />
<Route path='/checkout' element={<Checkout />}>
<Route path='contact-data' element={<ContactData />} />
</Route>
<Route path='*' element={<div>NOT FOUND</div>} />
</Routes>
</BrowserRouter>
);
}
......
.CheckoutSummary {
text-align: center;
width: 80%;
margin: auto;
}
@media (min-width: 600px) {
.CheckoutSummary {
width: 500px;
}
}
\ No newline at end of file
import React from "react";
import Burger from "../../Burger/Burger";
import Button from "../../UI/Button/Button";
import './CheckoutSummary.css'
const CheckoutSummary = (props) => {
return (
<div className="CheckoutSummary">
<h1>We hope it tastes well!</h1>
<div style={{width: '100%', margin: 'auto'}}>
<Burger
ingredients={props.ingredients}
/>
</div>
<Button btnType='Danger' clicked={props.checkoutCancelled}>CANCEL</Button>
<Button btnType='Success' clicked={props.checkoutContinued}>Continue</Button>
</div>
)
}
export default CheckoutSummary
\ No newline at end of file
import React from 'react';
import { useState } from 'react';
import { createSearchParams, useNavigate } from 'react-router-dom';
import BuildControls from '../../components/BuildControls/BuildControls';
import Burger from '../../components/Burger/Burger'
import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
import Modal from '../../components/UI/Modal/Modal';
const BurgerBuilder = () => {
const navigate = useNavigate()
const [ingredients, setIngredients] = useState({
salad: 0,
bacon: 0,
......@@ -75,7 +77,9 @@ const BurgerBuilder = () => {
}
const purchaseContinueHandler = () => {
alert('You continued!')
const params = new createSearchParams(ingredients)
//salad=0&meat=0&cheese=0&bacon=0
navigate({pathname: '/checkout' , search: params.toString()})
}
return (
......
import React from "react";
import { useRef } from "react";
import { NavLink, Outlet, useNavigate, useSearchParams } from "react-router-dom";
import CheckoutSummary from "../../components/Order/CheckoutSummary/CheckoutSummary";
import { parseSearch } from "../../helper/parseSearch";
const Checkout = () => {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const parsed = parseSearch(searchParams)
const ingredients = useRef(parsed)
const checkoutCancelledHandler = () => {
navigate(-1)
}
const checkoutContinuedHandler = () => {
navigate('contact-data', {state: {ingredients: ingredients.current}})
}
return (
<>
<CheckoutSummary
ingredients={ingredients.current}
checkoutCancelled={checkoutCancelledHandler}
checkoutContinued={checkoutContinuedHandler}
/>
<Outlet />
</>
)
}
export default Checkout
\ No newline at end of file
.ContactData {
margin: 20px auto;
width: 80%;
text-align: center;
box-shadow: 0 2px 3px #ccc;
border: 1px solid #eee;
padding: 10px;
box-sizing: border-box;
}
.Input {
display: block;
}
@media (min-width: 600px) {
.ContactData {
width: 500px;
}
}
\ No newline at end of file
import React from 'react';
import './ContactData.css';
import Button from "../../../components/UI/Button/Button";
const ContactData = () => {
return (
<div className="ContactData">
<h4>Enter your Contact Data</h4>
<form>
<input className="Input" type="text" name="name" placeholder="Your Name"/>
<input className="Input" type="email" name="email" placeholder="Your Mail"/>
<input className="Input" type="text" name="street" placeholder="Street"/>
<input className="Input" type="text" name="postal" placeholder="Postal Code"/>
<Button btnType="Success">ORDER</Button>
</form>
</div>
);
};
export default ContactData
\ No newline at end of file
export const parseSearch = (searchParams) => {
return Object.fromEntries(searchParams)
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment