add option to return map value

Author: Robin Schultz

.npmignore

@@ -1,4 +1,5 @@
 .idea/
+.github/
 src/
 node_modules/
 coverage/
@@ -10,3 +11,6 @@ CONTRIBUTING.md
 .gitignore
 .travis.yml
 tsconfig.json
+
+jest.config.js
+jest.setup.ts

README.md

@@ -15,7 +15,8 @@ npm install --save react-class-validator
 const validatorOptions: ValidatorContextOptions = {
     onErrorMessage: (error): string => {
         // custom error message handling (localization, etc)
-    }
+    },
+    resultType: 'boolean' // default, can also be set to 'map'
 }
 
 render((
@@ -99,13 +100,12 @@ class. Individual fields will have to be validated with `onBlur` functionality.
 
 #### Formik error messages
 
-To display error messages without custom handling, messages will need to be flattened when working with Formik. Do this 
-by overriding the default `onErrorMessage`.
+To display error messages without custom handling, messages will need to be outputted as a map upon validation. 
+Do this by overriding the default `resultType` (you can also do this at the component-level).
 
 ```typescript
 const options: ValidatorContextOptions = {
-    onErrorMessage: (error) => Object.keys(error.constraints)
-        .map((accum, key) => `${accum}. ${error.constraints[key]}`, '')
+    resultType: 'map'
 };
 ```
 
@@ -114,14 +114,14 @@ Then you can simply integrate with the default Formik flow.
 ```typescript jsx
 export const Login: FunctionComponent = () => {
 
-    const [validate, errors] = useValidation(LoginValidation);
+    const [validate] = useValidation(LoginValidation);
 
     return (
         <Formik initialValues={{username: '', password: ''}}
                 validateOnBlur
                 validateOnChange
                 validate={validate}>
-            {({values, touched, handleChange, handleBlur}) => (
+            {({values, touched, errors, handleChange, handleBlur}) => (
                 <Form>
 
                     <label htmlFor="username">Username</label>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-class-validator",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React hook for validation with class-validator",
   "main": "dist/index.js",
   "scripts": {

src/__tests__/map.spec.tsx

@@ -0,0 +1,138 @@
+import 'reflect-metadata';
+import React, {FunctionComponent, useState} from "react";
+import {create} from "react-test-renderer";
+import {useValidation, ValidatorProvider} from "../index";
+import {mount} from "enzyme";
+import {IsNotEmpty} from "class-validator";
+import toJson from "enzyme-to-json";
+
+class ContactFormValidation {
+
+    @IsNotEmpty({
+        message: 'First name cannot be empty'
+    })
+    public firstName: string;
+
+    @IsNotEmpty({
+        message: 'Last name cannot be empty'
+    })
+    public lastName: string;
+
+}
+
+const ContactForm: FunctionComponent = () => {
+
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+
+    const [validate, errorMessages] = useValidation(ContactFormValidation);
+
+    return (
+        <form id="form" onSubmit={async (evt) => {
+            evt.preventDefault();
+            await validate({firstName, lastName});
+        }}>
+            <input id="fname-input" value={firstName} onChange={({target: {value}}) => setFirstName(value)}
+                   onBlur={() => validate({firstName}, ['firstName'])}/>
+            {errorMessages.firstName && errorMessages.firstName.map((error, index) => (
+                <strong key={index}>{error}</strong>
+            ))}
+            <input id="lname-input" value={lastName} onChange={({target: {value}}) => setLastName(value)}
+                   onBlur={() => validate({lastName}, ['lastName'])}/>
+            {errorMessages.lastName && errorMessages.lastName.map((error, index) => (
+                <strong key={index}>{error}</strong>
+            ))}
+        </form>
+    );
+
+};
+
+describe('context', () => {
+
+    it('provider should mount correctly', () => {
+
+        const tree = create(
+            <ValidatorProvider options={{resultType: 'map'}}>
+                <ContactForm/>
+            </ValidatorProvider>
+        ).toJSON();
+
+        expect(tree).toMatchSnapshot();
+
+    });
+
+    it('validation success on form submit', async () => {
+
+        const wrapper = mount(
+            <ValidatorProvider options={{resultType: 'map'}}>
+                <ContactForm/>
+            </ValidatorProvider>
+        );
+
+        const firstNameInput = wrapper.find('#fname-input');
+        firstNameInput.simulate('change', {target: {value: 'Nick'}});
+
+        const lastNameInput = wrapper.find('#lname-input');
+        lastNameInput.simulate('change', {target: {value: 'Fury'}});
+
+        const form = wrapper.find('#form');
+        form.simulate('submit');
+
+        expect(toJson(wrapper)).toMatchSnapshot();
+
+    });
+
+    it('validation error on form submit', async () => {
+
+        const wrapper = mount(
+            <ValidatorProvider options={{resultType: 'map'}}>
+                <ContactForm/>
+            </ValidatorProvider>
+        );
+
+        const firstNameInput = wrapper.find('#fname-input');
+        firstNameInput.simulate('change', {target: {value: 'Nick'}});
+
+        const form = wrapper.find('#form');
+        form.simulate('submit');
+
+        expect(toJson(wrapper)).toMatchSnapshot();
+
+    });
+
+    it('validation error on blur field', async () => {
+
+        const wrapper = mount(
+            <ValidatorProvider options={{resultType: 'map'}}>
+                <ContactForm/>
+            </ValidatorProvider>
+        );
+
+        const firstNameInput = wrapper.find('#fname-input');
+        firstNameInput.simulate('blur');
+
+        expect(toJson(wrapper)).toMatchSnapshot();
+
+    });
+
+    it('validation error custom handler', async () => {
+
+        const wrapper = mount(
+            <ValidatorProvider options={{
+                onErrorMessage() {
+                    return ['this is a custom error']
+                },
+                resultType: 'map',
+            }}>
+                <ContactForm/>
+            </ValidatorProvider>
+        );
+
+        const form = wrapper.find('#form');
+        form.simulate('submit');
+
+        expect(toJson(wrapper)).toMatchSnapshot();
+
+    });
+
+});

src/context.tsx

@@ -1,20 +1,30 @@
 import {ValidationError} from "class-validator";
 import React, {createContext, FunctionComponent} from "react";
 
+export type ValidatorResultType = 'map' | 'boolean';
+
 export type OnErrorMessageHandler = (error: ValidationError) => string[];
 export type ValidatorContextOptions = {
-    onErrorMessage: OnErrorMessageHandler;
+    onErrorMessage?: OnErrorMessageHandler;
+    resultType?: ValidatorResultType;
 };
 
+const defaultOnErrorMessage: OnErrorMessageHandler = (error) =>
+    Object.keys(error.constraints).map((key) => error.constraints[key]);
+
 const _getDefaultContextOptions = (): ValidatorContextOptions => ({
-    onErrorMessage: (error) => Object.keys(error.constraints).map((key) => error.constraints[key])
+    onErrorMessage: defaultOnErrorMessage,
+    resultType: 'boolean',
 });
 
 export const ValidatorContext = createContext<ValidatorContextOptions>(null);
 
 export const ValidatorProvider: FunctionComponent<{ options?: ValidatorContextOptions }> =
     ({options = _getDefaultContextOptions(), children}) => (
-        <ValidatorContext.Provider value={options}>
+        <ValidatorContext.Provider value={{
+            onErrorMessage: options.onErrorMessage || defaultOnErrorMessage,
+            resultType: options.resultType || 'boolean'
+        }}>
             {children}
         </ValidatorContext.Provider>
     );

src/index.ts

@@ -1,31 +1,44 @@
 import {validate} from 'class-validator';
 import {useContext, useState} from 'react';
-import {ValidatorContext} from "./context";
+import {ValidatorContext, ValidatorContextOptions} from "./context";
 
 export {ValidatorProvider, ValidatorContextOptions, OnErrorMessageHandler} from './context';
 
 type Newable<T> = {
     new(): T;
 } | Function;
 
+type ValidationOptions = Pick<ValidatorContextOptions, 'resultType'>;
 type ValidationErrorMap<T, K extends keyof T> = { [key in K]?: string[] };
 type ValidationPayload<T, K extends keyof T> = { [key in K]?: T[K] };
-type ValidationFunction<T, K extends keyof T> = (payload: ValidationPayload<T, K>, filter?: K[]) => Promise<boolean>;
+type ValidationFunction<T, K extends keyof T> = (payload: ValidationPayload<T, K>, filter?: K[]) => Promise<ValidationErrorMap<T, K> | boolean>;
 type UseValidationResult<T, K extends keyof T> = [ValidationFunction<T, K>, ValidationErrorMap<T, K>];
 
-export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>): UseValidationResult<T, K> => {
+export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>, opts: ValidationOptions = {}): UseValidationResult<T, K> => {
 
-    const {onErrorMessage} = useContext(ValidatorContext);
+    const {onErrorMessage, resultType} = useContext(ValidatorContext);
+    opts = {
+        ...opts,
+        resultType: opts.resultType || resultType
+    }
 
     const [validationErrors, setErrors] = useState<ValidationErrorMap<T, K>>({});
 
+    const _resolve = (errors: ValidationErrorMap<T, K>) => {
+        if (errors && Object.keys(errors).length === 0 && errors.constructor === Object) {
+            return opts.resultType === 'boolean' ? true : errors;
+        } else {
+            return opts.resultType === 'boolean' ? false : errors;
+        }
+    }
+
     const validateCallback: ValidationFunction<T, K> = async (payload, filter: K[] = []) => {
 
         let errors = await validate(Object.assign(new (validationClass as any)(), payload));
         if (errors.length === 0) {
 
             setErrors({});
-            return true;
+            return _resolve({});
 
         } else {
 
@@ -60,7 +73,7 @@ export const useValidation = <T, K extends keyof T>(validationClass: Newable<T>)
                 setErrors(validation);
             }
 
-            return false;
+            return _resolve(validation);
 
         }