Create data validation schema and implement validations

Author: Antonio Contreras LEMONCODE

package.json

@@ -50,6 +50,7 @@
     "emotion": "^10.0.23",
     "final-form": "^4.18.6",
     "formik": "^2.1.4",
+    "immer": "^6.0.3",
     "graphql-request": "^1.8.2",
     "lodash.flowright": "^3.5.0",
     "lodash.get": "^4.4.2",

src/pods/employee/components/data.component.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Formik, Form } from 'formik';
 import { TextFieldComponent, CheckboxComponent } from 'common/components';
+import produce from 'immer';
 import { CommandFooterComponent } from '../../../common-app/command-footer';
 import * as classes from './data.styles';
 import { cx } from 'emotion';
 import { Employee } from '../employee.vm';
+import { formValidation, validationSchema } from './data.validations';
+import { Validators } from '@lemoncode/fonk';
 
 interface Props {
   employee: Employee;
@@ -21,11 +24,19 @@ export const DataComponent: React.FunctionComponent<Props> = ({
   isEditMode,
   onCancel,
 }) => {
+  React.useEffect(() => {
+    const newValidationSchema = produce(validationSchema, darft => {
+      darft.field.temporalPassword = isEditMode ? [] : [Validators.required];
+    });
+    formValidation.updateValidationSchema(newValidationSchema);
+  }, [isEditMode]);
+
   return (
     <Formik
       initialValues={employee}
       enableReinitialize={true}
       onSubmit={onSave}
+      validate={formValidation.validateForm}
     >
       {() => (
         <Form className={cx(classes.form({ isEditMode }), className)}>

src/pods/employee/components/data.validations.ts

@@ -0,0 +1,32 @@
+import { ValidationSchema, Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+import { matchField } from '@lemoncode/fonk-match-field-validator';
+
+export const validationSchema: ValidationSchema = {
+  field: {
+    name: [
+      {
+        validator: Validators.required,
+        message: 'Campo obligatorio',
+      },
+    ],
+    email: [
+      {
+        validator: Validators.email,
+        message: 'Introduce un email válido',
+      },
+      {
+        validator: Validators.required,
+        message: 'Campo obligatorio',
+      },
+    ],
+    temporalPassword: [
+      {
+        validator: matchField.validator,
+        customArgs: { field: 'password' },
+      },
+    ],
+  },
+};
+
+export const formValidation = createFormikValidation(validationSchema);