[Tech] Normalise l'architecture Redux & RTK

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/endpoints/publicapi/ApiMissionsController.kt

@@ -22,7 +22,7 @@ class ApiMissionsController(
     private val getMissionById: GetMissionById,
     private val deleteMission: DeleteMission,
     private val getEngagedControlUnits: GetEngagedControlUnits,
-    private val getMissionsByIds: GetMissionsByIds
+    private val getMissionsByIds: GetMissionsByIds,
 ) {
 
     @GetMapping("")

frontend/src/api/ampsAPI.ts

@@ -1,7 +1,7 @@
 import { type EntityState, createEntityAdapter, type Middleware } from '@reduxjs/toolkit'
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 import { boundingExtent } from 'ol/extent'
 
+import { monitorenvPrivateApi } from './api'
 import { setToast } from '../domain/shared_slices/Global'
 
 import type { AMP, AMPFromAPI } from '../domain/entities/AMPs'
@@ -11,11 +11,10 @@ const AMPAdapter = createEntityAdapter<AMP>()
 
 const initialState = AMPAdapter.getInitialState()
 
-export const ampsAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
-  endpoints: build => ({
-    getAMPs: build.query<EntityState<AMP>, void>({
-      query: () => `amps`,
+export const ampsAPI = monitorenvPrivateApi.injectEndpoints({
+  endpoints: builder => ({
+    getAMPs: builder.query<EntityState<AMP>, void>({
+      query: () => `/v1/amps`,
       transformResponse: (response: AMPFromAPI[]) =>
         AMPAdapter.setAll(
           initialState,
@@ -29,10 +28,10 @@ export const ampsAPI = createApi({
           })
         )
     })
-  }),
-  reducerPath: 'amps'
+  })
 })
 
+// TODO Migrate this middleware.
 export const ampsErrorLoggerMiddleware: Middleware = store => next => action => {
   if (ampsAPI.endpoints.getAMPs.matchRejected(action)) {
     store.dispatch(setToast({ message: "Nous n'avons pas pu récupérer les Zones AMP" }))

frontend/src/api/api.ts

@@ -1,15 +1,26 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
+import { GEOSERVER_REMOTE_URL } from '../env'
 import { normalizeRtkBaseQuery } from '../utils/normalizeRtkBaseQuery'
 
 import type { BackendApiErrorResponse } from './types'
 
+// =============================================================================
+// GeoServer API
+
+export const geoserverApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: `${GEOSERVER_REMOTE_URL}/geoserver` }),
+  endpoints: () => ({}),
+  reducerPath: 'monitorenvPrivateApi',
+  tagTypes: ['Missions', 'Reportings']
+})
+
 // =============================================================================
 // Monitorenv Private API
 
 // We'll need that later on for authentication.
 const monitorenvPrivateApiBaseQuery = fetchBaseQuery({
-  baseUrl: '/bff/v1'
+  baseUrl: '/bff'
 })
 export const monitorenvPrivateApi = createApi({
   baseQuery: async (args, api, extraOptions) => {
@@ -27,7 +38,7 @@ export const monitorenvPrivateApi = createApi({
   },
   endpoints: () => ({}),
   reducerPath: 'monitorenvPrivateApi',
-  tagTypes: []
+  tagTypes: ['Missions', 'Reportings']
 })
 
 // =============================================================================

frontend/src/api/controlThemesAPI.ts

@@ -1,18 +1,16 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { monitorenvPrivateApi } from './api'
 
 import type { ControlTheme } from '../domain/entities/controlThemes'
 
-export const controlThemesAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
+export const controlThemesAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: build => ({
     getControlTheme: build.query<ControlTheme, { id: number }>({
-      query: ({ id }) => `controlthemes/${id}`
+      query: ({ id }) => `/v1/controlthemes/${id}`
     }),
     getControlThemes: build.query<ControlTheme[], void>({
-      query: () => `controlthemes`
+      query: () => `/v1/controlthemes`
     })
-  }),
-  reducerPath: 'controlThemes'
+  })
 })
 
 export const { useGetControlThemesQuery } = controlThemesAPI

frontend/src/api/departmentAreasAPI.ts

@@ -9,12 +9,12 @@ const GET_DEPARTMENT_AREAS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer la l
 export const departmentAreasAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: builder => ({
     getDepartmentArea: builder.query<DepartmentArea.DepartmentArea, number>({
-      query: departmentAreaId => `/department_areas/${departmentAreaId}`,
+      query: departmentAreaId => `/v1/department_areas/${departmentAreaId}`,
       transformErrorResponse: response => new FrontendApiError(GET_DEPARTMENT_AREA_ERROR_MESSAGE, response)
     }),
 
     getDepartmentAreas: builder.query<DepartmentArea.DepartmentArea[], void>({
-      query: () => `/department_areas`,
+      query: () => `/v1/department_areas`,
       transformErrorResponse: response => new FrontendApiError(GET_DEPARTMENT_AREAS_ERROR_MESSAGE, response)
     })
   })

