Merge pull request #411 from Vizzuality/feat/tabs-dependency

Front(feat): tabs dependency [MARXAN-601]
Vizzuality · Aug 11, 2021 · 6721093 · 6721093
2 parents 3ca77da + 0b713f0
commit 6721093
Show file tree

Hide file tree

Showing 18 changed files with 378 additions and 111 deletions.
diff --git a/app/components/tabs/component.tsx b/app/components/tabs/component.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import cx from 'classnames';
 
 export interface TabsProps {
@@ -18,29 +19,32 @@ export const Tabs: React.FC<TabsProps> = ({
   items = [],
   selected,
   onSelected,
-}: TabsProps) => (
-  <ul className="flex justify-between font-heading">
-    {items.map((tab) => (
-      <li key={tab.id}>
-        <button
-          type="button"
-          className={cx(
-            {
-              'relative focus:outline-none text-white text-opacity-50 text-sm': true,
-              'hover:text-opacity-75': tab.id !== selected,
-              'text-opacity-100': tab.id === selected,
-            },
-          )}
-          onClick={() => onSelected(tab.id)}
-        >
-          {tab.name}
-          {tab.warning && (
-            <div className="absolute w-2 h-2 bg-red-500 rounded-full -top-0 -right-3" />
-          )}
-        </button>
-      </li>
-    ))}
-  </ul>
-);
+}: TabsProps) => {
+  return (
+    <ul className="flex justify-between font-heading">
+      {items.map((tab) => (
+        <li key={tab.id}>
+          <button
+            type="button"
+            className={cx(
+              {
+                'relative focus:outline-none text-white text-opacity-50 text-sm': true,
+                'hover:text-opacity-75': tab.id !== selected,
+                'text-opacity-100': tab.id === selected,
+                invisible: tab.status === 'disabled',
+              },
+            )}
+            onClick={() => onSelected(tab.id)}
+          >
+            {tab.name}
+            {tab.warning && (
+              <div className="absolute w-2 h-2 bg-red-500 rounded-full -top-0 -right-3" />
+            )}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};
 
 export default Tabs;
diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts
@@ -148,6 +148,7 @@ export function useSelectedFeatures(sid, filters: UseFeaturesFiltersProps = {},
 
   const query = useQuery(['selected-features', sid], fetchFeatures, {
     ...queryOptions,
+    refetchOnWindowFocus: false,
     enabled: !!sid,
   });
 

diff --git a/app/hooks/scenarios/index.ts b/app/hooks/scenarios/index.ts
@@ -139,6 +139,8 @@ export function useScenario(id) {
     headers: {
       Authorization: `Bearer ${session.accessToken}`,
     },
+  }).then((response) => {
+    return response.data;
   }), {
     enabled: !!id,
   });
@@ -148,9 +150,9 @@ export function useScenario(id) {
   return useMemo(() => {
     return {
       ...query,
-      data: data?.data?.data,
+      data: data?.data,
     };
-  }, [query, data?.data?.data]);
+  }, [query, data?.data]);
 }
 
 // SCENARIO STATUS
@@ -206,9 +208,9 @@ export function useSaveScenario({
 
   return useMutation(saveScenario, {
     onSuccess: (data: any, variables, context) => {
-      const { id, projectId } = data;
+      const { id, projectId } = data?.data?.data;
       queryClient.invalidateQueries(['scenarios', projectId]);
-      queryClient.invalidateQueries(['scenarios', id]);
+      queryClient.setQueryData(['scenarios', id], data?.data);
       console.info('Succces', data, variables, context);
     },
     onError: (error, variables, context) => {

diff --git a/app/layout/header/title/component.tsx b/app/layout/header/title/component.tsx
@@ -1,16 +1,18 @@
 import React, { useCallback } from 'react';
 
+import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
+
+import { useRouter } from 'next/router';
+
 import { useProject, useSaveProject } from 'hooks/projects';
 import { useScenario, useSaveScenario } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
-import { useRouter } from 'next/router';
+
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
 import {
   composeValidators,
 } from 'components/forms/validations';
-
 import Tooltip from 'components/tooltip';
 
 export interface TitleProps {
@@ -23,6 +25,8 @@ export const Title: React.FC<TitleProps> = () => {
   const { data: projectData, isLoading: projectIsLoading } = useProject(pid);
   const { data: scenarioData, isLoading: scenarioIsLoading } = useScenario(sid);
 
+  const { metadata } = scenarioData || {};
+
   // Project mutation and submit
   const saveProjectMutation = useSaveProject({
     requestConfig: {
@@ -87,7 +91,12 @@ export const Title: React.FC<TitleProps> = () => {
       }
     });
 
-    saveScenarioMutation.mutate({ id: scenarioData.id, data }, {
+    saveScenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata,
+      },
+    }, {
       onSuccess: ({ data: { data: s } }) => {
         addToast('save-scenario-name', (
           <>
@@ -110,7 +119,7 @@ export const Title: React.FC<TitleProps> = () => {
         });
       },
     });
-  }, [scenarioData?.id, addToast, saveScenarioMutation]);
+  }, [sid, addToast, saveScenarioMutation, metadata]);
 
   return (
     <AnimatePresence>

diff --git a/app/layout/meta-icons/component.tsx b/app/layout/meta-icons/component.tsx
@@ -37,7 +37,6 @@ export const MetaIcons: React.FC<MetaIconsProps> = () => {
       <link rel="icon" type="image/png" sizes="32x32" href={FAVICON_M} />
       <link rel="icon" type="image/png" sizes="96x96" href={FAVICON_L} />
       <link rel="icon" type="image/png" sizes="16x16" href={FAVICON_S} />
-      <link rel="manifest" href="/manifest.json" />
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta name="msapplication-TileImage" content={PIN_ICON} />
       <meta name="theme-color" content="#ffffff" />

diff --git a/app/layout/scenarios/sidebar/analysis/component.tsx b/app/layout/scenarios/sidebar/analysis/component.tsx
@@ -1,14 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useSelector, useDispatch } from 'react-redux';
 
 import { useRouter } from 'next/router';
 
-import { useScenario } from 'hooks/scenarios';
-
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { AnimatePresence, motion } from 'framer-motion';
+import { mergeScenarioStatusMetaData } from 'utils/utils-scenarios';
+
+import { useScenario, useSaveScenario } from 'hooks/scenarios';
 
 import HelpBeacon from 'layout/help/beacon';
 import Pill from 'layout/pill';
@@ -40,19 +41,30 @@ export const ScenariosSidebarAnalysis: React.FC<ScenariosSidebarAnalysisProps> =
   const dispatch = useDispatch();
 
   const { data: scenarioData } = useScenario(sid);
+  const { metadata } = scenarioData || {};
+
+  const saveScenarioMutation = useSaveScenario({
+    requestConfig: {
+      method: 'PATCH',
+    },
+  });
+
+  const saveTabsStatus = useCallback(async (subtab) => {
+    saveScenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(metadata, { tab: 'analysis', subtab: `${subtab}` }),
+      },
+    });
+  }, [saveScenarioMutation, sid, metadata]);
 
   // CALLBACKS
   const onChangeSection = useCallback((s) => {
     setSection(s);
     const subtab = s ? `analysis-${s}` : 'analysis-preview';
     dispatch(setSubTab(subtab));
-  }, [dispatch, setSubTab]);
-
-  useEffect(() => {
-    return () => {
-      setSection(null);
-    };
-  }, [tab]);
+    saveTabsStatus(subtab);
+  }, [dispatch, setSubTab, saveTabsStatus]);
 
   if (!scenarioData || tab !== 'analysis') return null;
 
@@ -120,27 +132,25 @@ export const ScenariosSidebarAnalysis: React.FC<ScenariosSidebarAnalysisProps> =
               )}
 
               {section === 'gap-analysis' && (
-              <GapAnalysis
-                key="gap-analysis"
-                onChangeSection={onChangeSection}
-
-              />
-
+                <GapAnalysis
+                  key="gap-analysis"
+                  onChangeSection={onChangeSection}
+                />
               )}
 
               {section === 'cost-surface' && (
-              <CostSurface
-                key="cost-surface"
-                readOnly={readOnly}
-                onChangeSection={onChangeSection}
-              />
+                <CostSurface
+                  key="cost-surface"
+                  readOnly={readOnly}
+                  onChangeSection={onChangeSection}
+                />
               )}
 
               {section === 'adjust-planning-units' && (
-              <AdjustPanningUnits
-                key="adjust-planning-units"
-                onChangeSection={onChangeSection}
-              />
+                <AdjustPanningUnits
+                  key="adjust-planning-units"
+                  onChangeSection={onChangeSection}
+                />
               )}
             </Pill>
 

