text: import React from 'react'
  import {connect} from 'react-redux'
  import PropTypes from 'prop-types'
  import {auth} from '../store'
  // import {render} from 'enzyme'
  
  class AuthForm extends React.Component {
    constructor() {
      super()
      this.state = {
        email: '',
        password: ''
      }
      this.handleChange = this.handleChange.bind(this)
    }
  
    handleChange = event => {
      this.setState({
        [event.target.name]: event.target.value
      })
    }
  
    render() {
      console.log(this.props)
      const {name, displayName, handleSubmit, error} = this.props
      return (
        <div className="auth-form">
          <h3>{displayName}</h3>
          <form onSubmit={handleSubmit} name={name}>
            <div className="form-item">
              <label htmlFor="email">
                <small>Email</small>
              </label>
              <input name="email" type="text" onChange={this.handleChange} />
            </div>
            <div className="form-item">
              <label htmlFor="password">
                <small>Password</small>
              </label>
              <input
                name="password"
                type="password"
                onChange={this.handleChange}
              />
            </div>
            <div>
              <button className="submit-btn" type="submit">
                {displayName}
              </button>
            </div>
            {error && error.response && <div> {error.response.data} </div>}
          </form>
  
          {/* <a href="/auth/google">{displayName} with Google</a> */}
        </div>
      )
    }
  }
  
  /**
   * CONTAINER
   *   Note that we have two different sets of 'mapStateToProps' functions -
   *   one for Login, and one for Signup. However, they share the same 'mapDispatchToProps'
   *   function, and share the same Component. This is a good example of how we
   *   can stay DRY with interfaces that are very similar to each other!
   */
  const mapLogin = state => {
    return {
      name: 'login',
      displayName: 'Login',
      error: state.user.error
    }
  }
  
  const mapSignup = state => {
    return {
      name: 'signup',
      displayName: 'Sign Up',
      error: state.user.error
    }
  }
  
  const mapDispatch = dispatch => {
    return {
      handleSubmit(evt) {
        evt.preventDefault()
        const formName = evt.target.name
        const email = evt.target.email.value
        const password = evt.target.password.value
  
        dispatch(auth(email, password, formName))
      }
    }
  }
  
  export const Login = connect(mapLogin, mapDispatch)(AuthForm)
  export const Signup = connect(mapSignup, mapDispatch)(AuthForm)
  
  /**
   * PROP TYPES
   */
  AuthForm.propTypes = {
    name: PropTypes.string.isRequired,
    displayName: PropTypes.string.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    error: PropTypes.object
  }
  