From 8ff61753551cc7dfa309dca1709e2f9dea760b17 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sat, 12 Dec 2020 18:27:13 +1300
Subject: [PATCH] component:  add OrderSummary modal component

---
 .../Burger/OrderSummary/OrderSummary.js       | 27 +++++++++++++++++++
 src/containers/BurgerBuilder/BurgerBuilder.js |  5 +++-
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Burger/OrderSummary/OrderSummary.js

diff --git a/src/components/Burger/OrderSummary/OrderSummary.js b/src/components/Burger/OrderSummary/OrderSummary.js
new file mode 100644
index 0000000..9a49eda
--- /dev/null
+++ b/src/components/Burger/OrderSummary/OrderSummary.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Aux from '../../../hoc/Auxiliary';
+
+const orderSummary = (props) => {
+    const ingredients = Object.keys(props.ingredients)
+        .map(igKey => {
+            return (
+                <li key={igKey}>
+                    <span style={{ textTransform: 'capitalize' }}>{igKey}:</span> {props.ingredients[igKey]}
+                </li>
+            )
+        });
+
+    return (
+        <Aux>
+            <h3>Your Order</h3>
+            <p>A delicious burger with the following ingredients:</p>
+            <ul>
+                {ingredients}
+            </ul>
+            <p>Continue to Checkout?</p>
+        </Aux>
+    )
+};
+
+export default orderSummary;
\ No newline at end of file
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index db4fa60..ac9e911 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/src/containers/BurgerBuilder/BurgerBuilder.js
@@ -4,6 +4,7 @@ import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls';
 import Modal from '../../components/UI/Modal/Modal';
+import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
 
 const INGREDIENT_PRICE = {
     salad: 0.4,
@@ -87,7 +88,9 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
-                <Modal />
+                <Modal>
+                    <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
+                </Modal>
                 <Burger ingredients={this.state.ingredients}  />
                 <BuildControls 
                     ingredientAdded={this.addIngredientHandler}