text: import React, { useState, useEffect } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { useHistory } from 'react-router-dom';
  import {
    resetPasswordStart,
    resetUserState
  } from './../../redux/user/user.actions';
  
  import Buttons from './../forms/button';
  import FormInput from './../forms/form_input';
  
  import AuthWrapper from './../auth_wrapper';
  
  const mapState = ({ user }) => ({
    resetPasswordSuccess: user.resetPasswordSuccess,
    userErr: user.userErr
  });
  
  const EmailPassword = (props) => {
    const dispatch = useDispatch();
    const history = useHistory();
    const { resetPasswordSuccess, userErr } = useSelector(mapState);
    const [email, setEmail] = useState('');
    const [errors, setErrors] = useState([]);
  
    useEffect(() => {
      if (resetPasswordSuccess) {
        dispatch(resetUserState());
        history.push('/login');
      }
    }, [resetPasswordSuccess]);
  
    useEffect(() => {
      if (Array.isArray(userErr) && userErr.length > 0) {
        setErrors(userErr);
      }
    }, [userErr]);
  
    const handleSubmit = (e) => {
      e.preventDefault();
      dispatch(resetPasswordStart({ email }));
    };
  
    const configAuthWrapper = {
      headline: 'Email Password'
    };
  
    return (
      <AuthWrapper {...configAuthWrapper}>
        <div className='form__wrapper'>
          {errors.length > 0 && (
            <ul>
              {errors.map((e, i) => (
                <li key={i}>{e}</li>
              ))}
            </ul>
          )}
          <form onSubmit={handleSubmit}>
            <FormInput
              type='email'
              name='email'
              value={email}
              placeholder='Email'
              handleChange={(e) => setEmail(e.target.value)}
            />
            <Buttons type='submit'>Email Password</Buttons>
          </form>
        </div>
      </AuthWrapper>
    );
  };
  
  export default EmailPassword;
  