Working on the totalPrice's state in Redux STORE

Ch-sriram · Aug 25, 2020 · 0ef7cae · 0ef7cae
1 parent 5154a16
commit 0ef7cae
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -107,3 +107,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 2. Connecting the Redux **`STORE`** to the `<App />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/257c8bc90ad26b59efa9fa0f0020b293544825b3)
 3. Finishing the **`REDUCER`** for Ingredients: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/45a0123a382061ed1c7807bb39dc54c3f514b515)
 4. Connecting the `<BurgerBuilder />` Container to Redux `**STORE**`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/3425425c5be98d658f59f98d81296bb3724de573)
+5. Working on the `totalPrice`'s state in Redux STORE: [Commit Details]()
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.component.jsx b/src/containers/BurgerBuilder/BurgerBuilder.component.jsx
@@ -14,16 +14,8 @@ import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler.closur
 import axios from "../../axios-orders";
 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 {
   state = {
-    totalPrice: 4,
     purchasable: false,
     orderNow: false,
     loading: false,
@@ -37,27 +29,27 @@ class BurgerBuilder extends Component {
    * NOTE: we have to append `.json` at the end of the API
    * endpoint in case of firebase db.
    */
-  componentDidMount() {
-    axios.get("https://burger-builder-ram.firebaseio.com/ingredients.json")
-      .then(response => {
-        this.setState({ ingredients: response.data },
-          () => {
-            const purchasableInfo = { ...this.state.ingredients };
-            for (let key in purchasableInfo) {
-              if (this.state.purchasable) {
-                break;
-              }
-              if (purchasableInfo[key] > 0) {
-                this.setState({ purchasable: true });
-              }
-            }
-          });
-      })
-      .catch(error => {
-        this.setState({ error: true }, () => console.log(error));
-        return error;
-      });
-  }
+  // componentDidMount() {
+  //   axios.get("https://burger-builder-ram.firebaseio.com/ingredients.json")
+  //     .then(response => {
+  //       this.setState({ ingredients: response.data },
+  //         () => {
+  //           const purchasableInfo = { ...this.state.ingredients };
+  //           for (let key in purchasableInfo) {
+  //             if (this.state.purchasable) {
+  //               break;
+  //             }
+  //             if (purchasableInfo[key] > 0) {
+  //               this.setState({ purchasable: true });
+  //             }
+  //           }
+  //         });
+  //     })
+  //     .catch(error => {
+  //       this.setState({ error: true }, () => console.log(error));
+  //       return error;
+  //     });
+  // }
 
   updatePurchasableState() {
     const ingredients = { ...this.state.ingredients };
@@ -67,49 +59,6 @@ class BurgerBuilder extends Component {
     this.setState({ purchasable: sum > 0 });
   }
 
-  addIngredientHandler = (type) => {
-    const oldCount = this.state.ingredients[type];
-    const updatedCount = oldCount + 1;
-    const updatedIngredients = { ...this.state.ingredients };
-    updatedIngredients[type] = updatedCount;
-
-    const priceAddition = INGREDIENT_PRICES[type];
-    const oldPrice = this.state.totalPrice;
-    const newPrice = oldPrice + priceAddition;
-
-    this.setState(
-      {
-        totalPrice: newPrice,
-        ingredients: updatedIngredients,
-      },
-      () => {
-        this.updatePurchasableState();
-      }
-    );
-  };
-
-  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,
-      },
-      () => {
-        this.updatePurchasableState();
-      }
-    );
-  };
-
   orderNowHandler = () => {
     this.setState({ orderNow: true });
   };
@@ -142,7 +91,7 @@ class BurgerBuilder extends Component {
     let orderSummary = null,
         burger = this.state.error ? <p style={{textAlign: 'center'}}>Ingredients can't be loaded!</p> : <Spinner />;
 
-    if (this.state.ingredients) {
+    if (this.props.ings) {
       burger = (
         <Wrapper>
           <Burger ingredients={this.props.ings} />
@@ -151,7 +100,7 @@ class BurgerBuilder extends Component {
             ingredientRemoved={this.props.onIngredientRemoved}
             disabled={disabledInfo}
             purchasable={this.state.purchasable}
-            price={this.state.totalPrice}
+            price={this.props.price}
             ordered={this.orderNowHandler}
           />
         </Wrapper>
@@ -160,7 +109,7 @@ class BurgerBuilder extends Component {
       orderSummary = (
         <OrderSummary
           ingredients={this.props.ings}
-          price={this.state.totalPrice}
+          price={this.props.price}
           orderCancelled={this.orderCancelHandler}
           orderContinued={this.orderContinueHandler}
         />
@@ -183,7 +132,8 @@ class BurgerBuilder extends Component {
 // REDUX STORE SETUP
 const mapStateToProps = state => {
   return {
-    ings: state.ingredients
+    ings: state.ingredients,
+    price: state.totalPrice,
   }
 };
 

diff --git a/src/store/reducer.js b/src/store/reducer.js
@@ -1,10 +1,22 @@
 import * as actionTypes from "./actions";
 
 const initialState = {
-  ingredients: { salad: 0, bacon: 0, cheese: 0, meat: 0 },
+  ingredients: {
+    salad: 0,
+    bacon: 0,
+    cheese: 0,
+    meat: 0
+  },
   totalPrice: 4,
 };
 
+const INGREDIENT_PRICES = {
+  salad: 0.5,
+  cheese: 0.4,
+  meat: 1.3,
+  bacon: 0.7
+}
+
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case actionTypes.ADD_INGREDIENT:
@@ -13,7 +25,8 @@ const reducer = (state = initialState, action) => {
         ingredients: {
           ...state.ingredients,
           [action.ingredientName]: state.ingredients[action.ingredientName] + 1,
-        }
+        },
+        totalPrice: state.totalPrice + INGREDIENT_PRICES[action.ingredientName],
       };
 
     case actionTypes.REMOVE_INGREDIENT:
@@ -23,6 +36,7 @@ const reducer = (state = initialState, action) => {
           ...state.ingredients,
           [action.ingredientName]: state.ingredients[action.ingredientName] - 1,
         },
+        totalPrice: state.totalPrice - INGREDIENT_PRICES[action.ingredientName],
       };
 
     default: return state;