code refactor

Author: llauderesv

README.md

@@ -25,7 +25,7 @@ const initialValue = {
 
 ### Create a validator
 
-Note: Validator key should be the same in the model that you created above. If it doesn't, it will not recognize the validation.
+Note: Validator key should be the same in the state key that you created above. If it doesn't, it will not recognize the validation.
 
 ```
 const validator = {

src/App.css

@@ -2,15 +2,20 @@
   text-align: center;
 }
 
+div {
+  margin-bottom: 10px;
+}
+
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
   pointer-events: none;
+  height: 80px;
 }
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 250px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/App.js

@@ -7,6 +7,10 @@ import './App.css';
 function App() {
   return (
     <div className="App">
+      <div className="App-header">
+        <img className="App-logo" src={logo} alt="react-logo" />
+        <p>React Form Validation using React Hooks.</p>
+      </div>
       <Form />
     </div>
   );

src/Form.js

@@ -1,68 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import useForm from './useForm';
 
-function useForm(validator, initialValue, callback) {
-  const [state, setState] = useState(initialValue);
-  const [disable, setDisable] = useState(true);
-  const [isDirty, setIsDirty] = useState(false);
-
-  useEffect(() => {
-    if (isDirty) {
-      setDisable(validateState());
-    }
-  }, [state]);
-
-  useEffect(() => {
-    setDisable(validateState());
-  }, []);
-
-  function handleOnChange(event) {
-    setIsDirty(true);
-
-    const name = event.target.name;
-    const value = event.target.value;
-
-    let error = '';
-    if (validator[name].required) {
-      if (!value) {
-        error = 'This is required field.';
-      }
-    }
-
-    if (
-      typeof validator[name].validator === 'object' &&
-      validator[name].validator !== null
-    ) {
-      if (value && !validator[name].validator.regEx.test(value)) {
-        error = validator[name].validator.error;
-      }
-    }
-
-    setState(prevState => ({
-      ...prevState,
-      [name]: { value, error },
-    }));
-  }
-
-  function handleOnSubmit(event) {
-    event.preventDefault();
-
-    callback();
-  }
-
-  function validateState() {
-    return Object.keys(validator).some(key => {
-      const isRequiredField = validator[key].required;
-      const hasValue = state[key].value;
-
-      return (!hasValue && isRequiredField) || state[key].error;
-    });
-  }
+function Form() {
+  // Define your state schema
+  const stateSchema = {
+    fname: { value: '', error: '' },
+    lname: { value: '', error: '' },
+    tags: { value: '', error: '' },
+  };
 
-  return { state, disable, handleOnChange, handleOnSubmit };
-}
+  // Define your validationStateSchema
 
-function Form() {
-  const validator = {
+  // Note: validationStateSchema and stateSchema property
+  // should be the same in-order validation works!
+  const validationStateSchema = {
     fname: {
       required: true,
       validator: {
@@ -71,7 +22,7 @@ function Form() {
       },
     },
     lname: {
-      required: false,
+      required: true,
       validator: {
         regEx: /^[a-zA-Z]+$/,
         error: 'Invalid last name format.',
@@ -86,28 +37,13 @@ function Form() {
     },
   };
 
-  const initialValue = {
-    fname: {
-      value: '',
-      error: '',
-    },
-    lname: {
-      value: '',
-      error: '',
-    },
-    tags: {
-      value: '',
-      error: '',
-    },
-  };
-
-  function onSubmitForm() {
-    alert('Form submitted.');
+  function onSubmitForm(state) {
+    alert(JSON.stringify(state, null, 2));
   }
 
   const { state, handleOnChange, handleOnSubmit, disable } = useForm(
-    validator,
-    initialValue,
+    stateSchema,
+    validationStateSchema,
     onSubmitForm
   );
 
@@ -129,8 +65,9 @@ function Form() {
               onChange={handleOnChange}
             />
           </label>
+          {state.fname.error && <p style={errorStyle}>{state.fname.error}</p>}
         </div>
-        {state.fname.error && <p style={errorStyle}>{state.fname.error}</p>}
+
         <div>
           <label htmlFor="lname">
             Last name:
@@ -141,8 +78,8 @@ function Form() {
               onChange={handleOnChange}
             />
           </label>
+          {state.lname.error && <p style={errorStyle}>{state.lname.error}</p>}
         </div>
-        {state.lname.error && <p style={errorStyle}>{state.lname.error}</p>}
 
         <div>
           <label htmlFor="tags">
@@ -154,8 +91,8 @@ function Form() {
               onChange={handleOnChange}
             />
           </label>
+          {state.tags.error && <p style={errorStyle}>{state.tags.error}</p>}
         </div>
-        {state.tags.error && <p style={errorStyle}>{state.tags.error}</p>}
 
         <input type="submit" name="submit" disabled={disable} />
       </form>

src/useForm.js

@@ -0,0 +1,87 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function useForm(stateSchema, validationSchema = {}, callback) {
+  const [state, setState] = useState(stateSchema);
+  const [disable, setDisable] = useState(true);
+  const [isDirty, setIsDirty] = useState(false);
+
+  // Disable button in initial render.
+  useEffect(() => {
+    setDisable(true);
+  }, []);
+
+  // For every changed in our state this will be fired
+  // To be able to disable the button
+  useEffect(() => {
+    if (isDirty) {
+      setDisable(validateState());
+    }
+  }, [state, isDirty]);
+
+  // Used to disable submit button if there's an error in state
+  // or the required field in state has no value.
+  // Wrapped in useCallback to cached the function to avoid intensive memory leaked
+  // in every re-render in component
+  const validateState = useCallback(() => {
+    const hasErrorInState = Object.keys(validationSchema).some(key => {
+      const isInputFieldRequired = validationSchema[key].required;
+      const stateValue = state[key].value; // state value
+      const stateError = state[key].error; // state error
+
+      return (isInputFieldRequired && !stateValue) || stateError;
+    });
+
+    return hasErrorInState;
+  }, [state, validationSchema]);
+
+  // Used to handle every changes in every input
+  const handleOnChange = useCallback(
+    event => {
+      setIsDirty(true);
+
+      const name = event.target.name;
+      const value = event.target.value;
+
+      let error = '';
+      if (validationSchema[name].required) {
+        if (!value) {
+          error = 'This is required field.';
+        }
+      }
+
+      if (
+        validationSchema[name].validator !== null &&
+        typeof validationSchema[name].validator === 'object'
+      ) {
+        if (value && !validationSchema[name].validator.regEx.test(value)) {
+          error = validationSchema[name].validator.error;
+        }
+      }
+
+      setState(prevState => ({
+        ...prevState,
+        [name]: { value, error },
+      }));
+    },
+    [validationSchema]
+  );
+
+  // function handleOnChange(event) {}
+
+  const handleOnSubmit = useCallback(
+    event => {
+      event.preventDefault();
+
+      // Make sure that validateState returns false
+      // Before calling the submit callback function
+      if (!validateState()) {
+        callback(state);
+      }
+    },
+    [state]
+  );
+
+  return { state, disable, handleOnChange, handleOnSubmit };
+}
+
+export default useForm;