diff --git a/app/layout/scenarios/sidebar/features/component.tsx b/app/layout/scenarios/sidebar/features/component.tsx
@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 
 import { useQueryClient } from 'react-query';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { useRouter } from 'next/router';
 
-import { useSelectedFeatures } from 'hooks/features';
-import { useScenario } from 'hooks/scenarios';
-
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
+import { mergeScenarioStatusMetaData, SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
+
+import { useSelectedFeatures } from 'hooks/features';
+import { useScenario, useSaveScenario } from 'hooks/scenarios';
 
 import HelpBeacon from 'layout/help/beacon';
 import Pill from 'layout/pill';
@@ -53,15 +54,57 @@ export const ScenariosSidebarWDPA: React.FC<ScenariosSidebarWDPAProps> = ({
   const dispatch = useDispatch();
 
   const { data: scenarioData } = useScenario(sid);
+  const { metadata } = scenarioData || {};
+  const { scenarioEditingMetadata } = metadata || {};
+  const {
+    subtab: metaSubtab,
+  } = scenarioEditingMetadata || SCENARIO_EDITING_META_DATA_DEFAULT_VALUES;
+
   const {
     data: selectedFeaturesData,
   } = useSelectedFeatures(sid, {});
 
+  const saveScenarioMutation = useSaveScenario({
+    requestConfig: {
+      method: 'PATCH',
+    },
+  });
+
+  const saveScenarioStatus = useCallback(async () => {
+    saveScenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(metadata, { tab: 'analysis', subtab: 'analysis-preview' }),
+      },
+    }, {
+      onSuccess: () => {
+        push(`/projects/${pid}`);
+      },
+    });
+  }, [saveScenarioMutation, sid, pid, push, metadata]);
+
+  const saveScenarioStatusOnContinue = useCallback(async () => {
+    saveScenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(metadata, { tab: 'features', subtab: 'features-fpf' }),
+      },
+    });
+  }, [saveScenarioMutation, sid, metadata]);
+
+  const saveScenarioFeaturesStatusOnBack = useCallback(async () => {
+    saveScenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(metadata, { tab: 'features', subtab: 'features-preview' }),
+      },
+    });
+  }, [saveScenarioMutation, sid, metadata]);
+
   useEffect(() => {
-    return () => {
-      setStep(0);
-    };
-  }, [tab]);
+    const reloadStep = metaSubtab === 'features-preview' ? 0 : 1;
+    setStep(reloadStep);
+  }, [metaSubtab]);
 
   if (!scenarioData || tab !== 'features') return null;
 
