Moved fetching orders to redux

src/containers/Orders/Orders.js

@@ -1,48 +1,49 @@
 import React, {Component} from 'react';
 import axios from '../../axios-orders';
+import {connect} from 'react-redux';
 
 import Order from '../../components/Order/Order';
 import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler';
+import * as actions from '../../store/actions/index';
+import Spinner from '../../components/UI/Spinner/Spinner';
 
 class Orders extends Component {
-    state = {
-        orders: [],
-        loading: true
-    }
-
     componentDidMount() {
-        axios.get('/orders.json')
-            .then(res => {
-                const fetchedOrders = [];
-                for (let key in res.data) {
-                    fetchedOrders.push({
-                        id: key,
-                        ...res.data[key]
-                    });
-                }
-                this.setState({
-                    loading: false,
-                    orders: fetchedOrders
-                });
-            })
-            .catch(err => {
-                this.setState({loading: false});
-            });
+        this.props.onFetchOrders();
     }
 
     render() {
-        return (
-            <div>
-                {this.state.orders.map(order => (
-                    <Order 
-                        key={order.id}
-                        ingredients={order.ingredients}
-                        price={order.price}
-                    />
-                ))}
-            </div>
-        );
+        let orders = <Spinner />;
+
+        if (!this.props.loading) {
+            orders = (
+                <div>
+                    {this.props.orders.map(order => (
+                        <Order 
+                            key={order.id}
+                            ingredients={order.ingredients}
+                            price={order.price}
+                        />
+                    ))}
+                </div>
+            );
+        }
+
+        return orders;
     }
 }
 
-export default withErrorHandler(Orders, axios);
+const mapStateToProps = state => {
+    return {
+        orders: state.order.orders,
+        loading: state.order.loading
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onFetchOrders: () => dispatch(actions.fetchOrders())
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(Orders, axios));

src/store/actions/actionTypes.js

@@ -7,3 +7,7 @@ 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_BURGER_INIT = 'PURCHASE_INIT';
+
+export const FETCH_ORDERS_START = 'FETCH_ORDERS_START';
+export const FETCH_ORDERS_SUCCESS = 'FETCH_ORDERS_SUCCESS';
+export const FETCH_ORDERS_FAIL = 'FETCH_ORDERS_FAIL';

src/store/actions/index.js

@@ -6,5 +6,6 @@ export {
 
 export {
     purchaseBurger,
-    purchaseBurgerInit
+    purchaseBurgerInit,
+    fetchOrders
 } from './order';

src/store/actions/order.js

@@ -40,3 +40,43 @@ export const purchaseBurgerInit = () => {
         type: actionTypes.PURCHASE_BURGER_INIT
     };
 };
+
+export const fetchOrdersSuccess = (orders) => {
+    return {
+        type: actionTypes.FETCH_ORDERS_SUCCESS,
+        orders: orders
+    };
+};
+
+export const fetchOrdersFail = (error) => {
+    return {
+        type: actionTypes.FETCH_ORDERS_FAIL,
+        error: error
+    };
+};
+
+export const fetchOrdersStart = () => {
+    return {
+        type: actionTypes.FETCH_ORDERS_START
+    };
+};
+
+export const fetchOrders = () => {
+    return dispatch => {
+        dispatch(fetchOrdersStart());
+        axios.get('/orders.json')
+            .then(res => {
+                const fetchedOrders = [];
+                for (let key in res.data) {
+                    fetchedOrders.push({
+                        id: key,
+                        ...res.data[key]
+                    });
+                }
+                dispatch(fetchOrdersSuccess(fetchedOrders));
+            })
+            .catch(err => {
+                dispatch(fetchOrdersFail(err));
+            });
+    };
+};

src/store/reducers/order.js

@@ -22,6 +22,15 @@ const reducer = (state = initialState, action) => {
         case actionTypes.PURCHASE_BURGER_FAIL:
             updatedState = purchaseBurgerFail(state, action, updatedState);
             break;
+        case actionTypes.FETCH_ORDERS_START:
+            updatedState = fetchOrdersStart(state, action, updatedState);
+            break;
+        case actionTypes.FETCH_ORDERS_SUCCESS:
+            updatedState = fetchOrdersSuccess(state, action, updatedState);
+            break;
+        case actionTypes.FETCH_ORDERS_FAIL:
+            updatedState = fetchOrdersFail(state, action, updatedState);
+            break;
         default:
             console.log("[Order Reducer] Action default case");
             break;
@@ -58,3 +67,19 @@ const purchaseBurgerFail = (state, action, updatedState) => {
     updatedState.loading = false;
     return updatedState;
 }
+
+const fetchOrdersStart = (state, action, updatedState) => {
+    updatedState.loading = true;
+    return updatedState;
+}
+
+const fetchOrdersSuccess = (state, action, updatedState) => {
+    updatedState.loading = false;
+    updatedState.orders = action.orders;
+    return updatedState;
+}
+
+const fetchOrdersFail = (state, action, updatedState) => {
+    updatedState.loading = false;
+    return updatedState;
+}