Handling Purchases & Updating the UI

README.md

@@ -128,3 +128,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 11. Working on Order **`ACTIONS`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d24c2cc486b23d0bc3d4d481c5451df39a48aa41)
 12. Redirect in `<ContactData />` to Improve UX: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/e114f5c158cd8a4383d643137b1b91e48471ccf7)
 13. Combining **`REDUCERS`** in **`[./store/reducers/order.js]`** & **`[./store/reducers/burgerBuilder.js]`**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/f521ec42f175146b165091e670d92f187534f0e7)
+14. Handling Purchases & Updating the UI: [Commit Details]()

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -12,29 +12,13 @@ import Wrapper from '../../components/UI/Wrapper/Wrapper.component';
 import Spinner from '../../components/UI/Spinner/Spinner.component';
 import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler.closureHOC';
 import axios from "../../axios-orders";
-import * as burgerBuilderActions from "../../store/actions/index"; // we can also omit the [index] from the path, webpack will automatically pick the default file in a directory as [index.js]
+import * as actions from "../../store/actions/index";
 
 class BurgerBuilder extends Component {
   state = {
     orderNow: false,
   };
 
-  /**
-   * In componentDidMount(), we are fetching some data from 
-   * the backend asynchronously, and so, we can fetch data
-   * in 2 ways.
-   *  > Way #1: Fetch data asynchronously at the component
-   *            level and then use an ACTION to REDUCE the
-   *            fetched data to the Redux STORE, thereby, 
-   *            handling the asynchronous code inside the 
-   *            component.
-   *  > Way #2: Fetch data asynchronously using redux-thunk
-   *            inside the respective ACTION CREATORS for the
-   *            respective ACTIONS we have Dispatched here.
-   * 
-   * For now, we'll use Way #2, to understand how Async Code 
-   * can be handled using `redux-thunk`.
-   */
   componentDidMount() {
     this.props.onInitIngredients();
   }
@@ -49,7 +33,11 @@ class BurgerBuilder extends Component {
 
   orderNowHandler = () => this.setState({ orderNow: true });
   orderCancelHandler = () => this.setState({ orderNow: false });
-  orderContinueHandler = () => this.props.history.push('/checkout');
+
+  orderContinueHandler = () => {
+    this.props.onInitPurchase();
+    this.props.history.push('/checkout')
+  };
 
   render() {
     const disabledInfo = { ...this.props.ings };
@@ -85,8 +73,6 @@ class BurgerBuilder extends Component {
       );
     }
 
-    // orderSummary = this.state.loading ? <Spinner /> : orderSummary;
-
     return (
       <Aux>
         <Modal show={this.state.orderNow} modalClosed={this.orderCancelHandler}>
@@ -110,10 +96,11 @@ const mapStateToProps = state => {
 // REDUX ACTIONs & Dispatch Calls
 const mapDispatchToProps = dispatch => {
   return {
-    onIngredientAdded: ingredientName => dispatch(burgerBuilderActions.addIngredient(ingredientName)),
-    onIngredientRemoved: ingredientName => dispatch(burgerBuilderActions.removeIngredient(ingredientName)),
-    onInitIngredients: () => dispatch(burgerBuilderActions.initIngredientsAsync()),
-  }
+    onIngredientAdded: ingredientName => dispatch(actions.addIngredient(ingredientName)),
+    onIngredientRemoved: ingredientName => dispatch(actions.removeIngredient(ingredientName)),
+    onInitIngredients: () => dispatch(actions.initIngredientsAsync()),
+    onInitPurchase: () => dispatch(actions.purchaseInit()),
+  };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(BurgerBuilder, axios));

src/containers/Checkout/Checkout.component.jsx

@@ -8,22 +8,6 @@ import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSumm
 import ContactData from './ContactData/ContactData.component';
 
 class Checkout extends Component {
-  // constructor(props) {
-  //   super(props);
-  //   const query = new URLSearchParams(this.props.location.search);
-  //   const ingredients = {};
-  //   let totalPrice = 0;
-  //   for (let param of query.entries()) {
-  //     // ['salad' : '1']  <-- each entry in query
-  //     if (param[0] === 'price') {
-  //       totalPrice = +param[1];
-  //     } else {
-  //       ingredients[param[0]] = +param[1];
-  //     }
-  //   }
-  //   this.state = { ingredients, totalPrice };
-  // }
-
   checkoutCancelledHandler = () => {
     this.props.history.goBack(); // goes back to the previous page in the browser's history
   }
@@ -32,19 +16,12 @@ class Checkout extends Component {
     this.props.history.replace('/checkout/contact-data');
   }
 
-  /**
-   * Whenever we try to access the "/checkout" route before
-   * building the Burger at "/" route, we would always get an
-   * error because the `ingredients` aren't loaded yet from the
-   * firebase backend. And so, we will make sure that we only
-   * show a Loading Spinner until ingredients are loaded, 
-   * otherwise we show the <CheckoutSummary /> Component below.
-   */
-
   render() {
+    const purchasedRedirect = this.props.ings && this.props.purchased ? <Redirect to="/" /> : null;
     let summary = !this.props.ings ? <Redirect to="/" />
       : (
         <div>
+          {purchasedRedirect}
           <CheckoutSummary
             ingredients={this.props.ings}
             checkoutCancelled={this.checkoutCancelledHandler}
@@ -60,7 +37,10 @@ class Checkout extends Component {
 }
 
 const mapStateToProps = state => {
-  return { ings: state.burgerBuilder.ingredients };
-}
+  return {
+    ings: state.burgerBuilder.ingredients,
+    purchased: state.order.purchased,
+  };
+};
 
 export default connect(mapStateToProps)(Checkout);

src/store/actions/actionTypes.js

@@ -8,3 +8,4 @@ export const FETCH_INGREDIENTS_FAILED = "FETCH_INGREDIENTS_FAILED";
 export const PURCHASE_BURGER_START = "PURCHASE_BURGER_START";
 export const PURCHASE_BURGER_SUCCESS = "PURCHASE_BURGER_SUCCESS";
 export const PURCHASE_BURGER_FAIL = "PURCHASE_BURGER_FAIL";
+export const PURCHASE_INIT = "PURCHASE_INIT";

src/store/actions/index.js

@@ -6,4 +6,5 @@ export {
 
 export {
   purchaseBurgerAsync,
+  purchaseInit,
 } from "./order";

src/store/actions/order.js

@@ -36,3 +36,9 @@ export const purchaseBurgerAsync = orderData => (
       });
   }
 );
+
+export const purchaseInit = () => {
+  return {
+    type: actionTypes.PURCHASE_INIT,
+  };
+}

src/store/reducers/order.js

@@ -3,10 +3,16 @@ import * as actionTypes from "../actions/actionTypes";
 const initialState = {
   orders: [],
   loading: false,
-}
+  purchased: false,
+};
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
+    case actionTypes.PURCHASE_INIT:
+      return {
+        ...state,
+        purchased: false,
+      };
     case actionTypes.PURCHASE_BURGER_START:
       return {
         ...state,
@@ -20,7 +26,8 @@ const reducer = (state = initialState, action) => {
       return {
         ...state,
         loading: false,
-        orders: state.orders.concat(newOrder)
+        purchased: true,
+        orders: state.orders.concat(newOrder),
       };
     case actionTypes.PURCHASE_BURGER_FAIL:
       return {