Commit b7fe2f7f authored by Nurasyl's avatar Nurasyl

update

parent b2dd4fe9
......@@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0"
},
"devDependencies": {
"@types/node": "^20.12.6",
......@@ -775,6 +776,14 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@remix-run/router": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@types/node": {
"version": "20.12.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.6.tgz",
......@@ -1234,6 +1243,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
"dependencies": {
"@remix-run/router": "1.16.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
"dependencies": {
"@remix-run/router": "1.16.0",
"react-router": "6.23.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......@@ -1884,6 +1923,11 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"@remix-run/router": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q=="
},
"@types/node": {
"version": "20.12.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.6.tgz",
......@@ -2216,6 +2260,23 @@
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
"dev": true
},
"react-router": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
"requires": {
"@remix-run/router": "1.16.0"
}
},
"react-router-dom": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
"requires": {
"@remix-run/router": "1.16.0",
"react-router": "6.23.0"
}
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
......
......@@ -10,7 +10,8 @@
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0"
},
"devDependencies": {
"@types/node": "^20.12.6",
......
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import { Checkout } from './containers/Checkout/Checkout';
import { NotFound } from './components/NotFound/NotFound';
import { ContactData } from './containers/ContactData/ContactData';
function App() {
return <BurgerBuilder/>;
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<BurgerBuilder/>}/>
<Route path='/checkout' element={<Checkout/>}>
<Route path='contactData' element={<ContactData/>}/>
</Route>
<Route path='*' element={<NotFound/>}/>
</Routes>
</BrowserRouter>
)
}
export default App
.NotFound {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
import React from "react";
import './NotFound.css';
export const NotFound = () => {
return (
<div className="NotFound">
<h1>Page Not Found</h1>
</div>
)
}
\ No newline at end of file
.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 { useNavigate } from 'react-router-dom';
import Burger from "@/components/Burger/Burger";
import {Button} from "@/components/UI/Button/Button";
import type {Ingredients} from "@/interfaces/Ingredients";
import './CheckoutSummary.css';
interface TProps {
ingredients: Ingredients;
checkoutCancelled: VoidFunction
checkoutContinued: VoidFunction
}
export const CheckoutSummary = (props: TProps) => {
const navigate = useNavigate();
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" click={props.checkoutCancelled}>CANCEL</Button>
<Button btnType="Success" click={props.checkoutContinued}>CONTINUE</Button>
</div>
)
}
\ No newline at end of file
import React, { Fragment, useState } from 'react';
import React, { useState } from 'react';
import { useNavigate, createSearchParams } from 'react-router-dom';
import type { Ingredients, IngredientNames } from '@/interfaces/Ingredients';
import Burger from '@/components/Burger/Burger';
import BuildControls from '@/components/BuildControls/BuildControls';
......@@ -7,6 +8,8 @@ import { Modal } from '@/components/UI/Modal/Modal';
import { OrderSummary } from '@/components/Burger/OrderSummary';
const BurgerBuilder = () => {
const navigate = useNavigate();
const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
const [purshasable, setPurshasable] = useState<boolean>(false);
const [show, setShow] = useState<boolean>(false);
......@@ -51,7 +54,11 @@ const BurgerBuilder = () => {
};
const onPurchaseContinued = () => {
alert("В будущем напишем логику")
const searchParams = createSearchParams(ingredients as unknown as URLSearchParams)
navigate({
pathname: "/checkout",
search: `${searchParams.toString()}`
})
};
return (
......
import React, {useRef} from 'react';
import {useSearchParams, Outlet, useNavigate} from "react-router-dom";
import type {Ingredients} from '@/interfaces/Ingredients';
import { CheckoutSummary } from '@/components/Order/CheckoutSummary/CheckoutSummary';
import { parseParams } from '@/helpers/parseParams';
export const Checkout = () => {
const navigate = useNavigate();
const [params] = useSearchParams();
const ingredients = useRef(parseParams<Ingredients>(params));
const checkoutCancelledHandler = () => {
navigate(-1);
};
const checkoutContinuedHandler = () => {
navigate('contactData', {state: {ingredients: ingredients.current}});
};
return (
<>
<CheckoutSummary
ingredients={ingredients.current}
checkoutCancelled={checkoutCancelledHandler}
checkoutContinued={checkoutContinuedHandler}
/>
<Outlet/>
</>
);
};
\ 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;
}
form {
width: 450px;
margin: 0 auto;
}
.Input {
display: block;
width: 100%;
}
@media (min-width: 600px) {
.ContactData {
width: 500px;
}
}
\ No newline at end of file
import React from 'react';
import {Button} from "@/components/UI/Button/Button";
import './ContactData.css';
export 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 click={() => {}} btnType="Success">ORDER</Button>
</form>
</div>
);
};
export const parseParams = <T extends Object,>(searchParams: URLSearchParams): T => {
return Object.fromEntries(searchParams) as unknown as T;
};
\ 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