SHARE
TWEET

Untitled

a guest Sep 21st, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2.  
  3. import Aux from "../../hoc/Aux";
  4.  
  5. import Burger from "../../components/Burger/Burger";
  6.  
  7. import BuildControls from "../../components/Burger/BuildControls/BuildControls";
  8.  
  9. const INGREDIENT_PRICES = {
  10.   salad: 0.5,
  11.   cheese: 0.4,
  12.   meat: 1.3,
  13.   bacon: 0.7
  14. };
  15.  
  16. class BurgerBuilder extends Component {
  17.   state = {
  18.     ingredients: {
  19.       salad: 0,
  20.       bacon: 0,
  21.       cheese: 0,
  22.       meat: 0
  23.     },
  24.     totalPrice: 4,
  25.     purchasable: false
  26.   };
  27.  
  28.   updatePurchaseState(ingredients) {
  29.     // const ingredients = {
  30.     //   ...this.state.ingredients
  31.     // };
  32.  
  33.     //first convert the object to an array with keys function
  34.     //secondly uses map to traverse the array and convert it to an array of numbers instead of an array of strings
  35.     //third it uses reduce to sum these numbers
  36.     const sum = Object.keys(ingredients)
  37.       .map(igKey => {
  38.         return ingredients[igKey];
  39.       })
  40.       .reduce((sum, el) => {
  41.         return sum + el;
  42.       }, 0);
  43.  
  44.     this.setState({ purchasable: sum > 0 });
  45.   }
  46.  
  47.   addIngredientHandler = type => {
  48.     // javascript: access the object properties using bracket notation for example ingredients['salad']
  49.     const oldCount = this.state.ingredients[type];
  50.  
  51.     const updatedCount = oldCount + 1;
  52.     const updatedIngredients = {
  53.       ...this.state.ingredients
  54.     };
  55.     updatedIngredients[type] = updatedCount;
  56.  
  57.     //update price
  58.     const priceAddition = INGREDIENT_PRICES[type];
  59.     const oldPrice = this.state.totalPrice;
  60.     const newPrice = oldPrice + priceAddition;
  61.  
  62.     //set state
  63.     this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
  64.  
  65.     //call purchasable
  66.     this.updatePurchaseState(updatedIngredients);
  67.   }; //end of addIngredientHandler method
  68.  
  69.   removeIngredientHandler = type => {
  70.     // javascript: access the object properties using bracket notation for example ingredients['salad']
  71.     const oldCount = this.state.ingredients[type];
  72.     //nothing happens when ingredient is zero
  73.     if (oldCount <= 0) {
  74.       return;
  75.     }
  76.     const updatedCount = oldCount - 1;
  77.     const updatedIngredients = {
  78.       ...this.state.ingredients
  79.     };
  80.     updatedIngredients[type] = updatedCount;
  81.  
  82.     //update price
  83.     const priceDeduction = INGREDIENT_PRICES[type];
  84.     const oldPrice = this.state.totalPrice;
  85.     const newPrice = oldPrice - priceDeduction;
  86.  
  87.     //set state
  88.     this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
  89.  
  90.     //call purchasable
  91.     this.updatePurchaseState(updatedIngredients);
  92.   }; //end of removeIngredientHandler method
  93.  
  94.   render() {
  95.     //create an array of boolean values for the less button
  96.     // we copy the state array to keep immutability
  97.     const disabledInfo = {
  98.       ...this.state.ingredients
  99.     };
  100.     //we traverse the array to convert it to an array of booleans
  101.     for (let key in disabledInfo) {
  102.       disabledInfo[key] = disabledInfo[key] <= 0;
  103.     } // the result is {salad: true, meat: false, ...}
  104.  
  105.     return (
  106.       <Aux>
  107.         <Burger ingredients={this.state.ingredients} />
  108.         <BuildControls
  109.           ingredientAdded={this.addIngredientHandler}
  110.           ingredientRemoved={this.removeIngredientHandler}
  111.           disabled={disabledInfo}
  112.           purchasable={this.state.purchasable}
  113.           price={this.state.totalPrice}
  114.         />
  115.       </Aux>
  116.     );
  117.   }
  118. }
  119.  
  120. export default BurgerBuilder;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top