Merge pull request #609 from Vizzuality/fix/custom-grid-texts-layer

Fix(front): planning area [MARXAN-952][MARXAN-950][MARXA-938]
Vizzuality · Nov 2, 2021 · dad9439 · dad9439 · vercel · Nov 2, 2021
2 parents c49c117 + 980855d
commit dad9439
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 18 deletions.
diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
@@ -18,8 +18,10 @@ import {
 
 // GeoJSON
 export function useGeoJsonLayer({
-  id, active, data,
+  id, active, data, options,
 }: UseGeoJSONLayer) {
+  const { customPAshapefileGrid } = options || {};
+
   return useMemo(() => {
     if (!active || !id || !data) return null;
 
@@ -35,14 +37,14 @@ export function useGeoJsonLayer({
           {
             type: 'line',
             paint: {
-              'line-color': '#FFF',
+              'line-color': customPAshapefileGrid ? COLORS.primary : '#FFF',
               'line-width': 3,
             },
           },
         ],
       },
     };
-  }, [id, active, data]);
+  }, [id, active, data, customPAshapefileGrid]);
 }
 
 // AdminPreview
@@ -319,7 +321,6 @@ export function usePUGridLayer({
       runId,
       settings = {},
     } = options;
-
     const {
       pugrid: PUgridSettings = {},
       'wdpa-percentage': WdpaPercentageSettings = {},

diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts
@@ -5,6 +5,7 @@ export interface UseGeoJSONLayer {
   id: string;
   active?: boolean;
   data: Record<string, unknown>;
+  options?: Record<string, unknown>;
 }
 export interface UseAdminPreviewLayer {
   cache?: number;

diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx
@@ -247,7 +247,7 @@ const ProjectForm: React.FC<ProjectFormProps> = () => {
                     {/* PLANNING AREA */}
                     <div className="flex flex-col justify-between mt-6">
                       <div className="flex items-center mb-5 space-x-3">
-                        <h2 className="text-lg font-medium font-heading">Do you have a planning region or grid shapefile?</h2>
+                        <h2 className="text-lg font-medium font-heading">Do you have a planning region or planning unit shapefile?</h2>
                         <InfoButton>
                           <span>
                             <h4 className="font-heading text-lg mb-2.5">Planning Area</h4>
@@ -418,6 +418,7 @@ const ProjectForm: React.FC<ProjectFormProps> = () => {
                   subregion={values.adminAreaLevel2Id}
                   planningUnitGridShape={values.planningUnitGridShape}
                   planningUnitAreakm2={values.planningUnitAreakm2}
+                  paOptionSelected={PAOptionSelected}
                 />
               </div>
             </HelpBeacon>

diff --git a/app/layout/projects/new/form/constants.ts b/app/layout/projects/new/form/constants.ts
@@ -7,15 +7,15 @@ export const DEFAULT_AREA = {
 
 export const PA_OPTIONS = [
   {
-    label: 'Yes, I have a shapefile with a planning region and a grid',
+    label: 'Yes, I have a planning unit shapefile',
     value: 'customPAshapefileGrid',
   },
   {
-    label: 'Yes, I have a shapefile with a planning region without grid ',
+    label: 'Yes, I have a planning region shapefile but no planning unit grid',
     value: 'customPAshapefile',
   },
   {
-    label: 'No, I don’t have any shapefiles',
+    label: 'No, I don’t have a planning region or planning unit shapefile',
     value: 'regular',
   },
 ];
diff --git a/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx b/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
@@ -171,7 +171,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
 
       {!uploadingPlanningArea && (
         <Uploader
-          caption="Upload shapefile grid"
+          caption="Upload shapefile"
           open={opened}
           onOpen={() => setOpened(true)}
           onClose={() => setOpened(false)}
@@ -222,7 +222,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
                               <input {...getInputProps()} />
 
                               <p className="text-sm text-center text-gray-500">
-                                Drag and drop your polygon data file
+                                Drag and drop your planning unit shapefile
                                 <br />
                                 or
                                 {' '}

diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx
@@ -157,7 +157,10 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                 id="cancel-shapefile-btn"
                 type="button"
                 className="flex items-center justify-center w-5 h-5 border border-white rounded-full group hover:bg-black"
-                onClick={() => onUploadRemove(form)}
+                onClick={() => {
+                  onUploadRemove(form);
+                  setOpened(false);
+                }}
               >
                 <Icon
                   className="w-1.5 h-1.5 text-white group-hover:text-white"
@@ -177,7 +180,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
           onClose={() => setOpened(false)}
         >
           <Form
-            onSubmit={onUploadSubmit}
+            onSubmit={successFile && onUploadSubmit}
             render={({ handleSubmit }) => {
               return (
                 <form onSubmit={handleSubmit}>
@@ -222,7 +225,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                               <input {...getInputProps()} />
 
                               <p className="text-sm text-center text-gray-500">
-                                Drag and drop your polygon data file
+                                Drag and drop your planning region shapefile
                                 <br />
                                 or
                                 {' '}

diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx
@@ -2,16 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 
-import { useAdminPreviewLayer, usePUGridPreviewLayer, useGeoJsonLayer } from 'hooks/map';
-
 import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
 import { LayerManager, Layer } from '@vizzuality/layer-manager-react';
-
 // Map
 import { useSession } from 'next-auth/client';
 
-import Map from 'components/map';
+import { useAdminPreviewLayer, usePUGridPreviewLayer, useGeoJsonLayer } from 'hooks/map';
 
+import Map from 'components/map';
 // Controls
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
@@ -25,6 +23,7 @@ export const ProjectNewMap: React.FC<ProjectMapProps> = ({
   subregion,
   planningUnitAreakm2,
   planningUnitGridShape,
+  paOptionSelected,
 }: ProjectMapProps) => {
   const minZoom = 2;
   const maxZoom = 20;
@@ -41,6 +40,9 @@ export const ProjectNewMap: React.FC<ProjectMapProps> = ({
       id: 'uploaded-geojson',
       active: !!uploadingPlanningArea,
       data: uploadingPlanningArea,
+      options: {
+        customPAshapefileGrid: paOptionSelected === 'customPAshapefileGrid',
+      },
     }),
     useAdminPreviewLayer({
       active: true,
@@ -49,7 +51,7 @@ export const ProjectNewMap: React.FC<ProjectMapProps> = ({
       subregion,
     }),
     usePUGridPreviewLayer({
-      active: true,
+      active: paOptionSelected !== 'customPAshapefileGrid',
       bbox,
       planningUnitGridShape,
       planningUnitAreakm2,

diff --git a/app/layout/projects/new/map/types.ts b/app/layout/projects/new/map/types.ts
@@ -4,4 +4,5 @@ export default interface ProjectMapProps {
   subregion: string;
   planningUnitAreakm2: number;
   planningUnitGridShape: string;
+  paOptionSelected: string;
 }