text: import React, { Fragment, useState } from "react";
  import { connect } from "react-redux";
  import { Link, Redirect } from "react-router-dom";
  import { setAlert } from "../../actions/alert";
  import { register } from "../../actions/auth";
  
  import PropTypes from "prop-types";
  
  const Register = ({ setAlert, register, isAuthenticated }) => {
    const [formData, setFormData] = useState({
      name: "",
      email: "",
      password: "",
      password2: ""
    });
  
    const onChange = e =>
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = async e => {
      e.preventDefault();
      if (password !== password2) {
        setAlert("Passwords do not match", "danger");
      } else {
        console.log(" passwords match");
        await register({ name, email, password });
      }
    };
  
    // Redirect if logged in
    if (isAuthenticated) {
      return <Redirect to="/dashboard" />;
    }
  
    const { name, email, password, password2 } = formData;
  
    return (
      <Fragment>
        <section class="container">
          <h1 class="large text-primary">Sign Up</h1>
          <p class="lead">
            <i class="fas fa-user"></i> Create Your Account
          </p>
          <form class="form" onSubmit={e => onSubmit(e)}>
            <div class="form-group">
              <input
                type="text"
                placeholder="Name"
                name="name"
                value={name}
                onChange={e => onChange(e)}
                required
              />
            </div>
            <div class="form-group">
              <input
                type="email"
                placeholder="Email Address"
                name="email"
                value={email}
                onChange={e => onChange(e)}
                required
              />
              <small class="form-text">
                This site uses Gravatar so if you want a profile image, use a
                Gravatar email
              </small>
            </div>
            <div class="form-group">
              <input
                type="password"
                placeholder="Password"
                name="password"
                minLength="6"
                value={password}
                onChange={e => onChange(e)}
                required
              />
            </div>
            <div class="form-group">
              <input
                type="password"
                placeholder="Confirm Password"
                name="password2"
                minLength="6"
                value={password2}
                onChange={e => onChange(e)}
                required
              />
            </div>
            <input type="submit" class="btn btn-primary" value="Register" />
          </form>
          <p class="my-1">
            Already have an account?<Link to="login"> Sign In</Link>
          </p>
        </section>
      </Fragment>
    );
  };
  
  const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
  });
  
  Register.PropType = {
    setAlert: PropTypes.func.isRequired,
    register: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
  };
  
  // first state, second object with actions
  export default connect(mapStateToProps, { setAlert, register })(Register);
  