Removing Ingredients Safely using the removeIngredientHandler()

README.md

@@ -24,4 +24,5 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 9. Adding the `<BuildControl />` & `<BuildControls />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/2c9be483093bc2f9015799e04844cda739f5d699)
 10. Outputting Multiple `<BuildControl />` components using the `<BuildControls />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/ab893618efaf7013c49acc06cdb1b11d8af72d29)
 11. Connecting `state` to each `<BuildControl />` & `<BuildControls />` Component
-    1. Adding `onClick` handler to the `More` button: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/bd206d7166ba60336acf25803fc2e01047b85485)
+    1. Adding Ingredients Dynamically &mdash; Connecting `onClick` handler to the `More` button: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/bd206d7166ba60336acf25803fc2e01047b85485)
+    2. Removing Ingredients Safely &mdash; Connecting `onClick` handler to the `Less` button: [Commit Details]()

src/components/Burger/BuildControls/BuildControl/BuildControl.component.jsx

@@ -7,8 +7,13 @@ import { BuildControl, Label } from './BuildControl.styled';
 const buildControl = props => (
   <BuildControl>
     <Label>{props.label}</Label>
-    <button className="Less">Less</button>
-    <button className="More" onClick={props.added}>More</button>
+    <button
+      className="Less"
+      onClick={props.removed}
+      disabled={props.disabled}>Less</button>
+    <button
+      className="More"
+      onClick={props.added}>More</button>
   </BuildControl>
 );
 

src/components/Burger/BuildControls/BuildControls.component.jsx

@@ -19,6 +19,8 @@ const buildControls = props => (
         key={control.label}
         label={control.label}
         added={() => props.ingredientAdded(control.type)}
+        removed={() => props.ingredientRemoved(control.type)}
+        disabled={props.disabled[control.type]}
       />
     ))}
   </BuildControls>

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -40,12 +40,36 @@ class BurgerBuilder extends Component {
     });
   };
 
+  removeIngredientHandler = type => {
+    const oldCount = this.state.ingredients[type];
+    if (oldCount <= 0) return;
+    const updatedCount = oldCount - 1;
+    const updatedIngredients = { ...this.state.ingredients };
+    updatedIngredients[type] = updatedCount;
+
+    const priceDeduction = INGREDIENT_PRICES[type];
+    const oldPrice = this.state.totalPrice;
+    const newPrice = oldPrice - priceDeduction;
+
+    this.setState({
+      totalPrice: newPrice,
+      ingredients: updatedIngredients
+    });
+  };
+
   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}
+          ingredientRemoved={this.removeIngredientHandler}
+          disabled={disabledInfo}
         />
       </Aux>
     );