finished lesson 61

package-lock.json

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

package.json

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

src/App.js

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

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

+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

src/containers/BurgerBuilder/BurgerBuilder.js

 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 (

src/containers/Checkout/Checkout.jsx

+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

src/containers/Checkout/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;
+}
+
+.Input {
+    display: block;
+}
+
+@media (min-width: 600px) {
+    .ContactData {
+        width: 500px;
+    }
+}
\ No newline at end of file

src/containers/Checkout/ContactData/ContactData.jsx

+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

src/helper/parseSearch.js

+export const parseSearch = (searchParams) => {
+    return Object.fromEntries(searchParams)
+}
\ No newline at end of file