From c2f9a45a389612e861e85473c399715daece38e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Tue, 19 Sep 2023 16:13:03 +0200 Subject: [PATCH] parses WDPA endpoint --- app/hooks/wdpa/index.ts | 4 ++-- .../components/inventory-table/types.ts | 4 ++-- .../project/inventory-panel/wdpas/index.tsx | 15 ++++----------- .../inventory-panel/wdpas/modals/delete/index.tsx | 6 +++--- .../inventory-panel/wdpas/modals/edit/index.tsx | 6 +++--- .../inventory-panel/wdpas/modals/upload/index.tsx | 6 +++--- app/types/api/wdpa.ts | 10 +++------- 7 files changed, 20 insertions(+), 31 deletions(-) diff --git a/app/hooks/wdpa/index.ts b/app/hooks/wdpa/index.ts index 62ab528d1e..d55b57b882 100644 --- a/app/hooks/wdpa/index.ts +++ b/app/hooks/wdpa/index.ts @@ -7,7 +7,7 @@ import { Project } from 'types/api/project'; import { Scenario } from 'types/api/scenario'; import { WDPA } from 'types/api/wdpa'; -import { API } from 'services/api'; +import { API, JSONAPI } from 'services/api'; import SCENARIOS from 'services/scenarios'; import UPLOADS from 'services/uploads'; @@ -91,7 +91,7 @@ export function useProjectWDPAs( return useQuery({ queryKey: ['wdpas', pid], queryFn: async () => - API.request<{ data: WDPA[] }>({ + JSONAPI.request<{ data: WDPA[] }>({ method: 'GET', url: `/projects/${pid}/protected-areas`, headers: { diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts index 0466740b2a..af0dce50a0 100644 --- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts +++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts @@ -1,10 +1,10 @@ import { ChangeEvent } from 'react'; -import { WDPAAttributes } from 'types/api/wdpa'; +import { WDPA } from 'types/api/wdpa'; export type DataItem = { id: string; - attributes?: WDPAAttributes; + attributes?: Omit; name: string; scenarios: number; tag?: string; diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx index 1bf1e1d8b7..d6dc7eed52 100644 --- a/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx +++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx @@ -47,19 +47,12 @@ const InventoryPanelProtectedAreas = ({ search, }, { - select: (data) => - data?.map((wdpa) => ({ - id: wdpa.id, - attributes: wdpa.attributes, - })), keepPreviousData: true, placeholderData: [], } ); - const WDPAIds = allProjectWDPAsQuery.data - ?.filter((wdpa) => wdpa.attributes.isCustom) - .map((wdpa) => wdpa.id); + const WDPAIds = allProjectWDPAsQuery.data?.filter((wdpa) => wdpa.isCustom).map((wdpa) => wdpa.id); const handleSelectAll = useCallback( (evt: ChangeEvent) => { @@ -112,9 +105,9 @@ const InventoryPanelProtectedAreas = ({ const data: DataItem[] = allProjectWDPAsQuery.data?.map((wdpa) => ({ ...wdpa, - name: wdpa.attributes.isCustom ? wdpa.attributes.fullName : wdpa.attributes.iucnCategory, - scenarios: wdpa.attributes.scenarioUsageCount, - isCustom: wdpa.attributes.isCustom, + name: wdpa.isCustom ? wdpa.fullName : wdpa.iucnCategory, + scenarios: wdpa.scenarioUsageCount, + isCustom: wdpa.isCustom, isVisibleOnMap: visibleWDPAs?.includes(wdpa.id), })); diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx index 731904ac51..f63007f188 100644 --- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx +++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx @@ -36,11 +36,11 @@ const DeleteModal = ({ return allProjectWDPAsQuery.data?.filter(({ id }) => selectedWDPAIds.includes(id)); }, [allProjectWDPAsQuery.data, selectedWDPAIds]); - const WDPAsNames = selectedWDPAs.map(({ attributes }) => attributes.fullName); + const WDPAsNames = selectedWDPAs.map(({ fullName }) => fullName); // ? the user will be able to delete the protected areas only if they are not being used by any scenario. - const haveScenarioAssociated = selectedWDPAs.some(({ attributes }) => - Boolean(attributes.scenarioUsageCount) + const haveScenarioAssociated = selectedWDPAs.some(({ scenarioUsageCount }) => + Boolean(scenarioUsageCount) ); const handleBulkDelete = useCallback(() => { diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx index 16e61017e4..cf0aa3e7a7 100644 --- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx +++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx @@ -12,9 +12,9 @@ import Button from 'components/button'; import Field from 'components/forms/field'; import Label from 'components/forms/label'; import { composeValidators } from 'components/forms/validations'; -import { WDPA, WDPAAttributes } from 'types/api/wdpa'; +import { WDPA } from 'types/api/wdpa'; -export type FormValues = { fullName: WDPAAttributes['fullName'] }; +export type FormValues = { fullName: WDPA['fullName'] }; const EditModal = ({ wdpaId, @@ -79,7 +79,7 @@ const EditModal = ({ return ( initialValues={{ - fullName: allProjectWDPAsQuery.data?.[0]?.attributes.fullName, + fullName: allProjectWDPAsQuery.data?.[0]?.fullName, }} ref={formRef} onSubmit={onEditSubmit} diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx index 22009a83b2..64aa43c9ec 100644 --- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx +++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx @@ -23,14 +23,14 @@ import Loading from 'components/loading'; import Modal from 'components/modal'; import { PROTECTED_AREA_UPLOADER_SHAPEFILE_MAX_SIZE } from 'constants/file-uploader-size-limits'; import UploadWDPAsInfoButtonContent from 'layout/info/upload-wdpas'; -import { WDPAAttributes } from 'types/api/wdpa'; +import { WDPA } from 'types/api/wdpa'; import { cn } from 'utils/cn'; import { bytesToMegabytes } from 'utils/units'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; export type FormValues = { - name: WDPAAttributes['fullName']; + name: WDPA['fullName']; file: File; }; @@ -164,7 +164,7 @@ export const WDPAUploadModal = ({ uploadWDPAsShapefileMutation.mutate({ data, id: `${pid}` }, mutationResponse); }, - [pid, addToast, onClose, uploadWDPAsShapefileMutation, successFile] + [pid, addToast, onClose, uploadWDPAsShapefileMutation, successFile, queryClient] ); const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({ diff --git a/app/types/api/wdpa.ts b/app/types/api/wdpa.ts index 2919c0d69d..b13efecf45 100644 --- a/app/types/api/wdpa.ts +++ b/app/types/api/wdpa.ts @@ -1,6 +1,8 @@ import { Job } from './job'; -export interface WDPAAttributes { +export interface WDPA { + id: string; + type: 'protected_areas'; countryId: string; designation?: string; fullName: string; @@ -13,12 +15,6 @@ export interface WDPAAttributes { isCustom?: boolean; } -export interface WDPA { - id: string; - type: string; - attributes: WDPAAttributes; -} - export interface WDPACategory { id: string; kind: 'global' | 'project';