From 46fdb4809b246db3f6f4a3bb6bdd646ce62b092a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Amo=C3=AAdo?= <lucas_advc@outlook.com>
Date: Sun, 30 Apr 2017 16:41:56 +0000
Subject: [PATCH] Add asynchronous validation for ZipCode input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Related to issue #4

Signed-off-by: antoniocoj <_antonio_@hotmail.com>
Signed-off-by: Lucas Amoêdo <lucas_advc@outlook.com>
---
 src/App.js                             |  3 +-
 src/Categories/Owners/AsyncValidate.js | 66 +++++++++++++++++++++++++
 src/Categories/Owners/OwnerForm.js     | 67 +++-----------------------
 3 files changed, 74 insertions(+), 62 deletions(-)
 create mode 100644 src/Categories/Owners/AsyncValidate.js

diff --git a/src/App.js b/src/App.js
index 8c6eec1..c8e61b6 100644
--- 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
new file mode 100644
index 0000000..36dcb4d
--- /dev/null
+++ 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;
+    }
+  );
+};
\ No newline at end of file
diff --git a/src/Categories/Owners/OwnerForm.js b/src/Categories/Owners/OwnerForm.js
index 887b54b..d5e883f 100644
--- 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"