Add submit function to useFormState (#3)

Author: jcestibariz

README.md

@@ -17,14 +17,16 @@ import connect from '@bluecatend/auto-forms';
 import ComponentToConnect from '...';
 
 //Use the connect function to map the state of the component to the state of the auto-wired form:
-const AutoWiredTextInput = connect(ComponentToConnect,({value, error, setValue}) => ({
+const AutoWiredTextInput = connect(
+	ComponentToConnect,
+	({value, error, setValue}) => ({
 		value,
 		error,
 		onChange: useCallback(({target: {value}}) => setValue(value), [setValue]),
 	})
+);
 
 export default AutoWiredTextInput;
-
 ```
 
 #### Submit

__tests__/components/__snapshots__/Form-test.jsx.snap

@@ -16,6 +16,7 @@ exports[`Form rendering renders expected elements 1`] = `
           "test": "foo",
         },
       },
+      "submit": [Function],
     }
   }
 >

__tests__/components/useFormState-test.js

@@ -16,14 +16,16 @@ describe('useFormState', () => {
 		const values = {test: 'test-value'};
 		const errors = {test: 'test-error'};
 		const extras = {test: 'test-extra'};
-		useContext.mockReturnValue({state: {initialValues, values, errors, extras}});
+		const submit = jest.fn();
+		useContext.mockReturnValue({state: {initialValues, values, errors, extras}, submit});
 
 		const state = useFormState();
 		expect(state).toEqual({
 			initialValues,
 			values,
 			errors,
 			extras,
+			submit,
 			isChanged: expect.any(Function),
 			hasErrors: expect.any(Function),
 		});

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluecateng/auto-forms",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Auto-wired form hooks",
   "license": "ISC",
   "scripts": {

package.json

@@ -43,10 +43,12 @@ const submitForm = ({rules, values, extras, initialValues}, dispatch, getActiveF
 			true
 		);
 
-		if (passed) {
-			const setErrors = errors => Object.entries(errors).forEach(([name, payload]) => setError(name, payload));
-			onSubmit(values, {initialValues, extras, setErrors});
+		if (!passed) {
+			return null;
 		}
+
+		const setErrors = errors => Object.entries(errors).forEach(([name, payload]) => setError(name, payload));
+		return onSubmit(values, {initialValues, extras, setErrors});
 	});
 };
 
@@ -61,12 +63,15 @@ const Form = ({
 	...props
 }) => {
 	const [state, dispatch] = useReducer(reducer, {initialValues, initialExtras, rules}, getInitialState);
-	const handleSubmit = useCallback(
-		event => (event.preventDefault(), submitForm(state, dispatch, getActiveFields, extraValidation, onSubmit)),
-		[state]
-	);
+	const submit = useCallback(() => submitForm(state, dispatch, getActiveFields, extraValidation, onSubmit), [
+		state,
+		getActiveFields,
+		extraValidation,
+		onSubmit,
+	]);
+	const handleSubmit = useCallback(event => (event.preventDefault(), submit()), [submit]);
 	return (
-		<FormContext.Provider value={{state, dispatch}}>
+		<FormContext.Provider value={{state, dispatch, submit}}>
 			<form {...props} onSubmit={handleSubmit}>
 				{children}
 			</form>

src/components/Form.jsx

@@ -8,12 +8,14 @@ import FormContext from './FormContext';
 export default () => {
 	const {
 		state: {initialValues, values, errors, extras},
+		submit,
 	} = useContext(FormContext);
 	return {
 		initialValues,
 		values,
 		errors,
 		extras,
+		submit,
 		isChanged: () => !isEqual(initialValues, values),
 		hasErrors: () => Object.values(errors).some(isNotNull),
 	};