add setStateSchema top level API

Author: llauderesv

src/Form/index.js

@@ -10,7 +10,7 @@ function Form() {
     tags: { value: '', error: '' },
   };
 
-  const delay = () => new Promise(resolve => setTimeout(resolve, 5000));
+  const delay = () => new Promise(resolve => setTimeout(resolve, 3000));
 
   // Create your own validationStateSchema
   // stateSchema property should be the same in validationStateSchema
@@ -58,8 +58,8 @@ function Form() {
   useEffect(() => {
     delay().then(() => {
       setStateSchema({
-        first_name: { value: 'Denise', error: '' },
-        last_name: { value: '', error: '' },
+        first_name: { value: 'Ellie', error: '' },
+        last_name: { value: 'Eilish', error: '' },
         tags: { value: '', error: '' },
       });
       // setFieldValue({ name: 'first_name', value: 'Hello' });
@@ -81,7 +81,9 @@ function Form() {
             onChange={handleOnChange}
           />
         </label>
-        {errors.first_name && <p className="error">{errors.first_name}</p>}
+        {errors.first_name && dirty.first_name && (
+          <p className="error">{errors.first_name}</p>
+        )}
       </div>
 
       <div className="form-item">

src/useForm.js

@@ -17,7 +17,7 @@ function useForm(
 
   const [values, setValues] = useState(get_prop_values(state, VALUE));
   const [errors, setErrors] = useState(get_prop_values(state, ERROR));
-  const [dirty, setDirty] = useState(get_prop_values(state));
+  const [dirty, setDirty] = useState(get_prop_values(state, false));
 
   const [disable, setDisable] = useState(true);
   const [isDirty, setIsDirty] = useState(false);
@@ -29,12 +29,18 @@ function useForm(
     setInitialErrorState();
   }, []); // eslint-disable-line
 
-  // If state schema changes update all fields
+  // Set a brand new field values and errors 
+  // If stateSchema changes
   useEffect(() => {
-    setValues(get_prop_values(state, VALUE));
-    setErrors(get_prop_values(state, ERROR));
-    setDirty(get_prop_values(state, true));
-  }, [state]);
+    const values = get_prop_values(state, VALUE);
+    setValues(values);
+    setErrors(
+      Object.keys(values).reduce((accu, curr) => {
+        accu[curr] = validateField(curr, values[curr]);
+        return accu;
+      }, {})
+    );
+  }, [state]); // eslint-disable-line
 
   // For every changed in our state this will be fired
   // To be able to disable the button

src/utils.js

@@ -2,6 +2,10 @@ export const VALUE = 'value';
 export const ERROR = 'error';
 export const REQUIRED_FIELD_ERROR = 'This is required field';
 
+function is_bool(value) {
+  return typeof value === 'boolean';
+}
+
 /**
  * Determines a value if it's an object
  *
@@ -23,7 +27,7 @@ export function is_required(value, isRequired) {
 
 export function get_prop_values(stateSchema, prop) {
   return Object.keys(stateSchema).reduce((field, key) => {
-    field[key] = !prop ? false : stateSchema[key][prop];
+    field[key] = is_bool(prop) ? prop : stateSchema[key][prop];
 
     return field;
   }, {});