import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import {getHistoryOrders} from "../../../../../actions/actionCreator";
import UserCabinetGoodsElement from '../../userCabinetGoodsElement/userCabinetGoodsElement';
import style from './ordersHistory.module.sass';

const OrdersStyle = (props) => {

    useEffect(() => {
        props.getHistoryOrders();
    }, []);


    return(
        <div className={style.mainContainer}>
            <h1>Ваши заказы</h1>
            <div className={style.ordersHistoryContainer}>
                {
                    props.historyOrders.map((elem, index) => {
                      return (
                        <UserCabinetGoodsElement
                            simpleGoodsData={elem}
                            key={index}
                            typeElement={"historyOrdersElement"}
                        />
                      );
                    })
                }
            </div>
        </div>
    )
};

const mapStateToProps = state => {
  const {historyOrders} = state.historyOrdersReducers;

  return {
      historyOrders
  }
};

const mapDispatchToProps = dispatch => ({
   getHistoryOrders: () => (dispatch(getHistoryOrders()))
});

export default connect(mapStateToProps, mapDispatchToProps)(OrdersStyle);