[Backoffice] Correction du cache des objectifs de contrôles

frontend/src/api/index.ts

@@ -65,6 +65,7 @@ export const monitorfishApi = createApi({
   reducerPath: 'monitorfishApi',
   tagTypes: [
     'ControlObjectives',
+    'ControlObjectivesYears',
     'FleetSegments',
     'Gears',
     'Infractions',

frontend/src/features/ControlObjective/apis.ts

@@ -0,0 +1,68 @@
+import { ascend, identity } from 'ramda'
+
+import { monitorfishApi } from '../../api'
+import { ApiError } from '../../libs/ApiError'
+
+import type { ControlObjective, CreateControlObjectivePayload, UpdateControlObjective } from './types'
+
+const UPDATE_CONTROL_OBJECTIVES_ERROR_MESSAGE = "Nous n'avons pas pu mettre à jour l'objectif de contrôle"
+const DELETE_CONTROL_OBJECTIVES_ERROR_MESSAGE = "Nous n'avons pas pu supprimer l'objectif de contrôle"
+const ADD_CONTROL_OBJECTIVES_ERROR_MESSAGE = "Nous n'avons pas pu ajouter l'objectif de contrôle"
+const ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE = "Nous n'avons pas pu ajouter une nouvelle année"
+
+export const controlObjectiveApi = monitorfishApi.injectEndpoints({
+  endpoints: builder => ({
+    addControlObjective: builder.mutation<number, CreateControlObjectivePayload>({
+      invalidatesTags: [{ type: 'ControlObjectives' }],
+      query: createdFields => ({
+        body: createdFields,
+        method: 'POST',
+        url: '/control_objectives'
+      }),
+      transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_ERROR_MESSAGE, response)
+    }),
+    addControlObjectiveYear: builder.mutation<void, void>({
+      invalidatesTags: [{ type: 'ControlObjectivesYears' }],
+      query: () => ({
+        method: 'POST',
+        url: '/control_objectives/years'
+      }),
+      transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE, response)
+    }),
+    deleteControlObjective: builder.mutation<void, number>({
+      invalidatesTags: [{ type: 'ControlObjectives' }],
+      query: id => ({
+        method: 'DELETE',
+        url: `/control_objectives/${id}`
+      }),
+      transformErrorResponse: response => new ApiError(DELETE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response)
+    }),
+    getControlObjectives: builder.query<ControlObjective[], number>({
+      providesTags: () => [{ type: 'ControlObjectives' }],
+      query: year => `/control_objectives/${year}`
+    }),
+    getControlObjectiveYears: builder.query<number[], void>({
+      providesTags: () => [{ type: 'ControlObjectivesYears' }],
+      query: () => '/control_objectives/years',
+      transformResponse: (baseQueryReturnValue: number[]) => baseQueryReturnValue.sort(ascend(identity))
+    }),
+    updateControlObjective: builder.mutation<void, UpdateControlObjective>({
+      invalidatesTags: [{ type: 'ControlObjectives' }],
+      query: ({ id, updatedFields }) => ({
+        body: updatedFields,
+        method: 'PUT',
+        url: `/control_objectives/${id}`
+      }),
+      transformErrorResponse: response => new ApiError(UPDATE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response)
+    })
+  })
+})
+
+export const {
+  useAddControlObjectiveMutation,
+  useAddControlObjectiveYearMutation,
+  useDeleteControlObjectiveMutation,
+  useGetControlObjectivesQuery,
+  useGetControlObjectiveYearsQuery,
+  useUpdateControlObjectiveMutation
+} = controlObjectiveApi

frontend/src/features/Backoffice/ControlObjectiveList/SeaFrontControlObjectives.tsx → frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx

@@ -3,14 +3,9 @@ import { SelectPicker, Table } from 'rsuite'
 import styled from 'styled-components'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { useGetFleetSegmentsQuery } from '../../../api/fleetSegment'
-import { COLORS } from '../../../constants/constants'
-import { addControlObjective } from '../../../domain/use_cases/controlObjective/addControlObjective'
-import deleteControlObjective from '../../../domain/use_cases/controlObjective/deleteControlObjective'
-import updateControlObjective from '../../../domain/use_cases/controlObjective/updateControlObjective'
-import { useBackofficeAppDispatch } from '../../../hooks/useBackofficeAppDispatch'
-import { LoadingSpinnerWall } from '../../../ui/LoadingSpinnerWall'
-import { sortArrayByColumn, SortType } from '../../VesselList/tableSort'
+import { useGetFleetSegmentsQuery } from '../../../../api/fleetSegment'
+import { COLORS } from '../../../../constants/constants'
+import { LoadingSpinnerWall } from '../../../../ui/LoadingSpinnerWall'
 import {
   ControlPriorityCell,
   DeleteCell,
@@ -20,10 +15,16 @@ import {
   ModifiableCell,
   renderRowExpanded,
   SegmentCellWithTitle
-} from '../tableCells'
+} from '../../../Backoffice/tableCells'
+import { sortArrayByColumn, SortType } from '../../../VesselList/tableSort'
+import {
+  useAddControlObjectiveMutation,
+  useDeleteControlObjectiveMutation,
+  useUpdateControlObjectiveMutation
+} from '../../apis'
 
-import type { ControlObjective } from '../../../domain/types/controlObjective'
-import type { FleetSegment } from '../../../domain/types/fleetSegment'
+import type { FleetSegment } from '../../../../domain/types/fleetSegment'
+import type { ControlObjective } from '../../types'
 
 type ControlObjectiveWithMaybeFleetSegment = ControlObjective &
   Partial<FleetSegment> & {
@@ -37,8 +38,6 @@ export type SeaFrontControlObjectivesProps = {
   year: number
 }
 export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFrontControlObjectivesProps) {
-  const dispatch = useBackofficeAppDispatch()
-
   const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([])
   const [controlObjectivesWithMaybeFleetSegment, setControlObjectivesWithMaybeFleetSegment] = useState<
     ControlObjectiveWithMaybeFleetSegment[]
@@ -49,28 +48,38 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
 
   const getFleetSegmentsQuery = useGetFleetSegmentsQuery()
 
+  const [updateControlObjective] = useUpdateControlObjectiveMutation()
+
+  const [addControlObjective] = useAddControlObjectiveMutation()
+
+  const [deleteControlObjective] = useDeleteControlObjectiveMutation()
+
   const addSegmentToFacade = useCallback(
-    async (newSegment: string) => {
+    async (nextSegment: string) => {
       if (!getFleetSegmentsQuery.data) {
         return
       }
 
-      const newId: number | void = await dispatch(addControlObjective(newSegment, facade, year))
+      const newId = await addControlObjective({
+        facade,
+        segment: nextSegment,
+        year
+      })
       if (!newId) {
         return
       }
 
       const foundFleetSegment = (getFleetSegmentsQuery.data || []).find(
-        fleetSegment => fleetSegment.segment === newSegment
+        fleetSegment => fleetSegment.segment === nextSegment
       )
 
-      const nextDataWithSegmentDetails = [
+      const nextControlObjectiveWithFleetSegment = [
         ...controlObjectivesWithMaybeFleetSegment,
         {
           controlPriorityLevel: 1,
           facade,
           id: newId,
-          segment: newSegment,
+          segment: nextSegment,
           target: 1,
           targetNumberOfControlsAtPort: 0,
           targetNumberOfControlsAtSea: 0,
@@ -79,27 +88,35 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
         } as unknown as ControlObjectiveWithMaybeFleetSegment
       ]
 
-      const sortedNextDataWithSegmentDetails = nextDataWithSegmentDetails.sort((a, b) =>
+      const sortedNextDataWithSegmentDetails = nextControlObjectiveWithFleetSegment.sort((a, b) =>
         sortArrayByColumn(a, b, sortColumn, sortType)
       )
 
       setControlObjectivesWithMaybeFleetSegment(sortedNextDataWithSegmentDetails)
       setSegmentToAddToFacade(undefined)
     },
-    [controlObjectivesWithMaybeFleetSegment, dispatch, facade, getFleetSegmentsQuery, sortColumn, sortType, year]
+    [
+      controlObjectivesWithMaybeFleetSegment,
+      addControlObjective,
+      facade,
+      getFleetSegmentsQuery,
+      sortColumn,
+      sortType,
+      year
+    ]
   )
 
   const deleteControlObjectiveRow = useCallback(
     async (id: number) => {
-      await dispatch(deleteControlObjective(id))
+      await deleteControlObjective(id)
 
       const nextControlObjectivesWithMaybeFleetSegment = controlObjectivesWithMaybeFleetSegment.filter(
         controlObjectiveWithMaybeFleetSegment => controlObjectiveWithMaybeFleetSegment.id !== id
       )
 
       setControlObjectivesWithMaybeFleetSegment(nextControlObjectivesWithMaybeFleetSegment)
     },
-    [controlObjectivesWithMaybeFleetSegment, dispatch]
+    [controlObjectivesWithMaybeFleetSegment, deleteControlObjective]
   )
 
   const updateControlObjectiveDebounced = useDebouncedCallback(
@@ -109,15 +126,18 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron
       value,
       previousControlObjectivesWithMaybeFleetSegment: ControlObjectiveWithMaybeFleetSegment[]
     ) => {
-      const updateData = {
+      const updatedFields = {
         controlPriorityLevel: null,
         targetNumberOfControlsAtPort: null,
         targetNumberOfControlsAtSea: null,
         // eslint-disable-next-line sort-keys-fix/sort-keys-fix
         [key]: value
       }
 
-      dispatch(updateControlObjective(id, updateData)).catch(() => {
+      updateControlObjective({
+        id: id.toString(),
+        updatedFields
+      }).catch(() => {
         setControlObjectivesWithMaybeFleetSegment(previousControlObjectivesWithMaybeFleetSegment)
       })
     },