fix(validation): use dynamic schema validator for common fields (#494)

* fix(validation): use dynamic schema validator for common fields * fix(description): just characterlength validator
dhis2 · Jan 16, 2025 · 0ff52ee · 0ff52ee
1 parent ceffe2a
commit 0ff52ee
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 74 deletions.
diff --git a/src/components/form/fields/DescriptionField.tsx b/src/components/form/fields/DescriptionField.tsx
@@ -2,7 +2,9 @@ import i18n from '@dhis2/d2-i18n'
 import { createMaxCharacterLength, TextAreaFieldFF } from '@dhis2/ui'
 import React from 'react'
 import { Field as FieldRFF } from 'react-final-form'
-import { SchemaSection, useCheckMaxLengthFromSchema } from '../../../lib'
+import { SchemaSection } from '../../../lib'
+
+const validateMaxLength = createMaxCharacterLength(2000)
 
 export function DescriptionField({
     helpText,
@@ -11,8 +13,6 @@ export function DescriptionField({
     helpText?: string
     schemaSection: SchemaSection
 }) {
-    const validate = createMaxCharacterLength(2000)
-
     return (
         <FieldRFF
             component={TextAreaFieldFF}
@@ -21,7 +21,7 @@ export function DescriptionField({
             name="description"
             label={i18n.t('Description')}
             helpText={helpText}
-            validate={validate}
+            validate={validateMaxLength}
             validateFields={[]}
         />
     )

diff --git a/src/components/form/fields/NameField.tsx b/src/components/form/fields/NameField.tsx
@@ -1,40 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import { InputFieldFF } from '@dhis2/ui'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Field as FieldRFF, useField } from 'react-final-form'
-import { useParams } from 'react-router-dom'
-import {
-    composeAsyncValidators,
-    required,
-    useCheckMaxLengthFromSchema,
-    useIsFieldValueUnique,
-    SchemaSection,
-} from '../../../lib'
-
-function useValidator({ schemaSection }: { schemaSection: SchemaSection }) {
-    const params = useParams()
-    const modelId = params.id as string
-    const checkIsValueTaken = useIsFieldValueUnique({
-        model: schemaSection.namePlural,
-        field: 'name',
-        id: modelId,
-    })
-
-    const checkMaxLength = useCheckMaxLengthFromSchema(
-        schemaSection.name,
-        'name'
-    )
-
-    return useMemo(
-        () =>
-            composeAsyncValidators<string>([
-                checkIsValueTaken,
-                checkMaxLength,
-                required,
-            ]),
-        [checkIsValueTaken, checkMaxLength]
-    )
-}
+import { SchemaSection } from '../../../lib'
+import { useValidator } from '../../../lib/models/useFieldValidators'
 
 export function NameField({
     schemaSection,
@@ -43,7 +12,7 @@ export function NameField({
     helpText?: string
     schemaSection: SchemaSection
 }) {
-    const validator = useValidator({ schemaSection })
+    const validator = useValidator({ schemaSection, property: 'name' })
     const { meta } = useField('name', {
         subscription: { validating: true },
     })

diff --git a/src/components/form/fields/ShortNameField.tsx b/src/components/form/fields/ShortNameField.tsx
@@ -1,40 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import { InputFieldFF } from '@dhis2/ui'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Field as FieldRFF, useField } from 'react-final-form'
-import { useParams } from 'react-router-dom'
-import {
-    SchemaSection,
-    composeAsyncValidators,
-    required,
-    useCheckMaxLengthFromSchema,
-    useIsFieldValueUnique,
-} from '../../../lib'
-
-function useValidator({ schemaSection }: { schemaSection: SchemaSection }) {
-    const params = useParams()
-    const modelId = params.id as string
-    const checkIsValueTaken = useIsFieldValueUnique({
-        model: schemaSection.namePlural,
-        field: 'name',
-        id: modelId,
-    })
-
-    const checkMaxLength = useCheckMaxLengthFromSchema(
-        schemaSection.name,
-        'shortName'
-    )
-
-    return useMemo(
-        () =>
-            composeAsyncValidators<string>([
-                checkIsValueTaken,
-                checkMaxLength,
-                required,
-            ]),
-        [checkIsValueTaken, checkMaxLength]
-    )
-}
+import { SchemaSection } from '../../../lib'
+import { useValidator } from '../../../lib/models/useFieldValidators'
 
 export function ShortNameField({
     helpText,
@@ -43,7 +12,7 @@ export function ShortNameField({
     helpText?: string
     schemaSection: SchemaSection
 }) {
-    const validator = useValidator({ schemaSection })
+    const validator = useValidator({ schemaSection, property: 'shortName' })
     const { meta } = useField('shortName', {
         subscription: { validating: true },
     })