upload shapefile

app/hooks/cost-surface/index.ts

@@ -6,6 +6,7 @@ import { CostSurface } from 'types/api/cost-surface';
 import { Project } from 'types/api/project';
 
 import { API } from 'services/api';
+import UPLOADS from 'services/uploads';
 
 export function useProjectCostSurfaces<T = CostSurface[]>(
   pid: Project['id'],
@@ -18,16 +19,19 @@ export function useProjectCostSurfaces<T = CostSurface[]>(
     {
       id: 'gfehrtf22534geyg',
       name: 'Cost Surface Rwanda A',
+      isCustom: true,
       scenarioUsageCount: 3,
     },
     {
       id: 'rfjghhrtersdtbkjshfw',
       name: 'Cost Surface Rwanda B',
+      isCustom: true,
       scenarioUsageCount: 0,
     },
     {
       id: '23275455HGVVCMSJHDFk',
       name: 'Cost Surface Rwanda C',
+      isCustom: true,
       scenarioUsageCount: 0,
     },
   ];
@@ -49,7 +53,7 @@ export function useProjectCostSurfaces<T = CostSurface[]>(
   });
 }
 
-export function useEditCostSurface() {
+export function useEditProjectCostSurface() {
   const { data: session } = useSession();
 
   const editCostSurface = ({
@@ -77,3 +81,22 @@ export function useEditCostSurface() {
 
   return useMutation(editCostSurface);
 }
+
+export function useUploadProjectCostSurface() {
+  const { data: session } = useSession();
+
+  const uploadProjectCostSurface = ({ id, data }: { id: CostSurface['id']; data: FormData }) => {
+    return UPLOADS.request({
+      method: 'POST',
+      // TODO: change this to the correct endpoint
+      url: `/projects/${id}/cost-surface/shapefile`,
+      data,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  };
+
+  return useMutation(uploadProjectCostSurface);
+}

app/layout/info/upload-cost-surface.tsx

@@ -0,0 +1,10 @@
+export const UploadCostSurfaceInfoButtonContent = (): JSX.Element => {
+  return (
+    <div className="space-y-2.5 text-xs">
+      <h4 className="font-heading">List of supported file formats:</h4>
+      <p>Zipped: .shp (zipped shapefiles must include .shp, .shx, .dbf, and .prj files)</p>
+    </div>
+  );
+};
+
+export default UploadCostSurfaceInfoButtonContent;

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

@@ -6,7 +6,7 @@ export type DataItem = {
   scenarios: number;
   tag?: string;
   isVisibleOnMap: boolean;
-  isCustom: boolean;
+  isCustom?: boolean;
 };
 
 export type InventoryTable = {

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

@@ -2,6 +2,7 @@ import { NavigationInventoryTabs } from 'layout/project/navigation/types';
 
 import CostSurfaceTable from './cost-surfaces';
 import CostSurfaceInfo from './cost-surfaces/info';
+import CostSurfaceUploadModal from './cost-surfaces/modals/upload';
 import FeaturesTable from './features';
 import FeaturesInfo from './features/info';
 import FeatureUploadModal from './features/modals/upload';
@@ -22,6 +23,7 @@ export const INVENTORY_TABS = {
     search: 'Search cost surfaces',
     noData: 'No cost surfaces found.',
     InfoComponent: CostSurfaceInfo,
+    UploadModalComponent: CostSurfaceUploadModal,
     TableComponent: CostSurfaceTable,
   },
   features: {

app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx

@@ -45,6 +45,7 @@ const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }
         data?.map((cs) => ({
           id: cs.id,
           name: cs.name,
+          isCustom: cs.isCustom,
           scenarioUsageCount: cs.scenarioUsageCount,
         })),
       keepPreviousData: true,
@@ -106,11 +107,12 @@ const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }
 
   const displayBulkActions = selectedCostSurfaceIds.length > 0;
 
-  const data: DataItem[] = allProjectCostSurfacesQuery.data?.map((wdpa) => ({
-    ...wdpa,
-    name: wdpa.name,
-    scenarios: wdpa.scenarioUsageCount,
-    isVisibleOnMap: visibleCostSurfaces?.includes(wdpa.id),
+  const data: DataItem[] = allProjectCostSurfacesQuery.data?.map((cs) => ({
+    ...cs,
+    name: cs.name,
+    scenarios: cs.scenarioUsageCount,
+    isCustom: cs.isCustom,
+    isVisibleOnMap: visibleCostSurfaces?.includes(cs.id),
   }));
 
   return (

app/layout/project/sidebar/project/inventory-panel/cost-surfaces/info/index.tsx

@@ -1,28 +1,30 @@
+import Image from 'next/image';
+
 import COST_LAND_IMG from 'images/info-buttons/img_cost_surface_marine.png';
 import COST_SEA_IMG from 'images/info-buttons/img_cost_surface_terrestrial.png';
 
-const CostSurfaceInfo = (): JSX.Element => {
-  return (
-    <>
-      <h4 className="mb-2.5 font-heading text-lg">What is a Cost Surface?</h4>
-      <div className="space-y-2">
-        <p>
-          Marxan aims to minimize socio-economic impacts and conflicts between uses through what is
-          called the “cost” surface. In conservation planning, cost data may reflect acquisition,
-          management, or opportunity costs ($), but may also reflect non-monetary impacts. Proxies
-          are commonly used in absence of fine-scale socio-economic information. A default value for
-          cost will be the planning unit area but you can upload your cost surface.
-        </p>
-        <p>
-          In the examples below, we illustrate how distance from a city, road or port can be used as
-          a proxy cost surface. In these examples, areas with many competing activities will make a
-          planning unit cost more than areas further away with less competition for access.
-        </p>
-        <img src={COST_SEA_IMG} alt="Cost sea" />
-        <img src={COST_LAND_IMG} alt="Cost Land" />
+const CostSurfaceInfo = (): JSX.Element => (
+  <div>
+    <h4 className="mb-2.5 font-heading text-lg">What is a Cost Surface?</h4>
+    <div className="space-y-2">
+      <p>
+        Marxan aims to minimize socio-economic impacts and conflicts between uses through what is
+        called the “cost” surface. In conservation planning, cost data may reflect acquisition,
+        management, or opportunity costs ($), but may also reflect non-monetary impacts. Proxies are
+        commonly used in absence of fine-scale socio-economic information. A default value for cost
+        will be the planning unit area but you can upload your cost surface.
+      </p>
+      <p>
+        In the examples below, we illustrate how distance from a city, road or port can be used as a
+        proxy cost surface. In these examples, areas with many competing activities will make a
+        planning unit cost more than areas further away with less competition for access.
+      </p>
+      <div className="flex flex-col items-center pt-6">
+        <Image src={COST_SEA_IMG} alt="Cost sea" height={200} width={270} />
+        <Image src={COST_LAND_IMG} alt="Cost Land" height={200} width={270} />
       </div>
-    </>
-  );
-};
+    </div>
+  </div>
+);
 
 export default CostSurfaceInfo;

app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/edit/index.tsx

@@ -5,7 +5,7 @@ import { useQueryClient } from 'react-query';
 
 import { useRouter } from 'next/router';
 
-import { useEditCostSurface, useProjectCostSurfaces } from 'hooks/cost-surface';
+import { useEditProjectCostSurface, useProjectCostSurfaces } from 'hooks/cost-surface';
 import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
@@ -32,13 +32,13 @@ const EditModal = ({
 
   const allProjectCostSurfacesQuery = useProjectCostSurfaces(pid, {});
 
-  const editCostSurfaceMutation = useEditCostSurface();
+  const editProjectCostSurfaceMutation = useEditProjectCostSurface();
 
   const onEditSubmit = useCallback(
     (values: FormValues) => {
       const { name } = values;
 
-      editCostSurfaceMutation.mutate(
+      editProjectCostSurfaceMutation.mutate(
         {
           costSurfaceId,
           projectId: pid,
@@ -76,7 +76,7 @@ const EditModal = ({
         }
       );
     },
-    [addToast, costSurfaceId, editCostSurfaceMutation, handleModal, pid, queryClient]
+    [addToast, costSurfaceId, editProjectCostSurfaceMutation, handleModal, pid, queryClient]
   );
 
   return (