text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  import Order from '../../components/Order/Order';
  import axios from '../../axios';
  
  import * as actions from '../../store/actions/index';
  
  import withErrorHandler from '../../hoc/ErrorMessageHandler/ErrorMessageHandler';
  import Spinner from '../../components/UI/Spinner/Spinner';
  
  
  class Orders extends Component {
      state = {
          orders: [],
          loading: true
      }
  
      componentDidMount() {
          this.props.onFetchOrders(this.props.token, this.props.userId)
      }
  
      render() {
          let orders = <Spinner />
          if (!this.props.loading) {
              orders = (
                  this.props.orders && this.props.orders.map(item => 
                      <Order 
                          key={item.id} 
                          ingredients={item.ingredientes} 
                          price={+item.precio} />
                  )
              )
          }
  
          return (
              <div>
                  {orders}
              </div>
          )
      }
  }
  
  const mapStateToProps = state => {
      return {
          orders: state.order.orders,
          loading: state.order.loading,
          token: state.auth.idToken,
          userId: state.auth.userId
      }
  }
  
  const mapDispatchToProps = dispatch => {
      return {
          onFetchOrders: (token, userId) => dispatch(actions.fetchOrders(token, userId))
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(Orders, axios));