From 13a1c0a140ea66f48897e485235f59be195e6f05 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Mon, 6 Nov 2023 11:18:54 +0100 Subject: [PATCH 1/4] Invalidate control objectives rtk cache on update --- frontend/src/api/controlObjective.ts | 85 ------------------- .../controlObjective/addControlObjective.ts | 12 --- .../addControlObjectiveYear.js | 13 --- .../deleteControlObjective.js | 14 --- .../updateControlObjective.js | 15 ---- .../Backoffice/ControlObjectives/apis.ts | 68 +++++++++++++++ .../components}/SeaFrontControlObjectives.tsx | 64 +++++++++----- .../components}/index.tsx | 21 +++-- .../Backoffice/ControlObjectives/types.ts} | 21 +++-- frontend/src/router.tsx | 2 +- 10 files changed, 139 insertions(+), 176 deletions(-) delete mode 100644 frontend/src/api/controlObjective.ts delete mode 100644 frontend/src/domain/use_cases/controlObjective/addControlObjective.ts delete mode 100644 frontend/src/domain/use_cases/controlObjective/addControlObjectiveYear.js delete mode 100644 frontend/src/domain/use_cases/controlObjective/deleteControlObjective.js delete mode 100644 frontend/src/domain/use_cases/controlObjective/updateControlObjective.js create mode 100644 frontend/src/features/Backoffice/ControlObjectives/apis.ts rename frontend/src/features/Backoffice/{ControlObjectiveList => ControlObjectives/components}/SeaFrontControlObjectives.tsx (87%) rename frontend/src/features/Backoffice/{ControlObjectiveList => ControlObjectives/components}/index.tsx (90%) rename frontend/src/{domain/types/controlObjective.ts => features/Backoffice/ControlObjectives/types.ts} (53%) diff --git a/frontend/src/api/controlObjective.ts b/frontend/src/api/controlObjective.ts deleted file mode 100644 index 6e50ade88a..0000000000 --- a/frontend/src/api/controlObjective.ts +++ /dev/null @@ -1,85 +0,0 @@ -import ky from 'ky' -import { ascend, identity } from 'ramda' - -import { monitorfishApi, monitorfishApiKy } from '.' -import { ApiError } from '../libs/ApiError' - -import type { ControlObjective, UpdateControlObjective } from '../domain/types/controlObjective' - -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 => ({ - getControlObjectives: builder.query({ - providesTags: () => [{ type: 'ControlObjectives' }], - query: year => `control_objectives/${year}` - }), - getControlObjectiveYears: builder.query({ - providesTags: () => [{ type: 'ControlObjectives' }], - query: () => 'control_objectives/years', - transformResponse: (baseQueryReturnValue: number[]) => baseQueryReturnValue.sort(ascend(identity)) - }) - }) -}) - -export const { useGetControlObjectivesQuery, useGetControlObjectiveYearsQuery } = controlObjectiveApi - -/** - * Update a control Objective - */ -export async function updateControlObjectiveFromAPI(id: string, updatedFields: UpdateControlObjective) { - try { - return await monitorfishApiKy.put(`/bff/v1/control_objectives/${id}`, { - json: updatedFields - }) - } catch (err) { - throw new ApiError(UPDATE_CONTROL_OBJECTIVES_ERROR_MESSAGE, err) - } -} - -/** - * Delete a control Objective - */ -export async function deleteControlObjectiveFromAPI(id: string): Promise { - try { - await monitorfishApiKy.delete(`/bff/v1/control_objectives/${id}`) - } catch (err) { - throw new ApiError(DELETE_CONTROL_OBJECTIVES_ERROR_MESSAGE, err) - } -} - -/** - * Add a control Objective - * Return the new id - */ -export async function addControlObjectiveFromAPI(segment: string, facade: string, year: number): Promise { - const createFields = { - facade, - segment, - year - } - - try { - return await ky - .post('/bff/v1/control_objectives', { - json: createFields - }) - .json() - } catch (err) { - throw new ApiError(ADD_CONTROL_OBJECTIVES_ERROR_MESSAGE, err) - } -} - -/** - * Add a new control Objective year - */ -export async function addControlObjectiveYearFromAPI(): Promise { - try { - await monitorfishApiKy.post('/bff/v1/control_objectives/years') - } catch (err) { - throw new ApiError(ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE, err) - } -} diff --git a/frontend/src/domain/use_cases/controlObjective/addControlObjective.ts b/frontend/src/domain/use_cases/controlObjective/addControlObjective.ts deleted file mode 100644 index 76d9b6cd29..0000000000 --- a/frontend/src/domain/use_cases/controlObjective/addControlObjective.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { addControlObjectiveFromAPI } from '../../../api/controlObjective' -import { setError } from '../../shared_slices/Global' - -/** - * Add a control Objective - */ -export const addControlObjective = - (segment: string, facade: string, year: number) => - (dispatch): Promise => - addControlObjectiveFromAPI(segment, facade, year).catch(error => { - dispatch(setError(error)) - }) diff --git a/frontend/src/domain/use_cases/controlObjective/addControlObjectiveYear.js b/frontend/src/domain/use_cases/controlObjective/addControlObjectiveYear.js deleted file mode 100644 index 9ad556fae6..0000000000 --- a/frontend/src/domain/use_cases/controlObjective/addControlObjectiveYear.js +++ /dev/null @@ -1,13 +0,0 @@ -import { setError } from '../../shared_slices/Global' -import { addControlObjectiveYearFromAPI } from '../../../api/controlObjective' - -/** - * Add a new control Objective year - */ -const addControlObjectiveYear = () => dispatch => { - return addControlObjectiveYearFromAPI().catch(error => { - dispatch(setError(error)) - }) -} - -export default addControlObjectiveYear diff --git a/frontend/src/domain/use_cases/controlObjective/deleteControlObjective.js b/frontend/src/domain/use_cases/controlObjective/deleteControlObjective.js deleted file mode 100644 index a2b0d51aaa..0000000000 --- a/frontend/src/domain/use_cases/controlObjective/deleteControlObjective.js +++ /dev/null @@ -1,14 +0,0 @@ -import { setError } from '../../shared_slices/Global' -import { deleteControlObjectiveFromAPI } from '../../../api/controlObjective' - -/** - * Delete a control Objective - * @param {number} id - The id of the control objective - */ -const deleteControlObjective = (id) => dispatch => { - return deleteControlObjectiveFromAPI(id).catch(error => { - dispatch(setError(error)) - }) -} - -export default deleteControlObjective diff --git a/frontend/src/domain/use_cases/controlObjective/updateControlObjective.js b/frontend/src/domain/use_cases/controlObjective/updateControlObjective.js deleted file mode 100644 index ec98a57609..0000000000 --- a/frontend/src/domain/use_cases/controlObjective/updateControlObjective.js +++ /dev/null @@ -1,15 +0,0 @@ -import { setError } from '../../shared_slices/Global' -import { updateControlObjectiveFromAPI } from '../../../api/controlObjective' - -/** - * Update a control Objective - * @param {number} id - The id of the control objective - * @param {UpdateControlObjective} updatedFields - The fields to update - */ -const updateControlObjective = (id, updatedFields) => dispatch => { - return updateControlObjectiveFromAPI(id, updatedFields).catch(error => { - dispatch(setError(error)) - }) -} - -export default updateControlObjective diff --git a/frontend/src/features/Backoffice/ControlObjectives/apis.ts b/frontend/src/features/Backoffice/ControlObjectives/apis.ts new file mode 100644 index 0000000000..2635a2b303 --- /dev/null +++ b/frontend/src/features/Backoffice/ControlObjectives/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({ + invalidatesTags: [{ type: 'ControlObjectives' }], + query: createdFields => ({ + body: createdFields, + method: 'POST', + url: '/bff/v1/control_objectives' + }), + transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) + }), + addControlObjectiveYear: builder.mutation({ + invalidatesTags: [{ type: 'ControlObjectives' }], + query: () => ({ + method: 'POST', + url: '/bff/v1/control_objectives/years' + }), + transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE, response) + }), + deleteControlObjective: builder.mutation({ + invalidatesTags: [{ type: 'ControlObjectives' }], + query: id => ({ + method: 'DELETE', + url: `/bff/v1/control_objectives/${id}` + }), + transformErrorResponse: response => new ApiError(DELETE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) + }), + getControlObjectives: builder.query({ + providesTags: () => [{ type: 'ControlObjectives' }], + query: year => `control_objectives/${year}` + }), + getControlObjectiveYears: builder.query({ + providesTags: () => [{ type: 'ControlObjectives' }], + query: () => 'control_objectives/years', + transformResponse: (baseQueryReturnValue: number[]) => baseQueryReturnValue.sort(ascend(identity)) + }), + updateControlObjective: builder.mutation({ + invalidatesTags: [{ type: 'ControlObjectives' }], + query: ({ id, updatedFields }) => ({ + body: updatedFields, + method: 'PUT', + url: `/bff/v1/control_objectives/${id}` + }), + transformErrorResponse: response => new ApiError(UPDATE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) + }) + }) +}) + +export const { + useAddControlObjectiveMutation, + useAddControlObjectiveYearMutation, + useDeleteControlObjectiveMutation, + useGetControlObjectivesQuery, + useGetControlObjectiveYearsQuery, + useUpdateControlObjectiveMutation +} = controlObjectiveApi diff --git a/frontend/src/features/Backoffice/ControlObjectiveList/SeaFrontControlObjectives.tsx b/frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx similarity index 87% rename from frontend/src/features/Backoffice/ControlObjectiveList/SeaFrontControlObjectives.tsx rename to frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx index 4347d7a5ae..62cbcfe7c5 100644 --- a/frontend/src/features/Backoffice/ControlObjectiveList/SeaFrontControlObjectives.tsx +++ b/frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx @@ -3,14 +3,10 @@ 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 { sortArrayByColumn, SortType } from '../../../VesselList/tableSort' import { ControlPriorityCell, DeleteCell, @@ -20,10 +16,15 @@ import { ModifiableCell, renderRowExpanded, SegmentCellWithTitle -} from '../tableCells' +} from '../../tableCells' +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 & { @@ -37,8 +38,6 @@ export type SeaFrontControlObjectivesProps = { year: number } export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFrontControlObjectivesProps) { - const dispatch = useBackofficeAppDispatch() - const [expandedRowKeys, setExpandedRowKeys] = useState([]) const [controlObjectivesWithMaybeFleetSegment, setControlObjectivesWithMaybeFleetSegment] = useState< ControlObjectiveWithMaybeFleetSegment[] @@ -49,19 +48,29 @@ 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 = [ @@ -70,7 +79,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron controlPriorityLevel: 1, facade, id: newId, - segment: newSegment, + segment: nextSegment, target: 1, targetNumberOfControlsAtPort: 0, targetNumberOfControlsAtSea: 0, @@ -86,12 +95,20 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron 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.toString()) const nextControlObjectivesWithMaybeFleetSegment = controlObjectivesWithMaybeFleetSegment.filter( controlObjectiveWithMaybeFleetSegment => controlObjectiveWithMaybeFleetSegment.id !== id @@ -99,7 +116,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron setControlObjectivesWithMaybeFleetSegment(nextControlObjectivesWithMaybeFleetSegment) }, - [controlObjectivesWithMaybeFleetSegment, dispatch] + [controlObjectivesWithMaybeFleetSegment, deleteControlObjective] ) const updateControlObjectiveDebounced = useDebouncedCallback( @@ -109,7 +126,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron value, previousControlObjectivesWithMaybeFleetSegment: ControlObjectiveWithMaybeFleetSegment[] ) => { - const updateData = { + const updatedFields = { controlPriorityLevel: null, targetNumberOfControlsAtPort: null, targetNumberOfControlsAtSea: null, @@ -117,7 +134,10 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron [key]: value } - dispatch(updateControlObjective(id, updateData)).catch(() => { + updateControlObjective({ + id: id.toString(), + updatedFields + }).catch(() => { setControlObjectivesWithMaybeFleetSegment(previousControlObjectivesWithMaybeFleetSegment) }) }, diff --git a/frontend/src/features/Backoffice/ControlObjectiveList/index.tsx b/frontend/src/features/Backoffice/ControlObjectives/components/index.tsx similarity index 90% rename from frontend/src/features/Backoffice/ControlObjectiveList/index.tsx rename to frontend/src/features/Backoffice/ControlObjectives/components/index.tsx index 9aa5d84dea..a88c62b81d 100644 --- a/frontend/src/features/Backoffice/ControlObjectiveList/index.tsx +++ b/frontend/src/features/Backoffice/ControlObjectives/components/index.tsx @@ -6,12 +6,14 @@ import { InputPicker } from 'rsuite' import styled from 'styled-components' import { SeaFrontControlObjectives } from './SeaFrontControlObjectives' -import { useGetControlObjectivesQuery, useGetControlObjectiveYearsQuery } from '../../../api/controlObjective' -import { COLORS } from '../../../constants/constants' -import { SeaFront } from '../../../domain/entities/seaFront/constants' -import addControlObjectiveYear from '../../../domain/use_cases/controlObjective/addControlObjectiveYear' -import { useBackofficeAppDispatch } from '../../../hooks/useBackofficeAppDispatch' -import { LoadingSpinnerWall } from '../../../ui/LoadingSpinnerWall' +import { COLORS } from '../../../../constants/constants' +import { SeaFront } from '../../../../domain/entities/seaFront/constants' +import { LoadingSpinnerWall } from '../../../../ui/LoadingSpinnerWall' +import { + useAddControlObjectiveYearMutation, + useGetControlObjectivesQuery, + useGetControlObjectiveYearsQuery +} from '../apis' import type { Option } from '@mtes-mct/monitor-ui' @@ -20,12 +22,13 @@ const LAST_YEAR_FROM_NOW = NOW_YEAR - 1 const NEXT_YEAR_FROM_NOW = NOW_YEAR + 1 export function ControlObjectiveList() { - const dispatch = useBackofficeAppDispatch() const [selectedYear, setSelectedYear] = useState(undefined) const getControlObjectivesQuery = useGetControlObjectivesQuery(selectedYear || skipToken) const getControlObjectiveYearsQuery = useGetControlObjectiveYearsQuery() + const [addControlObjectiveYear] = useAddControlObjectiveYearMutation() + const nextYearToAddFromEntries = useMemo( () => getControlObjectiveYearsQuery.data && getControlObjectiveYearsQuery.data.length > 0 @@ -54,13 +57,13 @@ export function ControlObjectiveList() { return } - await dispatch(addControlObjectiveYear()) + await addControlObjectiveYear() // Since there is no query param, we need to explicitely ask for a refetch getControlObjectiveYearsQuery.refetch() setSelectedYear(nextYearToAddFromEntries) - }, [dispatch, getControlObjectiveYearsQuery, nextYearToAddFromEntries]) + }, [addControlObjectiveYear, getControlObjectiveYearsQuery, nextYearToAddFromEntries]) useEffect(() => { if (!getControlObjectiveYearsQuery.data) { diff --git a/frontend/src/domain/types/controlObjective.ts b/frontend/src/features/Backoffice/ControlObjectives/types.ts similarity index 53% rename from frontend/src/domain/types/controlObjective.ts rename to frontend/src/features/Backoffice/ControlObjectives/types.ts index f4af682134..ec9818d62b 100644 --- a/frontend/src/domain/types/controlObjective.ts +++ b/frontend/src/features/Backoffice/ControlObjectives/types.ts @@ -3,15 +3,26 @@ import type { Float, Integer } from 'type-fest' export type ControlObjective = { controlPriorityLevel: Float facade: string - id: Integer + id: number segment: string - targetNumberOfControlsAtPort: Integer - targetNumberOfControlsAtSea: Integer - year: Integer + targetNumberOfControlsAtPort: number + targetNumberOfControlsAtSea: number + year: number } -export type UpdateControlObjective = { +export type UpdateControlObjectivePayload = { controlPriorityLevel: Float | null targetNumberOfControlsAtPort: Integer | null targetNumberOfControlsAtSea: Integer | null } + +export type UpdateControlObjective = { + id: string + updatedFields: UpdateControlObjectivePayload +} + +export type CreateControlObjectivePayload = { + facade: string + segment: string + year: number +} diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 245e78f899..98b7e8168b 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -1,7 +1,7 @@ import { createBrowserRouter, Navigate } from 'react-router-dom' import { Backoffice } from './features/Backoffice' -import { ControlObjectiveList } from './features/Backoffice/ControlObjectiveList' +import { ControlObjectiveList } from './features/Backoffice/ControlObjectives/components' import { EditRegulation } from './features/Backoffice/edit_regulation/EditRegulation' import { FleetSegments } from './features/Backoffice/fleet_segments/FleetSegments' import { MainWindow } from './features/MainWindow' From 5b96883413c8c7376b113a86c845340dd5a96cbb Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Mon, 6 Nov 2023 13:57:32 +0100 Subject: [PATCH 2/4] Fix paths --- frontend/src/api/index.ts | 1 + .../Backoffice/ControlObjectives/apis.ts | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index 59deb07ff9..f7c5bd5362 100644 --- a/frontend/src/api/index.ts +++ b/frontend/src/api/index.ts @@ -65,6 +65,7 @@ export const monitorfishApi = createApi({ reducerPath: 'monitorfishApi', tagTypes: [ 'ControlObjectives', + 'ControlObjectivesYears', 'FleetSegments', 'Gears', 'Infractions', diff --git a/frontend/src/features/Backoffice/ControlObjectives/apis.ts b/frontend/src/features/Backoffice/ControlObjectives/apis.ts index 2635a2b303..2b13d2eccf 100644 --- a/frontend/src/features/Backoffice/ControlObjectives/apis.ts +++ b/frontend/src/features/Backoffice/ControlObjectives/apis.ts @@ -17,15 +17,15 @@ export const controlObjectiveApi = monitorfishApi.injectEndpoints({ query: createdFields => ({ body: createdFields, method: 'POST', - url: '/bff/v1/control_objectives' + url: '/control_objectives' }), transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) }), addControlObjectiveYear: builder.mutation({ - invalidatesTags: [{ type: 'ControlObjectives' }], + invalidatesTags: [{ type: 'ControlObjectivesYears' }], query: () => ({ method: 'POST', - url: '/bff/v1/control_objectives/years' + url: '/control_objectives/years' }), transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE, response) }), @@ -33,17 +33,17 @@ export const controlObjectiveApi = monitorfishApi.injectEndpoints({ invalidatesTags: [{ type: 'ControlObjectives' }], query: id => ({ method: 'DELETE', - url: `/bff/v1/control_objectives/${id}` + url: `/control_objectives/${id}` }), transformErrorResponse: response => new ApiError(DELETE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) }), getControlObjectives: builder.query({ providesTags: () => [{ type: 'ControlObjectives' }], - query: year => `control_objectives/${year}` + query: year => `/control_objectives/${year}` }), getControlObjectiveYears: builder.query({ - providesTags: () => [{ type: 'ControlObjectives' }], - query: () => 'control_objectives/years', + providesTags: () => [{ type: 'ControlObjectivesYears' }], + query: () => '/control_objectives/years', transformResponse: (baseQueryReturnValue: number[]) => baseQueryReturnValue.sort(ascend(identity)) }), updateControlObjective: builder.mutation({ @@ -51,7 +51,7 @@ export const controlObjectiveApi = monitorfishApi.injectEndpoints({ query: ({ id, updatedFields }) => ({ body: updatedFields, method: 'PUT', - url: `/bff/v1/control_objectives/${id}` + url: `/control_objectives/${id}` }), transformErrorResponse: response => new ApiError(UPDATE_CONTROL_OBJECTIVES_ERROR_MESSAGE, response) }) From 79c49a7c61d5e256de8c604e067aa032f688b367 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Mon, 6 Nov 2023 15:21:25 +0100 Subject: [PATCH 3/4] Move table to /features --- .../ControlObjectives => ControlObjective}/apis.ts | 4 ++-- .../ControlObjectiveTable}/SeaFrontControlObjectives.tsx | 8 ++++---- .../components/ControlObjectiveTable}/index.tsx | 4 ++-- .../ControlObjectives => ControlObjective}/types.ts | 0 frontend/src/router.tsx | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) rename frontend/src/features/{Backoffice/ControlObjectives => ControlObjective}/apis.ts (96%) rename frontend/src/features/{Backoffice/ControlObjectives/components => ControlObjective/components/ControlObjectiveTable}/SeaFrontControlObjectives.tsx (99%) rename frontend/src/features/{Backoffice/ControlObjectives/components => ControlObjective/components/ControlObjectiveTable}/index.tsx (99%) rename frontend/src/features/{Backoffice/ControlObjectives => ControlObjective}/types.ts (100%) diff --git a/frontend/src/features/Backoffice/ControlObjectives/apis.ts b/frontend/src/features/ControlObjective/apis.ts similarity index 96% rename from frontend/src/features/Backoffice/ControlObjectives/apis.ts rename to frontend/src/features/ControlObjective/apis.ts index 2b13d2eccf..3ab77c94fb 100644 --- a/frontend/src/features/Backoffice/ControlObjectives/apis.ts +++ b/frontend/src/features/ControlObjective/apis.ts @@ -1,7 +1,7 @@ import { ascend, identity } from 'ramda' -import { monitorfishApi } from '../../../api' -import { ApiError } from '../../../libs/ApiError' +import { monitorfishApi } from '../../api' +import { ApiError } from '../../libs/ApiError' import type { ControlObjective, CreateControlObjectivePayload, UpdateControlObjective } from './types' diff --git a/frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx similarity index 99% rename from frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx rename to frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx index 62cbcfe7c5..4093a8d46f 100644 --- a/frontend/src/features/Backoffice/ControlObjectives/components/SeaFrontControlObjectives.tsx +++ b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx @@ -6,7 +6,6 @@ import { useDebouncedCallback } from 'use-debounce' import { useGetFleetSegmentsQuery } from '../../../../api/fleetSegment' import { COLORS } from '../../../../constants/constants' import { LoadingSpinnerWall } from '../../../../ui/LoadingSpinnerWall' -import { sortArrayByColumn, SortType } from '../../../VesselList/tableSort' import { ControlPriorityCell, DeleteCell, @@ -16,15 +15,16 @@ import { ModifiableCell, renderRowExpanded, SegmentCellWithTitle -} from '../../tableCells' +} from '../../../Backoffice/tableCells' +import { sortArrayByColumn, SortType } from '../../../VesselList/tableSort' import { useAddControlObjectiveMutation, useDeleteControlObjectiveMutation, useUpdateControlObjectiveMutation -} from '../apis' +} from '../../apis' import type { FleetSegment } from '../../../../domain/types/fleetSegment' -import type { ControlObjective } from '../types' +import type { ControlObjective } from '../../types' type ControlObjectiveWithMaybeFleetSegment = ControlObjective & Partial & { diff --git a/frontend/src/features/Backoffice/ControlObjectives/components/index.tsx b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/index.tsx similarity index 99% rename from frontend/src/features/Backoffice/ControlObjectives/components/index.tsx rename to frontend/src/features/ControlObjective/components/ControlObjectiveTable/index.tsx index a88c62b81d..9f4f04e091 100644 --- a/frontend/src/features/Backoffice/ControlObjectives/components/index.tsx +++ b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/index.tsx @@ -13,7 +13,7 @@ import { useAddControlObjectiveYearMutation, useGetControlObjectivesQuery, useGetControlObjectiveYearsQuery -} from '../apis' +} from '../../apis' import type { Option } from '@mtes-mct/monitor-ui' @@ -21,7 +21,7 @@ const NOW_YEAR = customDayjs.utc().year() const LAST_YEAR_FROM_NOW = NOW_YEAR - 1 const NEXT_YEAR_FROM_NOW = NOW_YEAR + 1 -export function ControlObjectiveList() { +export function ControlObjectiveTable() { const [selectedYear, setSelectedYear] = useState(undefined) const getControlObjectivesQuery = useGetControlObjectivesQuery(selectedYear || skipToken) diff --git a/frontend/src/features/Backoffice/ControlObjectives/types.ts b/frontend/src/features/ControlObjective/types.ts similarity index 100% rename from frontend/src/features/Backoffice/ControlObjectives/types.ts rename to frontend/src/features/ControlObjective/types.ts diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 98b7e8168b..66ddbe3b0d 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -1,9 +1,9 @@ import { createBrowserRouter, Navigate } from 'react-router-dom' import { Backoffice } from './features/Backoffice' -import { ControlObjectiveList } from './features/Backoffice/ControlObjectives/components' import { EditRegulation } from './features/Backoffice/edit_regulation/EditRegulation' import { FleetSegments } from './features/Backoffice/fleet_segments/FleetSegments' +import { ControlObjectiveTable } from './features/ControlObjective/components/ControlObjectiveTable' import { MainWindow } from './features/MainWindow' import { SideWindow } from './features/SideWindow' import { BackofficePage } from './pages/BackofficePage' @@ -59,7 +59,7 @@ export const routes = [ }, { path: 'control_objectives', - element: + element: }, { path: 'fleet_segments', From e46d8e9fd62fc60796e3ac02c01346c8122fed85 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Mon, 6 Nov 2023 15:35:35 +0100 Subject: [PATCH 4/4] Add fixes after review --- frontend/src/features/ControlObjective/apis.ts | 2 +- .../ControlObjectiveTable/SeaFrontControlObjectives.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/ControlObjective/apis.ts b/frontend/src/features/ControlObjective/apis.ts index 3ab77c94fb..c7db35ecda 100644 --- a/frontend/src/features/ControlObjective/apis.ts +++ b/frontend/src/features/ControlObjective/apis.ts @@ -29,7 +29,7 @@ export const controlObjectiveApi = monitorfishApi.injectEndpoints({ }), transformErrorResponse: response => new ApiError(ADD_CONTROL_OBJECTIVES_YEAR_ERROR_MESSAGE, response) }), - deleteControlObjective: builder.mutation({ + deleteControlObjective: builder.mutation({ invalidatesTags: [{ type: 'ControlObjectives' }], query: id => ({ method: 'DELETE', diff --git a/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx index 4093a8d46f..ead414773b 100644 --- a/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx +++ b/frontend/src/features/ControlObjective/components/ControlObjectiveTable/SeaFrontControlObjectives.tsx @@ -73,7 +73,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron fleetSegment => fleetSegment.segment === nextSegment ) - const nextDataWithSegmentDetails = [ + const nextControlObjectiveWithFleetSegment = [ ...controlObjectivesWithMaybeFleetSegment, { controlPriorityLevel: 1, @@ -88,7 +88,7 @@ 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) ) @@ -108,7 +108,7 @@ export function SeaFrontControlObjectives({ data, facade, title, year }: SeaFron const deleteControlObjectiveRow = useCallback( async (id: number) => { - await deleteControlObjective(id.toString()) + await deleteControlObjective(id) const nextControlObjectivesWithMaybeFleetSegment = controlObjectivesWithMaybeFleetSegment.filter( controlObjectiveWithMaybeFleetSegment => controlObjectiveWithMaybeFleetSegment.id !== id