section17ReduxAdvanceCompletion

Author: chlvbharath

package-lock.json

@@ -13,7 +13,8 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -8,24 +8,18 @@ import Modal from '../../components/UI/Modal/Modal'
 import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary'
 import axios from '../../axios-orders'
 import Spinner from '../../components/UI/Spinner/Spinner'
-import * as actionTypes from '../../store/actions';
+import * as actions from '../../store/actions/index';
 
 
 class BurgerBuilder extends Component {
     state = {
         purchasing: false,
-        loading: false,
-        error: false
+        // loading: false,
+        // error: false
     }
 
     componentDidMount() {
-        // axios.get('https://myburger-72558.firebaseio.com/ingredients.json')
-        //     .then(response => {
-        //         this.setState({ ingredients: response.data });
-        //     })
-        //     .catch(error => {
-        //         this.setState({error: true});
-        //     })
+        this.props.onInitIngedients();
     }
 
     updatePurchaseState(ingredients) {
@@ -36,7 +30,6 @@ class BurgerBuilder extends Component {
             .reduce((sum, curVal) => {
                 return sum = sum + curVal;
             }, 0);
-        debugger;
         return sum > 0;
     }
 
@@ -49,7 +42,7 @@ class BurgerBuilder extends Component {
     }
 
     purchaseContiueHandler = () => {
-        
+        this.props.onInitPurchase();
         this.props.history.push({
             pathname:'/checkout'            
         });
@@ -62,7 +55,7 @@ class BurgerBuilder extends Component {
         for (let key in disabledInfo) {
             disabledInfo[key] = disabledInfo[key] <= 0;
         }
-        let burger = this.state.error ? <p>Ingredients can't be loaded</p> : <Spinner/>
+        let burger = this.props.error ? <p>Ingredients can't be loaded</p> : <Spinner/>
         let orderSummary =  null;
         if(this.props.ings){
             burger = (
@@ -86,9 +79,9 @@ class BurgerBuilder extends Component {
             continuePurchase={this.purchaseContiueHandler} />;
         }
 
-        if (this.state.loading) {
-            orderSummary = <Spinner />;
-        }
+        // if (this.state.loading) {
+        //     orderSummary = <Spinner />;
+        // }
 
         return (
             <Aux>
@@ -103,20 +96,17 @@ class BurgerBuilder extends Component {
 
 const mapStateToProps = (state) => {
     return {
-        ings: state.ingredients,
-        totalSum : state.totalPrice
+        ings: state.burgerBuilder.ingredients,
+        totalSum : state.burgerBuilder.totalPrice,
+        error: state.burgerBuilder.error
     }
 }
 const mapDispatchToProps = dispath => {
     return {
-        onIngredientAdded : (ingName) => dispath({
-            type: actionTypes.ADD_INGREDIENTS,
-            ingredientName: ingName
-        }),
-        onIngredientRemoved : (ingName) => dispath({
-            type: actionTypes.REMOVE_INGREDIENTS,
-            ingredientName: ingName
-        })
+        onIngredientAdded : (ingName) => dispath(actions.addIngredient(ingName)),
+        onIngredientRemoved : (ingName) => dispath(actions.removeIngredient(ingName)),
+        onInitIngedients: () => dispath(actions.initIngredients()),
+        onInitPurchase: () => dispath(actions.purchaseInit())
     }
 }
 export default connect(mapStateToProps, mapDispatchToProps)( WithErrorHandler(BurgerBuilder, axios))

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
+import { Route, Redirect } from 'react-router-dom'
 import {connect} from 'react-redux'
 import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSummary'
 import ContactData from './ContactData/ContactData'
@@ -24,6 +24,7 @@ class Checkout extends Component {
     //     this.setState({ingredients:ingredients, price: price});
     // }
 
+
     checkoutCancelHandler = () => {
         this.props.history.goBack();
     }
@@ -32,24 +33,34 @@ class Checkout extends Component {
     }
 
     render(){
-        return(
-            <div>
-                <CheckoutSummary 
-                    ingredients={this.props.ings}
-                    checkoutCancelled = {this.checkoutCancelHandler}
-                    checkoutContinued = {this.checkoutContinueHandler}
+        let summary = <Redirect to="/"/>
+        
+        if (this.props.ings) {
+            const purchasedRedirect = this.props.purchased ?  <Redirect to= "/"/> : null;
+            summary = (
+                <div>
+                    {purchasedRedirect}
+                    <CheckoutSummary
+                        ingredients={this.props.ings}
+                        checkoutCancelled={this.checkoutCancelHandler}
+                        checkoutContinued={this.checkoutContinueHandler}
                     />
-                <Route
-                path={this.props.match.path + '/contact-data'}
-                component = {ContactData} />
-            </div>
-        )
+                    <Route
+                        path={this.props.match.path + '/contact-data'}
+                        component={ContactData} />
+
+                </div>);
+        }
+        return summary;
     }
 }
 
 const mapStateToProps = (state) => {
     return {
-        ings: state.ingredients,
+        ings: state.burgerBuilder.ingredients,
+        purchased: state.order.purchased
     }
 }
+
+
 export default connect(mapStateToProps)(Checkout);