added new actions

react-the-complete-guide/burger-builder/src/containers/Checkout/Checkout.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSummary';
-import { Route } from 'react-router-dom';
+import { Route, Redirect } from 'react-router-dom';
 import ContactData from './ContactData/ContactData';
 import { connect } from 'react-redux';
 
+
 class Checkout extends Component {
 
   checkoutCancelledHandler = () => {
@@ -15,17 +16,22 @@ class Checkout extends Component {
   }
 
   render() {
-    return (
-      <div>
-        <CheckoutSummary
-          ingredients={this.props.ings}
-          checkoutCancelled={this.checkoutCancelledHandler}
-          checkoutContinued={this.checkoutContinuedHandler} />
-        <Route
-          path={this.props.match.path + '/contact-data'}
-          component={ContactData} />
-      </div>
-    )
+    let summary = <Redirect to="/" />
+
+    if (this.props.ings) {
+      summary = (
+        <div>
+          <CheckoutSummary
+            ingredients={this.props.ings}
+            checkoutCancelled={this.checkoutCancelledHandler}
+            checkoutContinued={this.checkoutContinuedHandler} />;
+          <Route
+            path={this.props.match.path + '/contact-data'}
+            component={ContactData} />
+        </div>
+      );
+    }
+    return summary;
   }
 }
 

react-the-complete-guide/burger-builder/src/containers/Checkout/ContactData/ContactData.js

@@ -5,6 +5,8 @@ import axios from '../../../axios-orders';
 import Spinner from '../../../components/UI/Spinner/Spinner';
 import Input from '../../../components/UI/Input/Input';
 import { connect } from 'react-redux';
+import withErrorHandler from '../../../hoc/withErrorHandler/withErrorHandler';
+import * as actions from '../../../store/actions/index';
 
 class ContactData extends Component {
 
@@ -90,15 +92,12 @@ class ContactData extends Component {
         valid: true
       }
     },
-    formIsValid: false,
-    loading: false
+    formIsValid: false
   }
 
   orderHandler = (event) => {
     event.preventDefault();
 
-    this.setState({ loading: true });
-
     const formData = {};
     for (let formElementIdentifier in this.state.orderForm) {
       formData[formElementIdentifier] = this.state.orderForm[formElementIdentifier].value;
@@ -109,7 +108,8 @@ class ContactData extends Component {
       price: this.props.price,
       orderData: formData
     }
-
+
+    this.props.onOrderBurger(order);
   }
 
   checkValidity(value, rules) {
@@ -183,7 +183,7 @@ class ContactData extends Component {
         <Button btnType="Success" clicked={this.orderHandler} disabled={!this.state.formIsValid}>Order</Button>
       </form>
     );
-    if (this.state.loading) {
+    if (this.props.loading) {
       form = <Spinner />
     }
 
@@ -199,8 +199,15 @@ class ContactData extends Component {
 const mapStateToProps = state => {
   return {
     ings: state.ingredients,
-    price: state.totalPrice
+    price: state.totalPrice,
+    loading: state.loading
   }
 };
 
-export default connect(mapStateToProps)(ContactData);
+const mapDispatchToProps = dispatch => {
+  return {
+    onOrderBurger: (orderData) => dispatch(actions.purchaseBurger())
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(ContactData, axios));

react-the-complete-guide/burger-builder/src/store/actions/actionTypes.js

@@ -3,5 +3,6 @@ export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
 export const SET_INGREDIENTS = 'SET_INGREDIENTS';
 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';

react-the-complete-guide/burger-builder/src/store/actions/index.js

@@ -3,4 +3,4 @@ export {
   removeIngredient,
   initIngredients
 } from './burgerBuilder';
-export { } from './order';
+export { purchaseBurger } from './order';

react-the-complete-guide/burger-builder/src/store/actions/order.js

@@ -16,8 +16,16 @@ export const purchaseBurgerFail = (error) => {
   };
 };
 
-export const purchaseBurgerStart = (orderData) => {
+export const purchaseBurgerStart = () => {
+  return {
+    type: actionTypes.PURCHASE_BURGER_START
+  };
+};
+
+export const purchaseBurger = (orderData) => {
   return dispatch => {
+    dispatch(purchaseBurgerStart());
+
     axios.post('/orders.json', orderData)
       .then(response => {
         dispatch(purchaseBurgerSuccess(response.data, orderData));

react-the-complete-guide/burger-builder/src/store/reducers/order.js

@@ -0,0 +1,34 @@
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+  orders: [],
+  loading: false
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case actionTypes.PURCHASE_BURGER_START:
+      return {
+        ...state,
+        loading: true
+      };
+    case actionTypes.PURCHASE_BURGER_SUCCESS:
+      const newOrder = {
+        ...action.orderData,
+        id: action.orderId
+      }
+      return {
+        ...state,
+        loading: false,
+        orders: state.orders.concat(newOrder)
+      };
+    case actionTypes.PURCHASE_BURGER_FAIL:
+      return {
+        ...state,
+        loding: false
+      };
+    default: return state;
+  }
+};
+
+export default reducer;