update

package-lock.json

@@ -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",

package.json

@@ -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",

src/App.tsx

 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

src/components/NotFound/NotFound.css

+.NotFound {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file

src/components/NotFound/NotFound.tsx

+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

src/components/Order/CheckoutSummary/CheckoutSummary.css

+.CheckoutSummary {
+    text-align: center;
+    width: 80%;
+    margin: auto;
+}
+
+@media (min-width: 600px) {
+    .CheckoutSummary {
+        width: 500px;
+    }
+}
\ No newline at end of file

src/components/Order/CheckoutSummary/CheckoutSummary.tsx

+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

src/containers/BurgerBuilder/BurgerBuilder.tsx

-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 (

src/containers/Checkout/Checkout.tsx

+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

src/containers/ContactData/ContactData.css

+.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

src/containers/ContactData/ContactData.tsx

+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>
+  );
+};
+

src/helpers/parseParams.ts

+export const parseParams = <T extends Object,>(searchParams: URLSearchParams): T => {
+    return Object.fromEntries(searchParams) as unknown as T;
+};
\ No newline at end of file