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'],
@@ -49,7 +50,7 @@ export function useProjectCostSurfaces<T = CostSurface[]>(
   });
 }
 
-export function useEditCostSurface() {
+export function useEditProjectCostSurface() {
   const { data: session } = useSession();
 
   const editCostSurface = ({
@@ -77,3 +78,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/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/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 (