Show control date field error

MTES-MCT · Mar 27, 2024 · e96a3a4 · e96a3a4
1 parent 2597907
commit e96a3a4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 53 deletions.
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/AirControlForm.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/AirControlForm.tsx
@@ -1,5 +1,6 @@
+import { DatePickerField } from '@features/Mission/components/MissionForm/ActionForm/shared/DatePickerField'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import { FormikDatePicker, FormikEffect, FormikTextarea, Icon, useNewWindow } from '@mtes-mct/monitor-ui'
+import { FormikEffect, FormikTextarea, Icon } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
 import { noop } from 'lodash/fp'
 import { useMemo } from 'react'
@@ -25,8 +26,6 @@ type AirControlFormProps = Readonly<{
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
 }>
 export function AirControlForm({ initialValues, onChange }: AirControlFormProps) {
-  const { newWindowContainerRef } = useNewWindow()
-
   const isClosing = useMainAppSelector(store => store.missionForm.isClosing)
 
   const titleDate = useMemo(
@@ -55,16 +54,7 @@ export function AirControlForm({ initialValues, onChange }: AirControlFormProps)
           <FormBody>
             <VesselField />
 
-            <FormikDatePicker
-              baseContainer={newWindowContainerRef.current}
-              isErrorMessageHidden
-              isLight
-              isRequired
-              isStringDate
-              label="Date et heure du contrôle"
-              name="actionDatetimeUtc"
-              withTime
-            />
+            <DatePickerField />
 
             <FormikCoordinatesPicker />
 

diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/LandControlForm.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/LandControlForm.tsx
@@ -1,12 +1,6 @@
+import { DatePickerField } from '@features/Mission/components/MissionForm/ActionForm/shared/DatePickerField'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import {
-  FormikCheckbox,
-  FormikDatePicker,
-  FormikEffect,
-  FormikTextarea,
-  Icon,
-  useNewWindow
-} from '@mtes-mct/monitor-ui'
+import { FormikCheckbox, FormikEffect, FormikTextarea, Icon } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
 import { noop } from 'lodash/fp'
 import { useMemo } from 'react'
@@ -38,8 +32,6 @@ type LandControlFormProps = Readonly<{
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
 }>
 export function LandControlForm({ initialValues, onChange }: LandControlFormProps) {
-  const { newWindowContainerRef } = useNewWindow()
-
   const isClosing = useMainAppSelector(store => store.missionForm.isClosing)
 
   const titleDate = useMemo(
@@ -68,16 +60,7 @@ export function LandControlForm({ initialValues, onChange }: LandControlFormProp
           <FormBody>
             <VesselField />
 
-            <FormikDatePicker
-              baseContainer={newWindowContainerRef.current}
-              isErrorMessageHidden
-              isLight
-              isRequired
-              isStringDate
-              label="Date et heure du contrôle"
-              name="actionDatetimeUtc"
-              withTime
-            />
+            <DatePickerField />
 
             <FormikPortSelect />
 

diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/SeaControlForm.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/SeaControlForm.tsx
@@ -1,12 +1,6 @@
+import { DatePickerField } from '@features/Mission/components/MissionForm/ActionForm/shared/DatePickerField'
 import { useMainAppSelector } from '@hooks/useMainAppSelector'
-import {
-  FormikCheckbox,
-  FormikDatePicker,
-  FormikEffect,
-  FormikTextarea,
-  Icon,
-  useNewWindow
-} from '@mtes-mct/monitor-ui'
+import { FormikCheckbox, FormikEffect, FormikTextarea, Icon } from '@mtes-mct/monitor-ui'
 import { Formik } from 'formik'
 import { noop } from 'lodash/fp'
 import { useMemo } from 'react'
@@ -38,8 +32,6 @@ type SeaControlFormProps = Readonly<{
   onChange: (nextValues: MissionActionFormValues) => Promisable<void>
 }>
 export function SeaControlForm({ initialValues, onChange }: SeaControlFormProps) {
-  const { newWindowContainerRef } = useNewWindow()
-
   const isClosing = useMainAppSelector(store => store.missionForm.isClosing)
 
   const titleDate = useMemo(
@@ -68,16 +60,7 @@ export function SeaControlForm({ initialValues, onChange }: SeaControlFormProps)
           <FormBody>
             <VesselField />
 
-            <FormikDatePicker
-              baseContainer={newWindowContainerRef.current}
-              isErrorMessageHidden
-              isLight
-              isRequired
-              isStringDate
-              label="Date et heure du contrôle"
-              name="actionDatetimeUtc"
-              withTime
-            />
+            <DatePickerField />
 
             <FormikCoordinatesPicker />
 

diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/DatePickerField.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/DatePickerField.tsx
@@ -0,0 +1,28 @@
+import { HIDDEN_ERROR } from '@features/Mission/components/MissionForm/constants'
+import { FieldError, FormikDatePicker, useNewWindow } from '@mtes-mct/monitor-ui'
+import { useFormikContext } from 'formik'
+
+import type { MissionActionFormValues } from '../../types'
+
+export function DatePickerField() {
+  const { newWindowContainerRef } = useNewWindow()
+  const { errors } = useFormikContext<MissionActionFormValues>()
+
+  const error = errors.actionDatetimeUtc
+
+  return (
+    <>
+      <FormikDatePicker
+        baseContainer={newWindowContainerRef.current}
+        isErrorMessageHidden
+        isLight
+        isRequired
+        isStringDate
+        label="Date et heure du contrôle"
+        name="actionDatetimeUtc"
+        withTime
+      />
+      {error && error !== HIDDEN_ERROR && <FieldError>{error}</FieldError>}
+    </>
+  )
+}