index.js

gistfile1.js

import React from 'react';

import { IoIosPin, IoMdHome } from 'react-icons/io';
import { TiSortNumerically } from 'react-icons/ti';
import { FaBuilding } from 'react-icons/fa';

import { Form, InputGroup, FormControl } from 'react-bootstrap';
import { Formik, FormikProps } from 'formik';

import cep from 'cep-promise';
import validation from '../Validator/validation';
import consultaCep from '../../services/consultaCep';
import Debug from '../Debug';

export default function ShipForm() {
  return (
    <>
      <Formik
        enableReinitialize
        validationSchema={validation}
        onSubmit={console.log}
        initialValues={{
          zipcode: '',
          street: '',
          addressNumber: '',
          addressExtra: '',
          state: '',
          city: '',
          neighborhood: '',
        }}
      >
        {({
          handleSubmit,
          handleChange,
          handleBlur,
          setFieldValue,
          values,
          touched,
          isValid,
          errors,
        }) => (
          <form noValidate schema={validation} onSubmit={handleSubmit}>
            <Form.Group controlid="formBasicCEP" className="mb-3">
              <Form.Label aria-describedby="inputGroupCEP">Seu CEP</Form.Label>
              <InputGroup>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupCEP">
                    <IoIosPin />
                  </InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control
                  size="lg"
                  type="text"
                  placeholder="Digite seu CEP aqui"
                  name="zipcode"
                  value={values.zipcode}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  isValid={touched.zipcode && !errors.zipcode}
                  isInvalid={errors.zipcode && !!touched.zipcode}
                />
                {touched.zipcode
                  ? console.log(
                      `Fazendo a requisição com ${values.zipcode}`,

                      cep(values.zipcode)
                        .then(response => {
                          console.log(response);
                          setFieldValue('street', response.street);
                          setFieldValue('city', response.city);
                          return response;
                        })
                        .catch(error => {
                          return error;
                        })
                    )
                  : console.log('Erro')}
                <Form.Control.Feedback type="invalid">
                  {errors.zipcode}
                </Form.Control.Feedback>
                <Form.Control.Feedback type="valid">{}</Form.Control.Feedback>
              </InputGroup>
            </Form.Group>

            <Form.Group controlid="formBasicStreetAddress" className="mb-3">
              <Form.Label>Seu Endereço</Form.Label>
              <InputGroup>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupStreet">
                    <IoMdHome />
                  </InputGroup.Text>
                </InputGroup.Prepend>

                <Form.Control
                  size="lg"
                  type="text"
                  name="street"
                  value={values.street}
                  onChange={handleChange}
                  placeholder="Digite seu endereço"
                  aria-describedby="inputGroupStreet"
                  isValid={touched.street && !errors.street}
                  isInvalid={errors.street && !!touched.street}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.street}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>

            <Form.Group controlid="formBasicCity" className="mb-3">
              <Form.Label>Cidade</Form.Label>
              <InputGroup>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupCity">
                    <IoMdHome />
                  </InputGroup.Text>
                </InputGroup.Prepend>

                <Form.Control
                  size="lg"
                  type="text"
                  name="city"
                  value={values.city}
                  onChange={handleChange}
                  placeholder="Digite sua cidade"
                  aria-describedby="inputGroupCity"
                  isValid={touched.city && !errors.city}
                  isInvalid={errors.city && !!touched.city}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.city}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>

            <Form.Group controlid="formBasicAdressNumber" className="mb-3">
              <Form.Label>Seu número</Form.Label>
              <InputGroup>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupNumber">
                    <TiSortNumerically />
                  </InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control
                  size="lg"
                  type="text"
                  name="addressNumber"
                  value={values.addressNumber}
                  onChange={handleChange}
                  placeholder="Digite seu número"
                  aria-describedby="inputGroupNumber"
                  isValid={touched.addressNumber && !errors.addressNumber}
                  isInvalid={errors.addressNumber && !!touched.addressNumber}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.addressNumber}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>
            <Form.Group controlid="formBasicAddressExtra" className="mb-3">
              <Form.Label>Seu complemento</Form.Label>
              <InputGroup>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupAddressExtra">
                    <FaBuilding />
                  </InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control
                  size="lg"
                  type="text"
                  name="addressExtra"
                  value={values.addressExtra}
                  onChange={handleChange}
                  placeholder="Digite seu complemento"
                  aria-describedby="inputGroupAddressExtra"
                  isValid={touched.addressExtra && !errors.addressExtra}
                  isInvalid={errors.addressExtra && !!touched.addressExtra}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.addressExtra}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>
            <Debug />
          </form>
        )}
      </Formik>
    </>
  );
}