import React, { Component } from 'react';
import Header from '../components/login';
import Data from '../components/reservation_data';
import { connect } from 'react-redux';
import * as actConsult from '../_actions/consult';

class user_reservation extends Component {
  componentDidMount() {
    const data = JSON.parse(localStorage.getItem('credentials'));
    this.props.dispatch(actConsult.getConsult(data.token));
  }

  render() {
    const { data: consul } = this.props.consul;

    return (
      <>
        <Header />
        <div className='container margin-top pb-5'>
          <div className='row'>
            <div className='col'>
              <h5>Consultation</h5>
              {consul &&
                consul.length > 0 &&
                consul.map((item, index) => <Data item={item} key={index} />)}
            </div>
          </div>
        </div>
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    consul: state.consultation,
  };
};

export default connect(mapStateToProps)(user_reservation);