import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { signup } from '../../redux/modules/Auth/actions';
import SignupForm from './SignupForm';

class Signup extends Component {

  static contextTypes = {
    router: PropTypes.object
  }

  handleSignup = data => {
    this.props.signup({ user: data }, this.context.router)
  }

  render() {

    return (
      <div>
        <h1>Sign Up</h1>
        <SignupForm onSubmit={this.handleSignup} errors={this.props.authErrors} />
      </div>
    )
  }
}

const mapStateToProps = state => {
  return { authErrors: state.auth.errors }
}

export default connect(mapStateToProps, { signup })(Signup);
