Merge pull request #1510 from Vizzuality/chore/client/wdpa-jsonapi

[N/A]: parses WDPA endpoint

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<T = WDPA[]>(
   return useQuery({
     queryKey: ['wdpas', pid],
     queryFn: async () =>
-      API.request<{ data: WDPA[] }>({
+      JSONAPI.request<{ data: WDPA[] }>({
         method: 'GET',
         url: `/projects/${pid}/protected-areas`,
         headers: {

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<WDPA, 'id'>;
   name: string;
   scenarios: number;
   tag?: string;

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<HTMLInputElement>) => {
@@ -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),
   }));
 

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(() => {

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 (
     <FormRFF<FormValues>
       initialValues={{
-        fullName: allProjectWDPAsQuery.data?.[0]?.attributes.fullName,
+        fullName: allProjectWDPAsQuery.data?.[0]?.fullName,
       }}
       ref={formRef}
       onSubmit={onEditSubmit}

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({

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';