@@ -233,6 +276,7 @@ export const ScenariosSidebarWDPA: React.FC<ScenariosSidebarWDPAProps> = ({
                 onSuccess={() => {
                   setStep(step + 1);
                   dispatch(setSubTab(ScenarioSidebarSubTabs.FEATURES_FPF));
+                  saveScenarioStatusOnContinue();
                 }}
                 readOnly={readOnly}
               />
@@ -243,9 +287,10 @@ export const ScenariosSidebarWDPA: React.FC<ScenariosSidebarWDPAProps> = ({
                 onBack={() => {
                   setStep(step - 1);
                   dispatch(setSubTab(ScenarioSidebarSubTabs.FEATURES_PREVIEW));
+                  saveScenarioFeaturesStatusOnBack();
                 }}
                 readOnly={readOnly}
-                onSuccess={() => push(`/projects/${pid}`)}
+                onSuccess={saveScenarioStatus}
               />
             )}
           </Pill>

diff --git a/app/layout/scenarios/sidebar/features/intersect/component.tsx b/app/layout/scenarios/sidebar/features/intersect/component.tsx
@@ -2,13 +2,14 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { Form as FormRFF, Field as FieldRFF } from 'react-final-form';
 
-import Button from 'components/button';
+import { useRouter } from 'next/router';
+
+import { useAllFeatures, useSaveSelectedFeatures, useSelectedFeatures } from 'hooks/features';
 
-import Toolbar from 'layout/scenarios/sidebar/features/intersect/toolbar';
 import List from 'layout/scenarios/sidebar/features/intersect/list';
+import Toolbar from 'layout/scenarios/sidebar/features/intersect/toolbar';
 
-import { useAllFeatures, useSaveSelectedFeatures, useSelectedFeatures } from 'hooks/features';
-import { useRouter } from 'next/router';
+import Button from 'components/button';
 
 export interface ScenariosFeaturesIntersectProps {
   intersecting: string;