text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { withRouter } from "react-router-dom";
  import { connect } from "react-redux";
  import { registerUser } from "../../actions/authAction";
  import TextFieldGroup from "../common/TextFieldGroup";
  
  class Register extends Component {
    constructor() {
      super();
      this.state = {
        name: "",
        email: "",
        password: "",
        passwordConfirm: "",
        errors: {}
      };
    }
  
    componentDidMount() {
      if (this.props.auth.isAuthenticated) {
        this.props.history.push("/dashboard");
      }
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.errors) {
        this.setState({ errors: nextProps.errors });
      }
    }
  
    onChange = e => {
      this.setState({ [e.target.name]: e.target.value });
    };
    onSubmit = e => {
      e.preventDefault();
      const newUser = {
        name: this.state.name,
        email: this.state.email,
        password: this.state.password,
        passwordConfirm: this.state.passwordConfirm
      };
      console.log(newUser);
  
      this.props.registerUser(newUser, this.props.history);
      //axios
      //  .post("/api/user/register", newUser)
      //  .then(res => console.log(res.data))
      //  .catch(err => this.setState({ errors: err.response.data }));
    };
  
    render() {
      const { errors } = this.state;
      return (
        <div className="register">
          <div className="container">
            <div className="row">
              <div className="col-md-8 m-auto">
                <h1 className="display-4 text-center">Sign Up</h1>
                <p className="lead text-center">Create your QuestCode account</p>
                <form onSubmit={this.onSubmit}>
                  <TextFieldGroup
                    placeholder="Name"
                    name="name"
                    value={this.state.name}
                    onChange={this.onChange}
                    error={errors.name}
                  />
                  <TextFieldGroup
                    placeholder="Email Address"
                    name="email"
                    type="email"
                    value={this.state.email}
                    onChange={this.onChange}
                    error={errors.email}
                    info="This site uses Gravatar so if you want a profile image, use a Gravatar email"
                  />
                  <TextFieldGroup
                    placeholder="Password"
                    name="password"
                    type="password"
                    value={this.state.password}
                    onChange={this.onChange}
                    error={errors.password}
                  />
                  <TextFieldGroup
                    placeholder="Password Confirm"
                    name="passwordConfirm"
                    type="password"
                    value={this.state.passwordConfirm}
                    onChange={this.onChange}
                    error={errors.passwordConfirm}
                  />
                  <input type="submit" className="btn btn-info btn-block mt-4" />
                </form>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  Register.propTypes = {
    registerUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
  };
  
  // this.props.errors
  // this.props.auth
  const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
  });
  
  export default connect(
    mapStateToProps,
    { registerUser }
  )(withRouter(Register));
  