Skip to main content

15.05 Connecting Burger Builder Container To Our Store

BurgerBuilder.js

BurgerBuilder.js
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import axios from "../../axios-orders";
import BuildControls from "../../components/Burger/BuildControls/BuildControls";
import Burger from "../../components/Burger/Burger";
import OrderSummary from "../../components/Burger/OrderSummary/OrderSummary";
import Modal from "../../components/UI/Modal/Modal";
import Spinner from "../../components/UI/Spinner/Spinner";
import withErrorHandler from "../../hoc/withErrorHandler/withErrorHandler";
import * as actionTypes from "../../store/actions";

const INGREDIENT_PRICES = {
salad: 0.5,
cheese: 0.4,
meat: 1.3,
bacon: 0.7,
};

class BurgerBuilder extends Component {
// constructor(props) {
// super(props);
// this.state = {...}
// }
state = {
totalPrice: 4,
purchasable: false,
purchasing: false,
loading: false,
error: false,
};

componentDidMount() {
console.log(this.props);
// axios
// .get(
// "https://react-burger-bf7e8-default-rtdb.europe-west1.firebasedatabase.app/ingregients.json"
// )
// .then((response) => {
// this.setState({ ingredients: response.data });
// })
// .catch((error) => {
// this.setState({ error: true });
// });
}

updatePurchaseState(ingredients) {
const sum = Object.keys(ingredients)
.map((igKey) => {
return ingredients[igKey];
})
.reduce((sum, el) => {
return sum + el;
}, 0);
this.setState({ purchasable: sum > 0 });
}

addIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
const updateCount = oldCount + 1;
const updatedIngredients = {
...this.state.ingredients,
};
updatedIngredients[type] = updateCount;
const priceAddition = INGREDIENT_PRICES[type];
const oldPrice = this.state.totalPrice;
const newPrice = oldPrice + priceAddition;
this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
this.updatePurchaseState(updatedIngredients);
};

removeIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
if (oldCount <= 0) {
return;
}
const updateCount = oldCount - 1;
const updatedIngredients = {
...this.state.ingredients,
};
updatedIngredients[type] = updateCount;
const priceDeduction = INGREDIENT_PRICES[type];
const oldPrice = this.state.totalPrice;
const newPrice = oldPrice - priceDeduction;
this.setState({ totalPrice: newPrice, ingredients: updatedIngredients });
this.updatePurchaseState(updatedIngredients);
};

purchaseHandler = () => {
this.setState({ purchasing: true });
};

purchaseCancelHandler = () => {
this.setState({ purchasing: false });
};

purchaseContinueHandler = () => {
// alert("You continue!");

const queryParams = [];
for (let i in this.state.ingredients) {
queryParams.push(
encodeURIComponent(i) +
"=" +
encodeURIComponent(this.state.ingredients[i])
);
}
queryParams.push("price=" + this.state.totalPrice);
const queryString = queryParams.join("&");

this.props.history.push({
pathname: "/checkout",
search: "?" + queryString,
});
};
render() {
const disabledInfo = {
...this.props.ings,
};

for (let key in disabledInfo) {
disabledInfo[key] = disabledInfo[key] <= 0;
}
let orderSummary = null;

let burger = this.state.error ? (
<p>Ingredients can't be loaded!</p>
) : (
<Spinner />
);

if (this.props.ings) {
burger = (
<Fragment>
<Burger ingredients={this.props.ings} />
<BuildControls
ingredientAdded={this.props.onIgredientAdded}
ingredientRemoved={this.props.onIgredientRemoved}
disabled={disabledInfo}
purchasable={this.state.purchasable}
ordered={this.purchaseHandler}
price={this.state.totalPrice}
/>
</Fragment>
);

orderSummary = (
<OrderSummary
ingredients={this.props.ings}
purchaseCancelled={this.purchaseCancelHandler}
purchaseContinued={this.purchaseContinueHandler}
price={this.state.totalPrice}
/>
);
}
if (this.state.loading) {
orderSummary = <Spinner />;
}
return (
<Fragment>
<Modal
show={this.state.purchasing}
modalClosed={this.purchaseCancelHandler}
>
{orderSummary}
</Modal>
{burger}
</Fragment>
);
}
}

const mapStateToProps = (state) => {
return {
ings: state.ingredients,
};
};

const mapDispatchToProps = (dispatch) => {
return {
onIgredientAdded: (ingName) =>
dispatch({ type: actionTypes.ADD_INGREDIENT, ingredientName: ingName }),
onIgredientRemoved: (ingName) =>
dispatch({
type: actionTypes.REMOVE_INGREDIENT,
ingredientName: ingName,
}),
};
};

export default connect(
mapStateToProps,
mapDispatchToProps
)(withErrorHandler(BurgerBuilder, axios));

reducer.js

reducer.js
import * as actionTypes from "./actions";

const initialState = {
ingredients: {
salad: 0,
bacon: 0,
cheese: 0,
meat: 0,
},
totalPrice: 4,
}

const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.ADD_INGREDIENT:
return {
...state,
ingredients: {
...state.ingredients,
[action.ingredientName]: state.ingredients[action.ingredientName] + 1,
},
};
case actionTypes.REMOVE_INGREDIENT:
return {
...state,
ingredients: {
...state.ingredients,
[action.ingredientName]: state.ingredients[action.ingredientName] - 1,
},
};
default:
return state;
}
};

export default reducer;