Add asynchronous validation for ZipCode input

Related to issue #4 Signed-off-by: antoniocoj <[email protected]> Signed-off-by: Lucas Amoêdo <[email protected]>
TechVet-2017 · Apr 30, 2017 · 46fdb48 · 46fdb48
1 parent ff6b44b
commit 46fdb48
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 62 deletions.
diff --git a/src/App.js b/src/App.js
@@ -27,8 +27,7 @@ import CustomTheme from './CustomTheme';
 
 const App = () => (
  <Admin
- restClient={jsonServerRestClient('http://techvet-backend-amoedo.c9users.io:8080/techvet/rest')}
- //restClient={jsonServerRestClient('http://localhost:/techvet/rest')}
+ restClient={jsonServerRestClient('http://localhost:8080/techvet/rest')}
  theme={getMuiTheme(CustomTheme)}
  title={'TechVet'}
  authClient={authClient}

diff --git a/src/Categories/Owners/AsyncValidate.js b/src/Categories/Owners/AsyncValidate.js
@@ -0,0 +1,66 @@
+import $ from 'jquery';
+import { change } from 'redux-form';
+
+const fillAddressFields = (address, dispatch) => {
+ dispatch(
+ change(
+ 'record-form',
+ 'publicPlace',
+ `${address.tipoDeLogradouro} ${address.logradouro}`
+ )
+ );
+ dispatch(
+ change(
+ 'record-form',
+ 'neighborhood',
+ address.bairro
+ )
+ );
+ dispatch(
+ change(
+ 'record-form',
+ 'city',
+ address.cidade
+ )
+ );
+ dispatch(
+ change(
+ 'record-form',
+ 'district',
+ address.estado
+ )
+ );
+ dispatch(
+ change(
+ 'record-form',
+ 'addressNumber',
+ ''
+ )
+ );
+ dispatch(
+ change(
+ 'record-form',
+ 'complement',
+ ''
+ )
+ );
+
+}
+
+export const AsyncValidate = (values, dispatch, props, blurredField) => {
+ const zipCode = values.zipCode.replace(/[^\d]/, '');
+ return $.ajax({
+ url: `http://correiosapi.apphb.com/cep/${zipCode}`,
+ dataType: 'jsonp',
+ crossDomain: true,
+ contentType: 'application/json'
+ }).then(
+ (response) => {
+ fillAddressFields(response, dispatch);
+ }, 
+ (f) => {
+ const error = {zipCode: 'CEP não encontrado'};
+ throw error;
+ }
+ );
+};
diff --git a/src/Categories/Owners/OwnerForm.js b/src/Categories/Owners/OwnerForm.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
-import $ from 'jquery';
-import { change } from 'redux-form';
 import {
  TextInput,
  SelectInput,
  SimpleForm,
  DisabledInput,
 } from 'admin-on-rest/lib/mui';
+import { AsyncValidate } from './AsyncValidate';
 import { formatCPF, formatPhoneNumber, formatZipCode } from '../Util';
 
 const federalStates = [
@@ -56,62 +55,6 @@ export class OwnerForm extends Component {
  this.handleZipInput = this.handleZipInput.bind(this);
  }
  handleZipInput(event) {
- const zipCode = event.target.value.replace(/[^\d]/, '');
- if (zipCode.length === 8) {
- $.ajax({
- url: `http://correiosapi.apphb.com/cep/${zipCode}`,
- dataType: 'jsonp',
- crossDomain: true,
- contentType: 'application/json',
- statusCode: {
- 200: (data) => {
- this.form.store.dispatch(
- change(
- 'record-form',
- 'publicPlace',
- `${data.tipoDeLogradouro} ${data.logradouro}`),
- );
- this.form.store.dispatch(
- change(
- 'record-form',
- 'neighborhood',
- data.bairro,
- ),
- );
- this.form.store.dispatch(
- change(
- 'record-form',
- 'city',
- data.cidade,
- ),
- );
- this.form.store.dispatch(
- change(
- 'record-form',
- 'district',
- data.estado,
- ),
- );
- this.form.store.dispatch(
- change(
- 'record-form',
- 'addressNumber',
- '',
- ),
- );
- this.form.store.dispatch(
- change(
- 'record-form',
- 'complement',
- '',
- ),
- );
- },
- 400: () => { },
- 404: () => { },
- },
- });
- }
  }
  render() {
  let CPFField = null;
@@ -131,7 +74,11 @@ export class OwnerForm extends Component {
  />);
  }
  return (
- <SimpleForm ref={(form) => { this.form = form; }} {...this.props}>
+ <SimpleForm 
+ {...this.props}
+ asyncValidate={AsyncValidate}
+ asyncBlurFields={['zipCode']}
+ >
  {CPFField}
 
  <TextInput
@@ -148,7 +95,7 @@ export class OwnerForm extends Component {
  source="phoneNumber"
  label="Telefone"
  validate={[required, caracteresMinQuantity(10), caracteresMaxQuantity(11)]}
- normalize={formatPhoneNumber}
+ normalize={formatPhoneNumber}np
  />
  <TextInput
  source="zipCode"