Updates

Author: agjs

README.md

@@ -1,26 +1,39 @@
-# React AJV Schema Hook
+# React AJV Schema
 
 ![Drag Racing](./assets/ajv-react.png)
 
 [use-ajv-form](https://github.com/agjs/use-ajv-form) is a custom React Hook that enables you to generate your form logic and validation based on [Ajv JSON Schema Validator](https://ajv.js.org/).
 
 It integrates seamlessly with any form and is completely agnostic from your form markup. It simply provides the state and validation. You choose how you want to present the errors and organise your forms. In simple words, it's completely decoupled from how your forms work, look and feel.
 
-# Why
+## Why
 
-Validating forms manually is a painful process. Ajv solves that by not only providing validation based on valid JSON Schema Specification, but also, provides custom plugins and keywords that allow you to create your own custom validators. That means that you can extend your schema with infinite amount of validators, and keep your forms still purely depend on the schema, without introducing manual if statements all over the place.
+Validating forms manually is a painful process. Ajv solves that by not only providing validation based on valid [JSON Schema Specification](https://json-schema.org/specification.html), but also, provides [plugins](https://ajv.js.org/packages/) that allows further extension and creation of custom validators. That means that you can extend your schema with infinite amount of validators, and keep your forms still purely depend on the schema, without introducing manual if statements all over the place.
 
 This library is used by all forms on [Programmer Network](https://programmer.network/) and is Open Sourced due to our amazing community on an official [Programmer Network Twitch Channel](https://twitch.tv/programmer_network).
 
-# Install
+---
+
+## Features
+
+- Form JSON Schema Validation
+- Dirty state checking
+- Consume remote errors as part of the schema, e.g. `username already taken`. In simple words, errors coming from your API
+- Maps 1:1 with nested objects. In simple words, a form can generate the exact object shape that you want, no need for manual mapping before e.g. API submission
+
+---
+
+## Install
 
 `yarn add @programmer_network/use-ajv-form`
 
 or
 
 `npm install @programmer_network/use-ajv-form`
 
-# Usage
+---
+
+## Usage
 
 [Codesandbox Live Demo](https://google.com)
 

src/hooks/useAjvForm/index.ts

@@ -1,7 +1,88 @@
-export const useAjvForm = (initialState, schema): number => {
-  return 5;
-};
+import { JSONSchemaType } from 'ajv';
+import { useState } from 'react';
+import { ajv } from './ajv';
+
+import { getInitialState, getValue, processAjvErrors, unflatten } from '../../utils';
+
+export const useAjvForm = (initialState: Object, schema: JSONSchemaType<any>) => {
+  const [localState, setLocalState] = useState<any>(getInitialState(initialState));
+  const ajvValidate = ajv.compile(schema);
+
+  const setState = (form: any) => {
+    const inputs = Object.keys(form).reduce((acc, name) => {
+      return {
+        ...acc,
+        [name]: { value: form[name], error: null },
+      };
+    }, {});
+
+    setLocalState((currentState: any) => ({ ...currentState, ...inputs }));
+  };
+
+  const setErrors = (errors: any) => {
+    return Object.keys(localState).reduce((acc, fieldName) => {
+      return {
+        ...acc,
+        [fieldName]: {
+          value: getValue(localState, fieldName).value,
+          error: errors[fieldName] || null,
+        },
+      };
+    }, {});
+  };
+
+  /**
+   * 1. Takes the flat state
+   * 2. Creates an object with an interface that fits func @ajvValidate
+   * 3. Unflattens the state
+   * 4. Loops through the errors and sets them for those inputs that have one
+   */
+  const validate = () => {
+    const data = unflatten(
+      Object.keys(localState).reduce((acc, inputName) => {
+        return {
+          ...acc,
+          [inputName]: localState[inputName].value,
+        };
+      }, {}),
+      '.',
+    );
+
+    const isValid = ajvValidate(data);
+
+    if (!isValid) {
+      const ajvErrors: any = processAjvErrors(ajvValidate.errors);
+
+      const errors: any = Object.keys(ajvErrors).reduce((acc, key) => {
+        return {
+          ...acc,
+          [key.split('/').join('.')]:
+            typeof ajvErrors[key] === 'object'
+              ? Object.keys(ajvErrors[key]).reduce((a, k) => {
+                  return {
+                    ...a,
+                    [k]: ajvErrors[key][k],
+                  };
+                }, {})
+              : ajvErrors[key],
+        };
+      }, {});
+
+      setLocalState(
+        setErrors(
+          Object.keys(errors).reduce((acc, fieldName) => {
+            return {
+              ...acc,
+              [fieldName]: errors[fieldName],
+            };
+          }, {}),
+        ),
+      );
+      return false;
+    }
+
+    return true;
+  };
 
-useCounter.defaultProps = {
-  initialValue: 0,
+  return { state: localState, setState, validate };
 };

src/utils/index.ts

@@ -0,0 +1,70 @@
+export const processAjvErrors = (ajvErrors) => {
+  return ajvErrors.reduce((acc, current) => {
+    const fieldName = current.instancePath
+      ? current.instancePath.slice(1, current.instancePath.length)
+      : current.params?.missingProperty;
+
+    return {
+      ...acc,
+      [fieldName]: current.message,
+    };
+  }, {});
+};
+
+export const unflatten = (data, splitOperator) => {
+  var result = {};
+  for (var i in data) {
+    var keys = i.split(splitOperator);
+    keys.reduce(function (r, e, j) {
+      return (
+        r[e] ||
+        (r[e] = isNaN(Number(keys[j + 1]))
+          ? keys.length - 1 === j
+            ? data[i]
+            : {}
+          : [])
+      );
+    }, result);
+  }
+  return result;
+};
+
+export const getValue = (state, fieldName) => {
+  if (typeof state[fieldName] === 'boolean') {
+    return state[fieldName];
+  }
+
+  if (state[fieldName]) {
+    return state[fieldName];
+  }
+
+  return '';
+};
+
+export const flattenObj = (ob) => {
+  let result = {};
+  for (const i in ob) {
+    if (typeof ob[i] === 'object') {
+      const temp = flattenObj(ob[i]);
+      for (const j in temp) {
+        result[i + '.' + j] = temp[j];
+      }
+    } else {
+      result[i] = ob[i];
+    }
+  }
+  return result;
+};
+
+export const getInitialState = (initialState: any) => {
+  const flattened = flattenObj(initialState);
+
+  return Object.keys(flattened).reduce((acc, fieldName) => {
+    acc[fieldName] = {
+      value: getValue(flattened, fieldName),
+      error: null,
+    };
+
+    return acc;
+  }, {});
+};