{"size": 1639, "ext": "js", "max_stars_repo_path": "src/components/SignUp.js", "max_stars_repo_name": "mbade1/trail-run-planner-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/SignUp.js", "max_issues_repo_name": "mbade1/trail-run-planner-frontend", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/SignUp.js", "max_forks_repo_name": "mbade1/trail-run-planner-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.609375, "max_line_length": 77, "alphanum_fraction": 0.4966442953}
import React from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {signUpFetch} from "../actions/Actions";

class SignUp extends React.Component {
  constructor() {
    super();
    this.state = { user: "", password: "" };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.signUpFetch(this.state.user, this.state.password);
    this.props.history.push("/trail-run-planner-frontend/trails");
  };

  render() {
    return (
      <div className="SignUp">
        <div className="sign-up-form-container">
          <h1>Sign Up</h1>
          <form onSubmit={this.handleSubmit}>
            <p>
              <b>Username</b>:{" "}
              <input
                type="text"
                name="user"
                onChange={(event) => this.handleChange(event)}
                value={this.state.user}
              />
              <br />
              <br />
              <b>Password</b>:{" "}
              <input
                type="password"
                name="password"
                onChange={(event) => this.handleChange(event)}
                value={this.state.password}
              />
              <br />
              <br />
            </p>
            <input type="submit" value="Sign Up!"></input>
          </form>
        </div>
      </div>
    );
  }
}

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

export default withRouter(connect(mapStateToProps, { signUpFetch })(SignUp));