text: import React from 'react';
  import { connect } from 'react-redux';
  import { authenticate } from '../store';
  
  /**
   * COMPONENT
   */
  const AuthForm = (props) => {
    const { name, displayName, handleSubmit, error } = props;
  
    return (
      <div className="bg-primary ">
        <form
          onSubmit={handleSubmit}
          name={name}
          className="flexy p-4 bigz items-center font-semibold"
        >
          <div>
            <label className="px-2" htmlFor="username">
              <small>Username</small>
            </label>
            <input name="username" type="text" />
          </div>
          <div>
            <label className="px-2" htmlFor="password">
              <small>Password</small>
            </label>
            <input name="password" type="password" />
          </div>
          <div>
            <button
              type="submit"
              className="formbtn transition-colors duration-300    lg:ml-3 rounded-full text-xs font-semibold text-white uppercase py-2 px-8 items-center"
            >
              {displayName}
            </button>
          </div>
          {error && error.response && <div> {error.response.data} </div>}
        </form>
      </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.auth.error,
    };
  };
  
  // const mapSignup = state => {
  //   return {
  //     name: 'signup',
  //     displayName: 'Sign Up',
  //     error: state.auth.error
  //   }
  // }
  
  const mapDispatch = (dispatch) => {
    return {
      handleSubmit(evt) {
        evt.preventDefault();
        const formName = evt.target.name;
        const username = evt.target.username.value;
        const password = evt.target.password.value;
        dispatch(authenticate(username, password, formName));
      },
    };
  };
  
  export const Login = connect(mapLogin, mapDispatch)(AuthForm);
  // export const Signup = connect(mapSignup, mapDispatch)(AuthForm)
  