text: import React, {Fragment, useEffect, useState} from 'react'
  import {Link} from 'react-router-dom'
  import {useDispatch, useSelector} from 'react-redux'
  import {useAlert} from 'react-alert'
  
  import Loader from './Loader'
  import MetaData from './Metadata'
  import {register, clearErrors} from '../actions/userActions'
  
  
  const Register = ({history}) => {
  
      const [user, setUser] = useState({
          name: '',
          email: '',  
          password: ''  
      })
  
      const [avatar, setAvatar] = useState('')
      const [avatarPreview, setAvatarPreview] = useState('/images/default_avatar.png')
  
      const {name, email, password} = user
  
      const alert = useAlert()
      const dispatch = useDispatch()
  
      const {isAuthenticated, error, loading} = useSelector(state => state.auth)
  
      useEffect(() => {
  
          if(isAuthenticated){
              history.push('/')
          }
  
          if(error){
              alert.error(error)
              return dispatch(clearErrors())
          }
      }, [dispatch, alert, isAuthenticated, error, history])
  
      const submitHandler = (evt) => {
          evt.preventDefault()
  
          let formData = new FormData() 
          formData.set('name', name)
          formData.set('email', email)
          formData.set('password', password)
          formData.set('avatar', avatar)
       
          dispatch(register(formData))
      }
  
      const onChange = (evt) => {
          if(evt.target.name === 'avatar'){
              const reader = new FileReader()
  
              reader.onload = () => {
                  if(reader.readyState === 2){
                      setAvatarPreview(reader.result)
                      setAvatar(reader.result)
                  }
              }
  
              reader.readAsDataURL(evt.target.files[0])
  
          }else {
              setUser({...user, [evt.target.name]: evt.target.value})
          }
      }
  
      return (
          <div>
              <Fragment>
                  {loading ? <Loader />: (
                      <Fragment>
                          <MetaData title={'register'} />
  
                          <div className="row wrapper">
                              <div className="col-10 col-lg-5">
                                  <form className="shadow-lg" encType='multipart/form-data' onSubmit={submitHandler}>
                                      <h1 className="mb-3">Register</h1>
  
                                      <div className="form-group">
                                          <label htmlFor="email_field">Name</label>
                                          <input 
                                              type="name"
                                              id="name_field"
                                              className="form-control"
                                              name='name'
                                              value={name}
                                              onChange = {onChange}
                                          />
                                      </div>
  
                                      <div className="form-group">
                                          <label htmlFor="email_field">Email</label>
                                          <input
                                              type="email"
                                              id="email_field"
                                              className="form-control"
                                              name='email'
                                              value={email}
                                              onChange = {onChange}
                                          />
                                      </div>
                          
                                      <div className="form-group">
                                          <label htmlFor="password_field">Password</label>
                                          <input
                                              type="password"
                                              id="password_field"
                                              className="form-control"
                                              name='password'
                                              value={password}
                                              onChange = {onChange}
                                          />
                                      </div>
  
                                      <div className='form-group'>
                                          <label htmlFor='avatar_upload'>Avatar</label>
                                          <div className='d-flex align-items-center'>
                                              <div>
                                                  <figure className='avatar mr-3 item-rtl'>
                                                      <img
                                                          src={avatarPreview}
                                                          className='rounded-circle'
                                                          alt='Avatar Preview'
                                                      />
                                                  </figure>
                                              </div>
                                              <div className='custom-file'>
                                                  <input
                                                      type='file'
                                                      name='avatar'
                                                      className='custom-file-input'
                                                      id='customFile'
                                                      accepts='images/*'
                                                      onChange = {onChange}
                                                  />
                                                  <label className='custom-file-label' htmlFor='customFile'>
                                                      Choose Avatar
                                                  </label>
                                              </div>
                                          </div>
                                      </div>
                          
                                      <button
                                      id="register_button"
                                      type="submit"
                                      className="btn btn-block py-3"
                                      disabled = {loading ? true : false}
                                      >
                                      REGISTER
                                      </button>
                                  </form>
                              </div>
                          </div>
                      </Fragment>
                  )}
              </Fragment>
          </div>
      )
  }
  
  export default Register
  