import React, { Component } from 'react';
import { connect } from 'react-redux';
import Header from './Header';
import UserAvatar from './UserAvatar';
import EventsSection from './UserEvents';
import { addUser } from '../actions/userActions';

class EventDashboardPage extends Component {
  componentDidMount = () => {
    this.props.dispatch(addUser());
    // this.setState({ imageSrc: res.url });
  }

  render() {
    console.log(this.props, 'thisprops in render');
    return (
      <React.Fragment>
        <Header/>
        <main className='main'>
          <div className='row'>
            <div className='container'>
              <UserAvatar userData={this.props.userData} />
              <EventsSection />
            </div>
          </div>
        </main>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state, 'mapstatetoprops');
  return {
    events: state.events,
    userData: state.userData
  };
};

export default connect(mapStateToProps)(EventDashboardPage);