Merge pull request #845 from Vizzuality/nw/scenario-details

fix: add protected areas to scenario detail
Vizzuality · Feb 18, 2022 · 1da0617 · 1da0617
2 parents 813f2c6 + 5e5b31b
commit 1da0617
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/app/layout/projects/show/scenarios/settings/component.tsx b/app/layout/projects/show/scenarios/settings/component.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 
+import { useRouter } from 'next/router';
+
 import { useSelectedFeatures } from 'hooks/features';
+import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
+import { useWDPACategories } from 'hooks/wdpa';
 
 import Loading from 'components/loading';
 
@@ -12,16 +16,36 @@ export interface ProjectScenariosSettingsProps {
 export const ProjectScenariosSettings: React.FC<ProjectScenariosSettingsProps> = ({
   sid,
 }: ProjectScenariosSettingsProps) => {
+  const { query } = useRouter();
+  const { pid } = query;
+
   const {
     data: scenarioData,
     isFetching: scenarioIsFetching,
   } = useScenario(sid);
 
+  const { data: projectData } = useProject(pid);
+
   const {
     data: selectedFeaturesData = [],
   } = useSelectedFeatures(sid, {});
 
-  if (scenarioIsFetching) {
+  const {
+    data: protectedAreasData,
+    isFetching: protectedAreasDataIsFetching,
+  } = useWDPACategories({
+    adminAreaId: projectData?.adminAreaLevel2Id
+      || projectData?.adminAreaLevel1I
+      || projectData?.countryId,
+    customAreaId: !projectData?.adminAreaLevel2Id
+      && !projectData?.adminAreaLevel1I
+      && !projectData?.countryId ? projectData?.planningAreaId : null,
+    scenarioId: sid,
+  });
+
+  const protectedAreas = protectedAreasData?.filter((a) => a.selected).map((a) => a.name);
+
+  if (scenarioIsFetching || protectedAreasDataIsFetching) {
     return (
       <Loading
         visible
@@ -32,7 +56,6 @@ export const ProjectScenariosSettings: React.FC<ProjectScenariosSettingsProps> =
   }
 
   const {
-    wdpaIucnCategories = [],
     numberOfRuns,
     boundaryLengthModifier,
   } = scenarioData;
@@ -41,7 +64,7 @@ export const ProjectScenariosSettings: React.FC<ProjectScenariosSettingsProps> =
     <dl className="flex flex-col space-y-2">
       <div className="flex space-x-2 text-sm">
         <dt>Protected areas:</dt>
-        <dd className="px-1.5 text-blue-400 bg-blue-400 bg-opacity-30 rounded">{wdpaIucnCategories?.length || '-'}</dd>
+        <dd className="px-1.5 text-blue-400 bg-blue-400 bg-opacity-30 rounded">{protectedAreas?.length || '-'}</dd>
       </div>
       <div className="flex space-x-2 text-sm">
         <dt>Features:</dt>