Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import Aux from "../../hoc/Aux";
- import Burger from "../../components/Burger/Burger";
- import BuildControls from "../../components/Burger/BuildControls/BuildControls";
- const INGREDIENT_PRICES = {
- salad: 0.5,
- cheese: 0.4,
- meat: 1.3,
- bacon: 0.7
- };
- class BurgerBuilder extends Component {
- state = {
- ingredients: {
- salad: 0,
- bacon: 0,
- cheese: 0,
- meat: 0
- },
- totalPrice: 4,
- purchasable: false
- };
- updatePurchaseState(ingredients) {
- // const ingredients = {
- // ...this.state.ingredients
- // };
- //first convert the object to an array with keys function
- //secondly uses map to traverse the array and convert it to an array of numbers instead of an array of strings
- //third it uses reduce to sum these numbers
- const sum = Object.keys(ingredients)
- .map(igKey => {
- return ingredients[igKey];
- })
- .reduce((sum, el) => {
- return sum + el;
- }, 0);
- this.setState({ purchasable: sum > 0 });
- }
- addIngredientHandler = type => {
- // javascript: access the object properties using bracket notation for example ingredients['salad']
- const oldCount = this.state.ingredients[type];
- const updatedCount = oldCount + 1;
- const updatedIngredients = {
- ...this.state.ingredients
- };
- updatedIngredients[type] = updatedCount;
- //update price
- const priceAddition = INGREDIENT_PRICES[type];
- const oldPrice = this.state.totalPrice;
- const newPrice = oldPrice + priceAddition;
- //set state
- this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
- //call purchasable
- this.updatePurchaseState(updatedIngredients);
- }; //end of addIngredientHandler method
- removeIngredientHandler = type => {
- // javascript: access the object properties using bracket notation for example ingredients['salad']
- const oldCount = this.state.ingredients[type];
- //nothing happens when ingredient is zero
- if (oldCount <= 0) {
- return;
- }
- const updatedCount = oldCount - 1;
- const updatedIngredients = {
- ...this.state.ingredients
- };
- updatedIngredients[type] = updatedCount;
- //update price
- const priceDeduction = INGREDIENT_PRICES[type];
- const oldPrice = this.state.totalPrice;
- const newPrice = oldPrice - priceDeduction;
- //set state
- this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
- //call purchasable
- this.updatePurchaseState(updatedIngredients);
- }; //end of removeIngredientHandler method
- render() {
- //create an array of boolean values for the less button
- // we copy the state array to keep immutability
- const disabledInfo = {
- ...this.state.ingredients
- };
- //we traverse the array to convert it to an array of booleans
- for (let key in disabledInfo) {
- disabledInfo[key] = disabledInfo[key] <= 0;
- } // the result is {salad: true, meat: false, ...}
- return (
- <Aux>
- <Burger ingredients={this.state.ingredients} />
- <BuildControls
- ingredientAdded={this.addIngredientHandler}
- ingredientRemoved={this.removeIngredientHandler}
- disabled={disabledInfo}
- purchasable={this.state.purchasable}
- price={this.state.totalPrice}
- />
- </Aux>
- );
- }
- }
- export default BurgerBuilder;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement