component: show/hide Modal with animation

src/components/Burger/BuildControls/BuildControls.js

@@ -22,7 +22,8 @@ const buildControls = (props) => (
                 disabled={props.disabled[ctrl.type]} />
         ))}
         <button className={classes.OrderButton}
-            disabled={!props.purchasable}>ORDER NOW</button>
+            disabled={!props.purchasable}
+            onClick={props.ordered}>ORDER NOW</button>
     </div>
 )
 

src/components/UI/Modal/Modal.js

@@ -4,7 +4,11 @@ import classes from './Modal.css';
 
 const modal = (props) => {
     return (
-        <div className={classes.Modal}>
+        <div
+            className={classes.Modal}
+            style={{
+                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)'
+            }}>
             {props.children}
         </div>
     );

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -24,18 +24,19 @@ class BurgerBuilder extends Component {
         },
         totalPrice: 0,
         purchasable: false,
+        purchasing: false,
     }
 
-    updatePurchaseState (ingredients) {
+    updatePurchaseState(ingredients) {
         const sum = Object.keys(ingredients)
-        .map( igkey => {
+            .map(igkey => {
                 return ingredients[igkey];
             })
             .reduce((sum, el) => {
                 return sum + el;
             }, 0);
 
-        this.setState({purchasable: sum > 0});
+        this.setState({ purchasable: sum > 0 });
     }
 
     addIngredientHandler = (type) => {
@@ -58,7 +59,7 @@ class BurgerBuilder extends Component {
 
     removeIngredientHandler = (type) => {
         const oldCount = this.state.ingredients[type];
-        if (oldCount <= 0){
+        if (oldCount <= 0) {
             return;
         }
         const newCount = oldCount - 1;
@@ -69,7 +70,7 @@ class BurgerBuilder extends Component {
 
         const priceDeduction = INGREDIENT_PRICE[type];
         const oldPrice = this.state.totalPrice;
-        const newPrice = oldPrice - priceDeduction ;
+        const newPrice = oldPrice - priceDeduction;
         this.setState({
             totalPrice: newPrice,
             ingredients: updatedIngredients,
@@ -77,6 +78,10 @@ class BurgerBuilder extends Component {
         this.updatePurchaseState(updatedIngredients);
     }
 
+    purchaseHandler = () => {
+        this.setState({ purchasing: true });
+    }
+
     render() {
         const disabledInfo = {
             ...this.state.ingredients
@@ -88,13 +93,14 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
-                <Modal>
+                <Modal show={this.state.purchasing}>
                     <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />
                 <BuildControls
                     ingredientAdded={this.addIngredientHandler}
                     ingredientRemoved={this.removeIngredientHandler}
+                    ordered={this.purchaseHandler}
                     disabled={disabledInfo}
                     purchasable={this.state.purchasable}
                     price={this.state.totalPrice} />