frontend/src/api/infractionsAPI.ts

@@ -1,15 +1,13 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { monitorenvPrivateApi } from './api'
 
 import type { NatinfType } from '../domain/entities/natinfs'
 
-export const infractionsAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
+export const infractionsAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: build => ({
     getInfractions: build.query<NatinfType[], void>({
-      query: () => `natinfs`
+      query: () => `/v1/natinfs`
     })
-  }),
-  reducerPath: 'natinfs'
+  })
 })
 
 export const { useGetInfractionsQuery } = infractionsAPI

frontend/src/api/missionsAPI.ts

@@ -1,6 +1,4 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-import { monitorenvPublicApi } from './api'
+import { monitorenvPrivateApi, monitorenvPublicApi } from './api'
 import { ControlUnit } from '../domain/entities/controlUnit'
 
 import type { Mission } from '../domain/entities/missions'
@@ -27,27 +25,26 @@ const getMissionTypesFilter = missionTypes =>
 const getSeaFrontsFilter = seaFronts =>
   seaFronts && seaFronts?.length > 0 && `seaFronts=${encodeURIComponent(seaFronts)}`
 
-export const missionsAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
+export const missionsAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: build => ({
     createMission: build.mutation<Mission, Partial<Mission>>({
       invalidatesTags: [{ id: 'LIST', type: 'Missions' }],
       query: mission => ({
         body: mission,
         method: 'PUT',
-        url: `missions`
+        url: `/v1/missions`
       })
     }),
     deleteMission: build.mutation({
       invalidatesTags: [{ id: 'LIST', type: 'Missions' }],
       query: ({ id }) => ({
         method: 'DELETE',
-        url: `missions/${id}`
+        url: `/v1/missions/${id}`
       })
     }),
     getMission: build.query<Mission, number>({
       providesTags: (_, __, id) => [{ id, type: 'Missions' }],
-      query: id => `missions/${id}`
+      query: id => `/v1/missions/${id}`
     }),
     getMissions: build.query<MissionsResponse, MissionsFilter | void>({
       providesTags: result =>
@@ -58,7 +55,7 @@ export const missionsAPI = createApi({
             [{ id: 'LIST', type: 'Missions' }],
       query: filter =>
         [
-          'missions?',
+          '/v1/missions?',
           getStartDateFilter(filter?.startedAfterDateTime),
           getEndDateFilter(filter?.startedBeforeDateTime),
           getMissionSourceFilter(filter?.missionSource),
@@ -78,12 +75,10 @@ export const missionsAPI = createApi({
       query: ({ id, ...patch }) => ({
         body: { id, ...patch },
         method: 'PUT',
-        url: `missions/${id}`
+        url: `/v1/missions/${id}`
       })
     })
-  }),
-  reducerPath: 'missions',
-  tagTypes: ['Missions']
+  })
 })
 
 export const publicMissionsAPI = monitorenvPublicApi.injectEndpoints({

frontend/src/api/photonAPI.js → frontend/src/api/photonAPI.ts

@@ -7,7 +7,7 @@ export const usePhotonAPI = (search, { lang = 'fr', latlon = undefined, limit =
 
   useEffect(() => {
     if (search) {
-      let searchParams = {
+      let searchParams: Record<string, any> = {
         lang,
         limit,
         q: search

frontend/src/api/regulatoryLayersAPI.js → frontend/src/api/regulatoryLayersAPI.ts

@@ -1,5 +1,4 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
+import { geoserverApi } from './api'
 import { Layers } from '../domain/entities/layers/constants'
 import { GEOSERVER_NAMESPACE, GEOSERVER_REMOTE_URL } from '../env'
 
@@ -18,18 +17,21 @@ export function getAllRegulatoryLayersFromAPI() {
         return response.json()
       }
       response.text().then(text => {
+        // TODO Is this console log necessary?
+        // eslint-disable-next-line no-console
         console.error(text)
       })
       throw Error(REGULATORY_ZONES_ERROR_MESSAGE)
     })
     .catch(error => {
+      // TODO Is this console log necessary?
+      // eslint-disable-next-line no-console
       console.error(error)
       throw Error(REGULATORY_ZONES_ERROR_MESSAGE)
     })
 }
 
-export const regulatoryLayersAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: `${GEOSERVER_REMOTE_URL}/geoserver/` }),
+export const regulatoryLayersAPI = geoserverApi.injectEndpoints({
   endpoints: build => ({
     getRegulatoryLayer: build.query({
       query: ({ id }) => ({
@@ -44,14 +46,14 @@ export const regulatoryLayersAPI = createApi({
         },
         url: 'wfs'
       }),
-      transformResponse: response => response?.features[0]
+      // TODO Type that.
+      transformResponse: (response: any) => response?.features[0]
     }),
     getRegulatoryLayers: build.query({
       query: () =>
         `&propertyName=entity_name,url,layer_name,facade,ref_reg,observation,thematique,echelle,date,duree_validite,date_fin,temporalite,action,objet,type,signataire,geom`
     })
-  }),
-  reducerPath: 'regulatoryLayers'
+  })
 })
 
 export const { useGetRegulatoryLayerQuery, useGetRegulatoryLayersQuery } = regulatoryLayersAPI

frontend/src/api/reportingsAPI.ts

@@ -1,6 +1,6 @@
 import { type EntityState, createEntityAdapter } from '@reduxjs/toolkit'
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
+import { monitorenvPrivateApi } from './api'
 import { getQueryString } from '../utils/getQueryStringFormatted'
 
 import type { Reporting, ReportingDetailed } from '../domain/entities/reporting'
@@ -17,8 +17,7 @@ type ReportingsFilter = {
 const ReportingAdapter = createEntityAdapter<ReportingDetailed>()
 const initialState = ReportingAdapter.getInitialState()
 
-export const reportingsAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
+export const reportingsAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: build => ({
     archiveReportings: build.mutation({
       invalidatesTags: (_, __, results) =>
@@ -28,22 +27,22 @@ export const reportingsAPI = createApi({
       query: ({ ids }: { ids: number[] }) => ({
         body: ids,
         method: 'PUT',
-        url: `reportings/archive`
+        url: `/v1/reportings/archive`
       })
     }),
     createReporting: build.mutation<Partial<Reporting>, Partial<Reporting>>({
       invalidatesTags: [{ id: 'LIST', type: 'Reportings' }],
       query: reporting => ({
         body: reporting,
         method: 'PUT',
-        url: 'reportings'
+        url: '/v1/reportings'
       })
     }),
     deleteReporting: build.mutation({
       invalidatesTags: [{ id: 'LIST', type: 'Reportings' }],
       query: ({ id }) => ({
         method: 'DELETE',
-        url: `reportings/${id}`
+        url: `/v1/reportings/${id}`
       })
     }),
     deleteReportings: build.mutation({
@@ -54,19 +53,19 @@ export const reportingsAPI = createApi({
       query: ({ ids }: { ids: number[] }) => ({
         body: ids,
         method: 'PUT',
-        url: `reportings/delete`
+        url: `/v1/reportings/delete`
       })
     }),
     getReporting: build.query<Reporting, number>({
       providesTags: (_, __, id) => [{ id, type: 'Reportings' }],
-      query: id => `reportings/${id}`
+      query: id => `/v1/reportings/${id}`
     }),
     getReportings: build.query<EntityState<ReportingDetailed>, ReportingsFilter | void>({
       providesTags: result =>
         result?.ids
           ? [{ id: 'LIST', type: 'Reportings' }, ...result.ids.map(id => ({ id, type: 'Reportings' as const }))]
           : [{ id: 'LIST', type: 'Reportings' }],
-      query: filters => getQueryString('reportings', filters),
+      query: filters => getQueryString('/v1/reportings', filters),
       transformResponse: (response: ReportingDetailed[]) => ReportingAdapter.setAll(initialState, response)
     }),
     updateReporting: build.mutation<Reporting, Partial<Reporting>>({
@@ -77,12 +76,10 @@ export const reportingsAPI = createApi({
       query: ({ id, ...patch }) => ({
         body: { id, ...patch },
         method: 'PUT',
-        url: `reportings/${id}`
+        url: `/v1/reportings/${id}`
       })
     })
-  }),
-  reducerPath: 'reportings',
-  tagTypes: ['Reportings']
+  })
 })
 
 export const {

frontend/src/api/semaphoresAPI.ts

@@ -1,20 +1,19 @@
 import { type EntityState, createEntityAdapter } from '@reduxjs/toolkit'
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+import { monitorenvPrivateApi } from './api'
 
 import type { Semaphore } from '../domain/entities/semaphore'
 
 const SemaphoreAdapter = createEntityAdapter<Semaphore>()
 const initialState = SemaphoreAdapter.getInitialState()
 
-export const semaphoresAPI = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/bff/v1' }),
+export const semaphoresAPI = monitorenvPrivateApi.injectEndpoints({
   endpoints: build => ({
     getSemaphores: build.query<EntityState<Semaphore>, void>({
-      query: () => 'semaphores',
+      query: () => '/v1/semaphores',
       transformResponse: (response: Semaphore[]) => SemaphoreAdapter.setAll(initialState, response)
     })
-  }),
-  reducerPath: 'semaphores'
+  })
 })
 
 export const { useGetSemaphoresQuery } = semaphoresAPI