[FE] (feat): Inventory panel: Protected Areas [MRXN23-239]

app/constants/file-uploader-size-limits.js

@@ -8,7 +8,7 @@
 export const PLANNING_UNIT_UPLOADER_MAX_SIZE = 1048576; // 1MiB
 export const PLANNING_AREA_UPLOADER_MAX_SIZE = 1048576; // 1MiB
 export const PLANNING_AREA_GRID_UPLOADER_MAX_SIZE = 10485760; // 10MiB
-export const PROTECTED_AREA_UPLOADER_MAX_SIZE = 10485760; // 10MiB
+export const PROTECTED_AREA_UPLOADER_SHAPEFILE_MAX_SIZE = 10485760; // 10MiB
 export const FEATURES_UPLOADER_SHAPEFILE_MAX_SIZE = 20971520; // 20MiB
 export const FEATURES_UPLOADER_CSV_MAX_SIZE = 52428800; // 50MiB
 export const COST_SURFACE_UPLOADER_MAX_SIZE = 20971520; // 20MiB

app/hooks/map/index.ts

@@ -181,7 +181,6 @@ export function useWDPAPreviewLayer({
   options,
 }: UseWDPAPreviewLayer) {
   const { opacity = 1, visibility = true } = options || {};
-
   return useMemo(() => {
     if (!active || !bbox) return null;
 

app/hooks/wdpa/index.ts

@@ -1,31 +1,33 @@
-import { useMemo } from 'react';
-
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, QueryObserverOptions, useQueryClient } from 'react-query';
 
+import { AxiosRequestConfig } from 'axios';
 import { useSession } from 'next-auth/react';
 
-import SCENARIOS from 'services/scenarios';
-import WDPA from 'services/wdpa';
+import { Project } from 'types/api/project';
+import { Scenario } from 'types/api/scenario';
+import { WDPA } from 'types/api/wdpa';
 
-import {
-  UseWDPACategoriesProps,
-  UseSaveScenarioProtectedAreasProps,
-  SaveScenarioProtectedAreasProps,
-} from './types';
+import { API } from 'services/api';
+import SCENARIOS from 'services/scenarios';
+import UPLOADS from 'services/uploads';
 
 export function useWDPACategories({
   adminAreaId,
   customAreaId,
   scenarioId,
-}: UseWDPACategoriesProps) {
+}: {
+  adminAreaId?: WDPA['id'];
+  customAreaId?: WDPA['id'];
+  scenarioId: Scenario['id'];
+}) {
   const { data: session } = useSession();
 
   return useQuery(
     ['protected-areas', adminAreaId, customAreaId],
     async () =>
-      WDPA.request({
+      API.request({
         method: 'GET',
-        url: `/${scenarioId}/protected-areas`,
+        url: `scenarios/${scenarioId}/protected-areas`,
         params: {
           ...(adminAreaId && {
             'filter[adminAreaId]': adminAreaId,
@@ -40,7 +42,6 @@ export function useWDPACategories({
       }).then(({ data }) => data),
     {
       enabled: !!adminAreaId || !!customAreaId,
-      select: ({ data }) => data,
     }
   );
 }
@@ -49,10 +50,24 @@ export function useSaveScenarioProtectedAreas({
   requestConfig = {
     method: 'POST',
   },
-}: UseSaveScenarioProtectedAreasProps) {
+}: {
+  requestConfig?: AxiosRequestConfig;
+}) {
   const { data: session } = useSession();
 
-  const saveScenarioProtectedAreas = ({ id, data }: SaveScenarioProtectedAreasProps) => {
+  const saveScenarioProtectedAreas = ({
+    id,
+    data,
+  }: {
+    id: Scenario['id'];
+    data: {
+      areas: {
+        id: string;
+        selected: boolean;
+      }[];
+      threshold: number;
+    };
+  }) => {
     return SCENARIOS.request({
       url: `/${id}/protected-areas`,
       data,
@@ -63,12 +78,80 @@ export function useSaveScenarioProtectedAreas({
     });
   };
 
-  return useMutation(saveScenarioProtectedAreas, {
-    onSuccess: (data: any, variables, context) => {
-      console.info('Succces', data, variables, context);
-    },
-    onError: (error, variables, context) => {
-      console.info('Error', error, variables, context);
+  return useMutation(saveScenarioProtectedAreas);
+}
+
+export function useProjectWDPAs<T = WDPA[]>(
+  pid: Project['id'],
+  params: { search?: string; sort?: string; filters?: Record<string, unknown> } = {},
+  queryOptions: QueryObserverOptions<WDPA[], Error, T> = {}
+) {
+  const { data: session } = useSession();
+
+  return useQuery({
+    queryKey: ['wdpas', pid],
+    queryFn: async () =>
+      API.request<{ data: WDPA[] }>({
+        method: 'GET',
+        url: `/projects/${pid}/protected-areas`,
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+        },
+        params,
+      }).then(({ data }) => data.data),
+    enabled: Boolean(pid),
+    ...queryOptions,
+  });
+}
+
+export function useEditWDPA({
+  requestConfig = {
+    method: 'PATCH',
+  },
+}) {
+  const { data: session } = useSession();
+
+  const saveProjectWDPA = ({ wdpaId, data }: { wdpaId: string; data: { name: string } }) => {
+    return API.request({
+      method: 'PATCH',
+      url: `/protected-areas/${wdpaId}`,
+      data,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+      ...requestConfig,
+    });
+  };
+
+  return useMutation(saveProjectWDPA);
+}
+
+export function useUploadWDPAsShapefile({
+  requestConfig = {
+    method: 'POST',
+  },
+}: {
+  requestConfig?: AxiosRequestConfig<FormData>;
+}) {
+  const queryClient = useQueryClient();
+  const { data: session } = useSession();
+
+  const uploadWDPAShapefile = ({ id, data }: { id: Project['id']; data: FormData }) => {
+    return UPLOADS.request<{ success: true }>({
+      url: `/projects/${id}/protected-areas/shapefile`,
+      data,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+        'Content-Type': 'multipart/form-data',
+      },
+      ...requestConfig,
+    } as typeof requestConfig);
+  };
+
+  return useMutation(uploadWDPAShapefile, {
+    onSuccess: async (data, variables) => {
+      const { id: projectId } = variables;
+      await queryClient.invalidateQueries(['wdpas', projectId]);
     },
   });
 }

app/layout/info/upload-wdpas.tsx

@@ -0,0 +1,24 @@
+export const UploadWDPAsInfoButtonContent = (): JSX.Element => {
+  return (
+    <div className="space-y-2.5 text-xs">
+      <h4 className="mb-2.5 font-heading">
+        When uploading shapefiles of protected areas, please make sure that:
+      </h4>
+      <ul className="list-disc space-y-1 pl-6">
+        <li>this is a single zip file that includes all the components of a single shapefile;</li>
+        <li>
+          all the components are added to the “root”/top-level of the zip file itself (that is, not
+          within any folder within the zip file);
+        </li>
+        <li>
+          user-defined shapefile attributes are only considered for shapefiles of features, while
+          they are ignored for any other kind of shapefile (planning grid, lock-in/out, etc), so you
+          may consider excluding any attributes from shapefiles other than for features, in order to
+          keep the shapefile’s file size as small as possible.
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default UploadWDPAsInfoButtonContent;

app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx

@@ -22,9 +22,11 @@ const InventoryTable = ({
 }: InventoryTable): JSX.Element => {
   const noData = !loading && data?.length === 0;
 
+  const noDataCustom = !loading && data?.every((item) => !item.isCustom);
+
   return (
     <>
-      {loading && !data.length && (
+      {loading && !data?.length && (
         <div className="relative min-h-[200px]">
           <Loading
             visible={true}
@@ -43,6 +45,7 @@ const InventoryTable = ({
                   theme="light"
                   className="block h-4 w-4 checked:bg-blue-400"
                   onChange={onSelectAll}
+                  disabled={noDataCustom}
                 />
               </th>
               {columns.map((column) => {

app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx

@@ -28,7 +28,7 @@ const RowItem = ({
           className="block h-4 w-4 checked:bg-blue-400"
           onChange={onSelectRow}
           value={id}
-          checked={selectedIds.includes(id)}
+          checked={isCustom && selectedIds.includes(id)}
           disabled={!isCustom}
         />
       </td>
@@ -70,7 +70,13 @@ const RowItem = ({
           {isCustom && (
             <Popover>
               <PopoverTrigger asChild>
-                <button type="button" className="h-5 w-5">
+                <button
+                  type="button"
+                  className={cn({
+                    'h-5 w-5': true,
+                    invisible: !isCustom,
+                  })}
+                >
                   <HiDotsHorizontal className="h-4 w-4 text-white" />
                 </button>
               </PopoverTrigger>

app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts

@@ -1,7 +1,10 @@
 import { ChangeEvent } from 'react';
 
+import { WDPAAttributes } from 'types/api/wdpa';
+
 export type DataItem = {
   id: string;
+  attributes?: WDPAAttributes;
   name: string;
   scenarios: number;
   tag?: string;

app/layout/project/sidebar/project/inventory-panel/constants.ts

@@ -9,6 +9,7 @@ import FeatureUploadModal from './features/modals/upload';
 import { InventoryPanel } from './types';
 import ProtectedAreasTable from './wdpas';
 import ProtectedAreasFooter from './wdpas/footer';
+import WDPAUploadModal from './wdpas/modals/upload';
 
 export const INVENTORY_TABS = {
   'protected-areas': {
@@ -17,6 +18,7 @@ export const INVENTORY_TABS = {
     noData: 'No protected areas found.',
     TableComponent: ProtectedAreasTable,
     FooterComponent: ProtectedAreasFooter,
+    UploadModalComponent: WDPAUploadModal,
   },
   'cost-surface': {
     title: 'Cost Surface',

app/layout/project/sidebar/project/inventory-panel/features/index.tsx

@@ -81,7 +81,6 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
   const handleSort = useCallback(
     (_sortType: (typeof filters)['sort']) => {
       const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
-
       setFilters((prevFilters) => ({
         ...prevFilters,
         sort,