chore: fix type issues after updating dependencies

dhis2 · Dec 5, 2023 · f6043f6 · f6043f6
1 parent 200875b
commit f6043f6
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 23 deletions.
diff --git a/src/lib/form/composeAsyncValidators/composeAsyncValidators.ts b/src/lib/form/composeAsyncValidators/composeAsyncValidators.ts
@@ -3,7 +3,7 @@ import type { Validator } from './types'
 export const composeAsyncValidators = <Value, FormValues>(
     validators: Validator<Value, FormValues>[]
 ): Validator<Value, FormValues> => {
-    return async (value: Value, formValues?: FormValues) => {
+    return async (value?: Value, formValues?: FormValues) => {
         for (let i = 0; i < validators.length; ++i) {
             const validator = validators[i]
             const result = await validator(value, formValues)

diff --git a/src/lib/form/composeAsyncValidators/types.ts b/src/lib/form/composeAsyncValidators/types.ts
@@ -1,4 +1,6 @@
+type ReturnValue = string | undefined
+
 export type Validator<Value, FormValues = object> = (
-    value: Value,
+    value?: Value,
     formValues?: FormValues
-) => Promise<string | undefined>
+) => ReturnValue | Promise<ReturnValue>
diff --git a/src/pages/dataElements/fields/DomainField.tsx b/src/pages/dataElements/fields/DomainField.tsx
@@ -5,6 +5,15 @@ import { useField } from 'react-final-form'
 import { DOMAIN_TYPE } from '../../../lib'
 import classes from './DomainField.module.css'
 
+function createHandler<T>(callback: (e: T) => void) {
+    return (_: object, e: T) => {
+        callback(e)
+    }
+}
+
+type FocusEvent = React.FocusEvent<HTMLInputElement>
+type ChangeEvent = React.ChangeEvent<HTMLInputElement>
+
 export function DomainField() {
     const name = 'domainType'
     const validate = (value: string) => (!value ? 'Required' : undefined)
@@ -42,24 +51,30 @@ export function DomainField() {
                     {...aggregateInput.input}
                     className={classes.domainTypeRadioButton}
                     label={DOMAIN_TYPE.AGGREGATE}
-                    onChange={(
-                        _: object,
-                        e: React.ChangeEvent<HTMLInputElement>
-                    ) => {
-                        aggregateInput.input.onChange(e)
-                    }}
+                    onChange={createHandler<ChangeEvent>(
+                        aggregateInput.input.onChange
+                    )}
+                    onBlur={createHandler<FocusEvent>(
+                        aggregateInput.input.onBlur
+                    )}
+                    onFocus={createHandler<FocusEvent>(
+                        aggregateInput.input.onFocus
+                    )}
                 />
 
                 <Radio
                     {...trackerInput.input}
                     label={DOMAIN_TYPE.TRACKER}
                     className={classes.domainTypeRadioButton}
-                    onChange={(
-                        _: object,
-                        e: React.ChangeEvent<HTMLInputElement>
-                    ) => {
-                        trackerInput.input.onChange(e)
-                    }}
+                    onChange={createHandler<ChangeEvent>(
+                        trackerInput.input.onChange
+                    )}
+                    onBlur={createHandler<FocusEvent>(
+                        trackerInput.input.onBlur
+                    )}
+                    onFocus={createHandler<FocusEvent>(
+                        trackerInput.input.onFocus
+                    )}
                 />
             </div>
         </Field>

diff --git a/src/pages/dataElements/fields/NameField.tsx b/src/pages/dataElements/fields/NameField.tsx
@@ -31,7 +31,7 @@ function useValidator() {
 
     return useMemo(
         () =>
-            composeAsyncValidators([
+            composeAsyncValidators<string, FormValues>([
                 checkIsValueTaken as NameValidator,
                 checkMaxLength,
                 required,
@@ -47,7 +47,7 @@ export function NameField() {
     })
 
     return (
-        <FieldRFF
+        <FieldRFF<string | undefined>
             loading={meta.validating}
             component={InputFieldFF}
             dataTest="dataelementsformfields-name"
@@ -60,9 +60,7 @@ export function NameField() {
             helpText={i18n.t(
                 'A data element name should be concise and easy to recognize.'
             )}
-            // Do not pass checkIsValueTaken directly, otherwise memoization
-            // won't work due to additional arguments being passed
-            validate={(name: string) => validator(name)}
+            validate={(name?: string) => validator(name)}
             validateFields={[]}
         />
     )

diff --git a/src/pages/dataElements/fields/ShortNameField.tsx b/src/pages/dataElements/fields/ShortNameField.tsx
@@ -31,7 +31,7 @@ function useValidator() {
 
     return useMemo(
         () =>
-            composeAsyncValidators([
+            composeAsyncValidators<string, FormValues>([
                 checkIsValueTaken as ShortNameValidator,
                 checkMaxLength,
                 required,
@@ -47,7 +47,7 @@ export function ShortNameField() {
     })
 
     return (
-        <FieldRFF
+        <FieldRFF<string | undefined>
             loading={meta.validating}
             component={InputFieldFF}
             dataTest="dataelementsformfields-shortname"
@@ -58,7 +58,7 @@ export function ShortNameField() {
             })}
             name="shortName"
             helpText={i18n.t('Often used in reports where space is limited')}
-            validate={validator}
+            validate={(name?: string) => validator(name)}
             validateFields={[]}
         />
     )