Improve validation with asynchronous pipeline

packages/canner/src/hocs/validation.js

@@ -3,16 +3,72 @@
 import * as React from 'react';
 import RefId from 'canner-ref-id';
 import Ajv from 'ajv';
-import {isEmpty, isArray, isPlainObject, get} from 'lodash';
+import {isEmpty, isObject, isArray, isPlainObject, isFunction, get} from 'lodash';
 import type {HOCProps} from './types';
 
 type State = {
   error: boolean,
   errorInfo: Array<any>
 }
 
+const _isRequiredValidation = async (value) => {
+  const valid = Boolean(value)
+  return {
+    error: !valid,
+    errorInfo: !valid ? [{message: 'should be required'}] :[]
+  }
+}
+
+const checkValidation = (validation) => {
+  return (isObject(validation) && !isEmpty(validation))
+}
+
+const checkSchema = (schema) => {
+  return (isObject(schema) && !isEmpty(schema) )
+}
+const checkValidator = (validator) => {
+  return (isFunction(validator))
+}
+
+const _schemaValidation = (schema, errorMessage) => {
+  const ajv = new Ajv();
+  const validate = ajv.compile(schema);
+  return async (value) => {
+    try {
+      const error = !validate(value)
+      const errorInfo = error ? [].concat( errorMessage ? {message: errorMessage} : validate.errors ) : []
+      return {
+        error,
+        errorInfo
+      }
+    }
+    catch(err){
+      return {
+        error: true,
+        errorInfo: [{message: err}]
+      }
+    }
+
+  }
+}
+const _customizedValidator = (validator) => async (value) => {
+  try {
+    const errorMessage = await validator(value)
+    return {
+      error: Boolean(errorMessage),
+      errorInfo: [{message: errorMessage}]
+    }
+  }
+  catch(err) {
+    return {
+      error: true,
+      errorInfo: [{message: err}]
+    }
+  }
+}
+
 export default function withValidation(Com: React.ComponentType<*>) {
-  return class ComponentWithValition extends React.Component<HOCProps, State> {
+  return class ComponentWithValidation extends React.Component<HOCProps, State> {
     key: string;
     id: ?string;
     callbackId: ?string;
@@ -35,48 +91,55 @@ export default function withValidation(Com: React.ComponentType<*>) {
       this.removeOnDeploy();
     }
 
-    validate = (result: any) => {
-      const {refId, validation = {}, required = false} = this.props;
+    handleValidationResult = (results: any) => {
+
+      let error = false;
+      let errorInfo = [];
+
+      for(let index = 0; index < results.length; index++) {
+        error = error || results[index].error
+        errorInfo = errorInfo.concat(results[index].errorInfo);
+      }
+
+      this.setState({
+        error,
+        errorInfo
+      });
+
+      return {
+        error,
+        errorInfo
+      }
+    }
+
+    validate = async (result: any) => {
+      const {refId, required = false, validation} = this.props;
       // required
       const paths = refId.getPathArr().slice(1);
       const {value} = getValueAndPaths(result.data, paths);
-      const isRequiredValid = required ? Boolean(value) : true;
-
-      // Ajv validation
-      const ajv = new Ajv();
-      const validate = ajv.compile(validation);
-
-      // custom validator
-      const {validator, errorMessage} = validation;
-      const reject = message => ({error: true, message});
-      const validatorResult = validator && validator(value, reject);
-
-      let customValid = !(validatorResult && validatorResult.error);
-      // if value is empty, should not validate with ajv
-      if (customValid && isRequiredValid && (!value || validate(value))) {
-        this.setState({
-          error: false,
-          errorInfo: []
-        });
-        return result;
+      const promiseQueue = [];
+
+      // check whether value is required in first step
+      if(required) {
+        promiseQueue.push(_isRequiredValidation(value));
       }
-
-
-      const errorInfo = []
-        .concat(isRequiredValid ? [] : {
-          message: 'should be required'
-        })
-        .concat(validate.errors ? (errorMessage ? {message: errorMessage} : validate.errors) : [])
-        .concat(customValid ? [] : validatorResult);
 
-      this.setState({
-        error: true,
-        errorInfo: errorInfo
-      });
+      // skip validation if object validation is undefined or empty
+      if(checkValidation(validation)) {
+        const {schema, errorMessage, validator} = validation;
+        if(value && checkSchema(schema)) {
+          promiseQueue.push(_schemaValidation(schema, errorMessage)(value));
+        }
+        if(checkValidator(validator)) {
+          promiseQueue.push(_customizedValidator(validator)(value));
+        }
+      }
+
+      const ValidationResult = await Promise.all(promiseQueue);
+
       return {
         ...result,
-        error: true,
-        errorInfo: errorInfo
+        ...this.handleValidationResult(ValidationResult)
       }
     }
 

packages/canner/test/hocs/validation.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import withValidationn from '../../src/hocs/validation';
+import withValidation from '../../src/hocs/validation';
 import RefId from 'canner-ref-id';
 
 
@@ -21,7 +21,7 @@ describe('withValidation', () => {
       onDeploy,
       removeOnDeploy
     }
-    WrapperComponent = withValidationn(MockComponent);
+    WrapperComponent = withValidation(MockComponent);
   });
 
   it('should error state = false', () => {
@@ -88,7 +88,7 @@ describe('withValidation', () => {
       {...props}
       onDeploy={jest.fn().mockImplementation((_, fn) => (fn(result)))}
       required
-      validation={{pattern: '^http://[.]+'}}
+      validation={{schema: {pattern: '^http://[.]+'}}}
     />);
     expect(wrapper.state()).toMatchObject({
       error: true,
@@ -109,7 +109,7 @@ describe('withValidation', () => {
       {...props}
       onDeploy={jest.fn().mockImplementation((_, fn) => (fn(result)))}
       required
-      validation={{pattern: '^http://[.]+', errorMessage}}
+      validation={{schema: {pattern: '^http://[.]+'}, errorMessage}}
     />);
     expect(wrapper.state()).toMatchObject({
       error: true,
@@ -128,7 +128,7 @@ describe('withValidation', () => {
     const wrapper =  mount(<WrapperComponent
       {...props}
       onDeploy={jest.fn().mockImplementation((_, fn) => (fn(result)))}
-      validation={{pattern: '^http://[.]+'}}
+      validation={{schema: {pattern: '^http://[.]+'}}}
     />);
     expect(wrapper.state()).toMatchObject({
       error: false,
@@ -147,9 +147,9 @@ describe('withValidation', () => {
       onDeploy={jest.fn().mockImplementation((_, fn) => (fn(result)))}
       validation={
         {
-          validator: (content, reject) => {
+          validator: (content) => {
             if (!content) {
-              return reject('should be required');
+              return 'should be required';
             }
           }
         }