container: remove ingredient safely by passing disabledInfo

src/components/Burger/BuildControls/BuildControl/BuildControl.js

@@ -5,8 +5,13 @@ import classes from './BuildControl.css';
 const buildControl = (props) => (
     <div className={classes.BuildControl}>
         <div className={classes.Label}>{props.name}</div>
-        <button className={classes.Less}>Less</button>
-        <button className={classes.More} onClick={props.added}>More</button>
+        <button
+            className={classes.Less}
+            onClick={props.removed}
+            disabled={props.disabled}>Less</button>
+        <button
+            className={classes.More}
+            onClick={props.added}>More</button>
     </div>
 )
 

src/components/Burger/BuildControls/BuildControls.js

@@ -16,7 +16,9 @@ const buildControls = (props) => (
             <BuildControl 
             key={ctrl.name} 
             name={ctrl.name} 
-            added={() => props.ingredientAdded(ctrl.type) }/>
+            added={() => props.ingredientAdded(ctrl.type) }
+            removed={() => props.ingredientRemoved(ctrl.type)}
+            disabled={props.disabled[ctrl.type]} />
         ))}
     </div>
 )

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -32,7 +32,8 @@ class BurgerBuilder extends Component {
         updatedIngredient[type] = newCount;
 
         const priceAddition = INGREDIENT_PRICE[type];
-        const newPrice = this.state.totalPrice + priceAddition;
+        const oldPrice = this.state.totalPrice;
+        const newPrice = oldPrice + priceAddition;
         this.setState({
             totalPrice: newPrice,
             ingredients: updatedIngredient,
@@ -40,15 +41,41 @@ class BurgerBuilder extends Component {
     }
 
     removeIngredientHandler = (type) => {
+        const oldCount = this.state.ingredients[type];
+        if (oldCount <= 0){
+            return;
+        }
+        const newCount = oldCount - 1;
+        const updatedIngredient = {
+            ...this.state.ingredients,
+        };
+        updatedIngredient[type] = newCount;
 
+        const priceDeduction = INGREDIENT_PRICE[type];
+        const oldPrice = this.state.totalPrice;
+        const newPrice = oldPrice - priceDeduction ;
+        this.setState({
+            totalPrice: newPrice,
+            ingredients: updatedIngredient,
+        });
     }
 
     render() {
+        const disabledInfo = {
+            ...this.state.ingredients
+        };
+
+        for (let key in disabledInfo) {
+            disabledInfo[key] = disabledInfo[key] <= 0;
+        }
+
         return (
             <Aux>
                 <Burger ingredients={this.state.ingredients}  />
                 <BuildControls 
-                    ingredientAdded={this.addIngredientHandler} />
+                    ingredientAdded={this.addIngredientHandler} 
+                    ingredientRemoved={this.removeIngredientHandler}
+                    disabled={disabledInfo} />
             </Aux>
         );
     };