refactor: dry up form validation & zod segmentsToPath

src/lib/form/index.ts

@@ -1,3 +1,4 @@
 export { composeAsyncValidators } from './composeAsyncValidators'
 export type { FormFieldValidator } from './composeAsyncValidators'
 export { required } from './validators'
+export { validate } from './validate'

src/lib/form/validate.ts

@@ -0,0 +1,22 @@
+import { setIn } from 'final-form'
+import { z } from 'zod'
+import { segmentsToPath } from '../zod'
+
+export function validate<FormValues>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    zodSchema: z.ZodType<any, any, any>,
+    values: FormValues
+) {
+    const zodResult = zodSchema.safeParse(values)
+
+    if (zodResult.success !== false) {
+        return undefined
+    }
+
+    const allFormErrors = zodResult.error.issues.reduce((formErrors, error) => {
+        const errorPath = segmentsToPath(error.path)
+        return setIn(formErrors, errorPath, error.message)
+    }, {})
+
+    return allFormErrors
+}

src/lib/index.ts

@@ -16,3 +16,4 @@ export * from './date'
 export * from './systemSettings'
 // export * from './utils'
 export * from './dataStore'
+export * from './zod'

src/lib/zod/index.ts

@@ -0,0 +1 @@
+export { segmentsToPath } from './segmentsToPath'

src/lib/zod/segmentsToPath.ts

@@ -0,0 +1,8 @@
+// @TODO: Figure out if there's a utility for this? I couldn't find one
+export function segmentsToPath(segments: Array<string | number>) {
+    return segments.reduce((path, segment) => {
+        return typeof segment === 'number'
+            ? `${path}[${segment}]`
+            : `${path}.${segment}`
+    }) as string
+}

src/pages/dataElementGroups/Edit.tsx

@@ -10,12 +10,12 @@ import {
     StandardFormActions,
     StandardFormSection,
 } from '../../components'
-import { SCHEMA_SECTIONS, getSectionPath } from '../../lib'
+import { SCHEMA_SECTIONS, getSectionPath, validate } from '../../lib'
 import { JsonPatchOperation } from '../../types'
 import { DataElementGroup } from '../../types/generated'
 import { createJsonPatchOperations } from './edit/'
 import classes from './Edit.module.css'
-import { DataElementGroupFormFields, validate } from './form'
+import { DataElementGroupFormFields, dataElementGroupSchema } from './form'
 import type { FormValues } from './form'
 
 type FinalFormFormApi = FormApi<FormValues>
@@ -125,7 +125,9 @@ export const Component = () => {
             <Form
                 validateOnBlur
                 onSubmit={onSubmit}
-                validate={validate}
+                validate={(values: FormValues) => {
+                    return validate(dataElementGroupSchema, values)
+                }}
                 initialValues={initialValues}
             >
                 {({ handleSubmit, submitting, submitError }) => (

src/pages/dataElementGroups/New.tsx

@@ -6,8 +6,8 @@ import React, { useEffect, useRef } from 'react'
 import { Form } from 'react-final-form'
 import { useNavigate } from 'react-router-dom'
 import { StandardFormActions, StandardFormSection } from '../../components'
-import { SCHEMA_SECTIONS, getSectionPath } from '../../lib'
-import { DataElementGroupFormFields, validate } from './form'
+import { SCHEMA_SECTIONS, getSectionPath, validate } from '../../lib'
+import { DataElementGroupFormFields, dataElementGroupSchema } from './form'
 import type { FormValues } from './form'
 import classes from './New.module.css'
 
@@ -50,7 +50,9 @@ export function Component() {
         <Form
             validateOnBlur
             onSubmit={onSubmit}
-            validate={validate}
+            validate={(values: FormValues) => {
+                return validate(dataElementGroupSchema, values)
+            }}
             initialValues={initialValues}
         >
             {({ handleSubmit, submitting, submitError }) => (

src/pages/dataElementGroups/form/index.ts

@@ -1,3 +1,3 @@
 export { DataElementGroupFormFields } from './DataElementGroupFormFields'
+export { dataElementGroupSchema } from './dataElementGroupSchema'
 export type { FormValues } from './types'
-export { validate } from './validate'

src/pages/dataElements/Edit.tsx

@@ -10,13 +10,13 @@ import {
     StandardFormActions,
     StandardFormSection,
 } from '../../components'
-import { SCHEMA_SECTIONS, getSectionPath } from '../../lib'
+import { SCHEMA_SECTIONS, getSectionPath, validate } from '../../lib'
 import { JsonPatchOperation } from '../../types'
 import { Attribute, DataElement } from '../../types/generated'
 import { createJsonPatchOperations } from './edit/'
 import classes from './Edit.module.css'
 import { useCustomAttributesQuery } from './fields'
-import { DataElementFormFields, validate } from './form'
+import { DataElementFormFields, dataElementSchema } from './form'
 import type { FormValues } from './form'
 
 type FinalFormFormApi = FormApi<FormValues>
@@ -174,7 +174,9 @@ export const Component = () => {
                 <Form
                     validateOnBlur
                     onSubmit={onSubmit}
-                    validate={validate}
+                    validate={(values: FormValues) => {
+                        return validate(dataElementSchema, values)
+                    }}
                     initialValues={initialValues}
                 >
                     {({ handleSubmit, submitting, submitError }) => (

src/pages/dataElements/New.tsx

@@ -10,10 +10,15 @@ import {
     StandardFormActions,
     StandardFormSection,
 } from '../../components'
-import { SCHEMA_SECTIONS, getSectionPath, useSchemas } from '../../lib'
+import {
+    SCHEMA_SECTIONS,
+    getSectionPath,
+    useSchemas,
+    validate,
+} from '../../lib'
 import { Attribute } from '../../types/generated'
 import { useCustomAttributesQuery } from './fields'
-import { DataElementFormFields, validate } from './form'
+import { DataElementFormFields, dataElementSchema } from './form'
 import type { FormValues } from './form'
 import classes from './New.module.css'
 
@@ -142,7 +147,9 @@ export const Component = () => {
             <Form
                 validateOnBlur
                 onSubmit={onSubmit}
-                validate={validate}
+                validate={(values: FormValues) => {
+                    return validate(dataElementSchema, values)
+                }}
                 initialValues={initialValues}
             >
                 {({ handleSubmit, submitting, submitError }) => (

src/pages/dataElements/form/index.ts

@@ -1,3 +1,3 @@
 export { DataElementFormFields } from './DataElementFormFields'
+export { dataElementSchema } from './dataElementSchema'
 export type { FormValues } from './types'
-export { validate } from './validate'