Move engaged control units logic to sub component

MTES-MCT · Oct 16, 2023 · 3f15aa3 · 3f15aa3
1 parent 1f5b6dd
commit 3f15aa3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts b/frontend/cypress/e2e/side_window/mission/create_mission.spec.ts
@@ -153,9 +153,13 @@ context('Mission', () => {
   it('A warning should be displayed When a control unit is already engaged in a mission ', () => {
     // Given
     cy.wait(200)
+    cy.intercept('GET', '/api/v1/missions/engaged_control_units').as('getEngagedControlUnits')
+
+    // When
     cy.get('*[data-cy="edit-mission-43"]').click({ force: true })
-    cy.intercept('PUT', `/bff/v1/missions/43`).as('updateMission')
+    cy.wait('@getEngagedControlUnits')
 
+    // Then
     cy.get('body').contains('Cette unité est actuellement sélectionnée dans une autre mission en cours.')
   })
 })
diff --git a/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx b/frontend/src/features/missions/MissionForm/ControlUnitSelector.tsx
@@ -1,19 +1,21 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { FormikTextInput, FieldError, Message, Level } from '@mtes-mct/monitor-ui'
+import { FieldError, FormikTextInput, Level, Message } from '@mtes-mct/monitor-ui'
 import { useField } from 'formik'
 import _ from 'lodash'
 import { type MutableRefObject, useMemo, useRef } from 'react'
 import { Form, IconButton, TagPicker } from 'rsuite'
 import styled from 'styled-components'
 
+import { FIVE_MINUTES } from '../../../api/APIWorker'
 import { useGetLegacyControlUnitsQuery } from '../../../api/legacyControlUnitsAPI'
+import { useGetEngagedControlUnitsQuery } from '../../../api/missionsAPI'
 import { FormikErrorWrapper } from '../../../uiMonitor/CustomFormikFields/FormikErrorWrapper'
 import { SelectPicker } from '../../../uiMonitor/CustomRsuite/SelectPicker'
 import { ReactComponent as DeleteSVG } from '../../../uiMonitor/icons/Delete.svg'
 
 import type { ControlUnit } from '../../../domain/entities/controlUnit'
 
-export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, isEngaged, removeControlUnit, ...props }) {
+export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, removeControlUnit, ...props }) {
   const [administrationField, administrationMeta, administrationHelpers] = useField<string>(
     `controlUnits.${controlUnitIndex}.administration`
   )
@@ -24,9 +26,22 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, isEngag
   )
 
   const resourcesRef = useRef() as MutableRefObject<HTMLDivElement>
-  const { data, isError, isLoading } = useGetLegacyControlUnitsQuery()
+  const { data: controlUnitsData, isError, isLoading } = useGetLegacyControlUnitsQuery()
 
-  const filteredControlUnits = useMemo(() => data?.filter(unit => !unit.isArchived) || [], [data])
+  const filteredControlUnits = useMemo(
+    () => controlUnitsData?.filter(unit => !unit.isArchived) || [],
+    [controlUnitsData]
+  )
+
+  const { data: engagedControlUnitsData } = useGetEngagedControlUnitsQuery(undefined, { pollingInterval: FIVE_MINUTES })
+
+  const engagedControlUnits = useMemo(() => {
+    if (!engagedControlUnitsData) {
+      return []
+    }
+
+    return engagedControlUnitsData
+  }, [engagedControlUnitsData])
 
   const administrationList = _.chain(filteredControlUnits)
     .map(unit => unit.administration)
@@ -91,9 +106,12 @@ export function ControlUnitSelector({ controlUnitIndex, controlUnitPath, isEngag
   if (isError) {
     return <div>Erreur</div>
   }
+
   if (isLoading) {
     return <div>Chargement</div>
   }
+
+  const isEngaged = !!engagedControlUnits.find(engaged => engaged.id === unitField.value)
   const resourceUnitIndexDisplayed = controlUnitIndex + 1
 
   return (

diff --git a/frontend/src/features/missions/MissionForm/ControlUnitsForm.tsx b/frontend/src/features/missions/MissionForm/ControlUnitsForm.tsx
@@ -1,21 +1,9 @@
 import { Accent, Button, Icon, Size } from '@mtes-mct/monitor-ui'
-import { useMemo } from 'react'
 
 import { ControlUnitSelector } from './ControlUnitSelector'
-import { useGetEngagedControlUnitsQuery } from '../../../api/missionsAPI'
 import { controlUnitFactory } from '../Missions.helpers'
 
 export function ControlUnitsForm({ form, push, remove }) {
-  const { data: engagedControlUnitsData } = useGetEngagedControlUnitsQuery()
-
-  const engagedControlUnits = useMemo(() => {
-    if (!engagedControlUnitsData) {
-      return []
-    }
-
-    return engagedControlUnitsData
-  }, [engagedControlUnitsData])
-
   const handleAddControlUnit = () => {
     push(controlUnitFactory())
   }
@@ -28,13 +16,12 @@ export function ControlUnitsForm({ form, push, remove }) {
     <div>
       {form?.values.controlUnits?.length > 0 && (
         <>
-          {form.values.controlUnits.map(({ id }, index) => (
+          {form.values.controlUnits.map((_, index) => (
             <ControlUnitSelector
               // eslint-disable-next-line react/no-array-index-key
               key={index}
               controlUnitIndex={index}
               controlUnitPath={`controlUnits[${index}]`}
-              isEngaged={!!engagedControlUnits.find(engaged => engaged.id === id)}
               removeControlUnit={handleRemoveControlUnit(index)}
             />
           ))}