updates to BurgerApp to use Form Validation

Author: f4js3il

package-lock.json

@@ -37,6 +37,7 @@
     "react": "^16.11.0",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.11.0",
+    "react-router-dom": "^5.2.0",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",

package.json

@@ -1,14 +1,22 @@
 import React, { Component } from 'react';
-import Layout from './Hoc/Auxiliary/Auxiliary';
-import BurgerBuilder from './Containers/BurgerBuilders';
+import Layout from './Hoc/Layout/Layout';
+import BurgerBuilder from './Containers/BurgerBuilder/BurgerBuilder';
+import CheckOut from './Containers/CheckOut/CheckOut'
+import {Route, Switch} from 'react-router-dom';
+import Orders from './Containers/Orders/Orders';
 
 
 class App extends Component {
   render() {
     return (
       <div>
         <Layout>
-          <BurgerBuilder />
+          <Switch>
+          <Route path="/" exact component={BurgerBuilder}></Route>
+          <Route path="/checkout" component={CheckOut}></Route>
+          <Route path="/orders" component={Orders}/>
+          <Route  component={BurgerBuilder}></Route>
+          </Switch>
         </Layout>
       </div>
     );

src/App.js

@@ -0,0 +1,11 @@
+.CheckOutSummary{
+    text-align: center;
+    width: 80%;
+    margin: auto;
+}
+
+@media(min-width:600px){
+    .CheckOutSummary{
+        width: 500px;
+    }
+}

src/Components/CheckOutSummary/CheckOutSummary.css

@@ -0,0 +1,16 @@
+import React from 'react';
+import Burger from '../Burger/Burger';
+import Button from '../UI/Button/Button';
+import classes from './CheckOutSummary.css'
+const CheckOutSummary=(props)=>(
+    <div className={classes.CheckOutSummary}>
+        <h1>We hope you like the Burger</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;

src/Components/CheckOutSummary/CheckOutSummary.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import classes from './NavigationItem.css';
+import {NavLink} from 'react-router-dom';
 
 
 const navigationItem=(props)=>(
 <li className={classes.NavigationItem}>
-    <a href={props.link}
-    className={props.active? classes.active: null}>{props.children}</a></li>
+    <NavLink exact={props.exact} activeClassName={classes.active} to={props.link}>{props.children}</NavLink></li>
 );
 
 export default navigationItem;

src/Components/Navigation/NavigationItems/NavigationItem/NavigationItem.js

@@ -4,8 +4,8 @@ import NavigationItem from '../NavigationItems/NavigationItem/NavigationItem';
 
 const navigationItems = (props)=>(
     <ul className={classes.NavigationItems}> 
-        <NavigationItem link= "/" active >Burger Builder</NavigationItem>
-        <NavigationItem link= "/" >CheckOut</NavigationItem>
+        <NavigationItem link= "/" exact>Burger Builder</NavigationItem>
+        <NavigationItem link= "/orders" >Orders</NavigationItem>
     </ul>
 
 );

src/Components/Navigation/NavigationItems/NavigationItems.js

@@ -0,0 +1,9 @@
+.Order{
+    width:80%;
+    border: 1px, solid , #eee;
+    box-shadow: 0 2px 3px #ccc;
+    padding: 10px;
+    margin: 10px auto;
+    box-sizing: border-box;
+
+}

src/Components/Order/Order.css

@@ -0,0 +1,24 @@
+import React from 'react';
+import classes from './Order.css';
+const order = (props)=>{
+    const ingredients =[];
+    for(let ingredient in props.ingredients){
+        ingredients.push({name :ingredient, amount: props.ingredients[ingredient]})
+    }
+   const ingredientOutput =  ingredients.map(ingredient =>
+    {
+      return  <span style={{textTransform: 'capitalize',
+                            display:'inline-block',
+                            margin:'0 8px',
+                            border: '1px solid #ccc',
+                            padding: '5px'
+                            }}
+       key={ingredient.name}>{ingredient.name} ({ingredient.amount})</span>
+    });
+    return (
+    <div className={classes.Order}>
+        <p>Ingredients: {ingredientOutput}</p>
+        <p>Price<strong>USD {props.price}</strong></p>
+    </div>
+)};
+export default order;

src/Components/Order/Order.js

@@ -14,7 +14,10 @@
     margin-left: 0;
     padding-left: 0;
 }
-
+.Button:disabled{
+   color: gray;
+    cursor: not-allowed;
+}
 .Success {
     color: #5C9210;
 }