# Settle of things to use in an utils folder + a form validated

email-validation.js

const emailValidation =  email => /\S+@\S+\.\S+/.test(email) ? true : false;

export default emailValidation

errors-constants.js

export default {
  EMPTY_FIELD: 'EMPTY_FIELD',
  INVALID_EMAIL: 'INVALID_EMAIL',
  EMPTY_NAME: 'EMPTY_NAME',
  EMPTY_PHONE: 'EMPTY_PHONE',
  EMPTY_MESSAGE: 'EMPTY_MESSAGE',
  EMPTY_STATE: 'EMPTY_STATE',
  EMPTY_CITY: 'EMPTY_CITY',
  EMPTY_CALL_REASON: 'EMPTY_CALL_REASON',
  REQUIRED_MESSAGE: 'Campo requerido.',
  INVALID_EMAIL_MESSAGE: 'E-mail inválido',
  INVALID_NUMBER_MESSAGE: 'Número inválido'
}

form_with_validations.js

import React, { Component } from 'react';
import { postContact, postContactWithAFilea } from  '../../services/inst-contato';
import getCities from '../../utils/selectors/getCities';
import statesAPI from '../../utils/statesAPI';
import key from '../../utils/keysToArrays';
import statesConstants from '../../utils/constants/statesConstants';
import errorsConstants from '../../utils/constants/errors';
import emailValidation from '../../utils/validations/email';
import phoneValidation from '../../utils/validations/phone';
import InputMask from 'react-input-mask';

class InstContato extends Component {
  constructor() {
    super();
    this.state = {
      data: this.defaultData,
      file: '',
      errors: { },
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  defaultData = {
    motivodocontato: '',
    nome: '',
    email: '',
    estado: '',
    cidade: '',
    mensagem: '',
    telefone: ''
  };

  handleChange(e) {
    let { name, value } = e.target;
    if (name === 'telefone') value = phoneValidation(value);
    const newData = {...this.state.data, [name]: value};
    this.setState({ ...this.state, data: newData }, () => console.log(this.state));
  }

  handleSubmit(e) {
    e.preventDefault();
    const {
      data,
      file,
      errors
    } = this.state;

    Object.keys(data).map(key => {
      if (data[key] === '') {
        this.setState({errors: { ...errors, missingField: 'Preencha todos os campos.'  }});
      } else {
        if (errors.missingField) delete errors[missingField || ''];
      }
    })
    /*
    if (errors.length === 0) {
      postContact(data);
      this.setState({...data, data: this.defaultData});
    }*/
  }

  handleBlur(e, type) {
    const errors = this.state.errors;
    const { value, name } = e.target;
    this.setState({errors: { ...errors, [type]: type  }});
    if (name === 'email') {
      return emailValidation(value) ? delete errors.email : this.setState({errors: { ...errors, INVALID_EMAIL: 'INVALID_EMAIL'  }});
    }
    if (value !== '') {
      delete errors[type];
    }
  }

  render(){
    const {
      data: {
        estado,
        cidade,
        telefone
      },
      errors
    } = this.state;

    return (
      <form className='bf-form__contact' onSubmit={this.handleSubmit}>
          <select name='motivodocontato'
            onChange={e => this.handleChange(e)}
            onBlur={e => this.handleBlur(e, errorsConstants.EMPTY_CALL_REASON)}
            className='bf-input__general'
            defaultValue='motivodocontato'
          >
            <option value="motivodocontato">Motivo do contato</option>
            <option value="reclamacao">Reclamação</option>
            <option value="elogio">Elogio</option>
            <option value="Dúvida">Dúvida</option>
          </select>
          {
            errors.EMPTY_CALL_REASON ?
            <span className='span__error-message'>
              {errorsConstants.REQUIRED_MESSAGE}
            </span> : null
          }
          <label>
            <input
              type='text'
              name='nome'
              placeholder='Nome'
              onChange={e => this.handleChange(e)}
              onBlur={e => this.handleBlur(e, errorsConstants.EMPTY_NAME)}
              className='bf-input__general'
            />
          </label>
          {
            errors.EMPTY_NAME ?
            <span className='bf-span__error-message'>
              {errorsConstants.REQUIRED_MESSAGE}
            </span> : null
          }
          <section className='bf-section__e-mail-phone'>
            <label>
              <input
                type='email'
                name='email'
                placeholder='E-mail'
                onChange={e => this.handleChange(e)}
                onBlur={e => this.handleBlur(e, errorsConstants.INVALID_EMAIL)}
                className='bf-input__general'
                required
              />
            </label>
            {
              errors.INVALID_EMAIL ?
              <span className='bf-span__error-message'>
                {errorsConstants.INVALID_EMAIL_MESSAGE}
              </span> : null
            }
            <label>
              <InputMask
                mask="(99) 9999 - 9999"
                placeholder='Telefone'
                onChange={this.handleChange}
                className='bf-input__general'
                onBlur={e => this.handleBlur(e, errorsConstants.EMPTY_PHONE)}
              />
              {(inputProps) =>
                <input
                  type='tel'
                  name='telefone'
                  placeholder='Telefone'
                  value={telefone}
                  {...inputProps}
                />
              }
            </label>
            {
              errors.EMPTY_PHONE ?
              <span className='bf-span__error-message'>
                {errorsConstants.REQUIRED_MESSAGE}
              </span> : null
            }
          </section>
          <section className='bf-section__state-city'>
            <select
              name='estado'
              onChange={e => this.handleChange(e)}
              value={estado || 'Estado'}
              className='bf-input__general'
            >
              {
                Object.keys(statesConstants).map(item => (
                  <option value={item} key={key()}>
                    {item}
                  </option>
                ))
              }
            </select>
            <select
              name='cidade'
              onChange={e => this.handleChange(e)}
              value={cidade}
              className='bf-input__general'
            >
              {
                ['Cidade', ...getCities(estado || 'Estado')].
                map(item => (
                  <option value={item} key={key()}>
                    {item}
                  </option>
                ))
              }
            </select>
          </section>
          <div>selecionar arquivos</div>
          <input type='file' value='' name='arquivo' />
          <label>
            <textarea
              type='text'
              name='message'
              placeholder='Mensagem'
              onChange={e => this.handleChange(e)}
              onBlur={e => this.handleBlur(e, errorsConstants.EMPTY_MESSAGE)}
              className='bf-input__general'
              />
          </label>
          {
            errors.EMPTY_MESSAGE ?
            <span className='bf-span__error-message'>
              {errorsConstants.REQUIRED_MESSAGE}
            </span> : null
          }
          <input type='submit' value='Submit' onClick={this.handleSubmit} />
          {
            errors.missingField ?
            <span className='bf-span__error-message'>
              {errors.missingField}
            </span> : null
          }
      </form>
    )
  }
}

export default InstContato

keysGenerator.js

const getRandomString = () => Math.random().toString(36).substring(7);

export default getRandomString

phone-validation.js

const phoneValidation =  phoneNumber =>
  phoneNumber.toString().replace(/\D/g, '').length < 10 ? false : true;

export default phoneValidation

phoneMask.js

export const onlyNumberMask = value => (
  value.replace(/\D/g, '')
);

utils.md

Settle of things to use in an utils folder + a form validated