Merge pull request #4697 from wri/FLAG-818-share-link-for-location-of…

…-tree-cover-widget-doesnt-lead-to-widget-being-highlighted [FLAG-818] Fix widget highlighting in the dashboard
wri · Oct 4, 2023 · 528212e · 528212e
2 parents d1dcedd + 33a2590
commit 528212e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 59 deletions.
diff --git a/components/widgets/index.js b/components/widgets/index.js
@@ -93,7 +93,7 @@ class WidgetsContainer extends PureComponent {
 
     if (!isEqual(category, prevProps.category)) {
       setActiveWidget(null);
-      setWidgetsCategory(category || 'summary');
+      setWidgetsCategory(category);
     }
 
     if (location.type === 'global' && prevProps.location?.type !== 'global') {
@@ -155,7 +155,7 @@ class WidgetsContainer extends PureComponent {
       allDatasets = [...allDatasets, ...widgetDatasets];
     }
 
-    setWidgetsCategory(this.props?.category || 'summary');
+    setWidgetsCategory(this.props?.category);
 
     setMapSettings({
       datasets: allDatasets,

diff --git a/components/widgets/reducers.js b/components/widgets/reducers.js
@@ -44,7 +44,7 @@ const setShowMap = (state, { payload }) => ({
 
 const setWidgetsCategory = (state, { payload }) => ({
   ...state,
-  category: payload,
+  category: payload || initialState.category,
 });
 
 const setWidgetsSettings = (state, { payload }) => ({

diff --git a/components/widgets/selectors.js b/components/widgets/selectors.js
@@ -66,12 +66,11 @@ const handleWidgetProxy = (widgets, settings) => {
 
 const isAuthenticated = (state) => state?.myGfw?.data?.loggedIn || false;
 
+export const selectGroupBySubcategory = (state, { groupBySubcategory }) =>
+  groupBySubcategory;
 export const selectLocation = (state) =>
   state.location && state.location.payload;
-
-export const getCategory = (state) =>
-  state.location && state?.location?.query?.category;
-
+export const getCategory = (state) => state?.widgets?.category;
 export const selectIsTrase = (state) => state.location?.query?.trase;
 export const selectRouteType = (state) =>
   state.location && state.location.pathname;
@@ -107,9 +106,7 @@ export const selectPolynameWhitelist = (state) =>
 export const selectEmbed = (state, { embed }) => embed;
 export const selectSimple = (state, { simple }) => simple;
 export const selectAnalysis = (state, { analysis }) => analysis;
-export const selectCategory = (state) =>
-  (state.location && state.location.query && state.location.query.category) ||
-  'summary';
+export const selectCategory = (state) => state?.widgets?.category;
 export const selectModalClosing = (state) =>
   state.modalMeta && state.modalMeta.closing;
 export const selectNonGlobalDatasets = (state) =>
@@ -175,8 +172,11 @@ export const getLocationData = createSelector(
   [getLocationObj, getAllLocationData, selectPolynameWhitelist],
   (locationObj, allLocationData, polynamesWhitelist) => {
     const { type, adminLevel, locationLabel, adm0, adm1, areaId } = locationObj;
-    const { adm0: adm0Data, adm1: adm1Data, adm2: adm2Data } =
-      allLocationData || {};
+    const {
+      adm0: adm0Data,
+      adm1: adm1Data,
+      adm2: adm2Data,
+    } = allLocationData || {};
 
     let parent = {};
     let parentData = adm0Data;
@@ -363,21 +363,10 @@ export const getWidgetCategories = createSelector(
     )
 );
 
-export const getActiveCategory = createSelector(
-  [selectCategory, getWidgetCategories],
-  (activeCategory, widgetCats) => {
-    if (!widgetCats) {
-      return null;
-    }
-
-    return widgetCats.includes(activeCategory) ? activeCategory : 'summary';
-  }
-);
-
 export const filterWidgetsByCategory = createSelector(
   [
     filterWidgetsByLocation,
-    getActiveCategory,
+    selectCategory,
     selectAnalysis,
     selectEmbed,
     selectActiveWidget,
@@ -649,8 +638,9 @@ export const getWidgets = createSelector(
 export const getWidgetsGroupedBySubcategory = createSelector(
   [getCategory, getWidgets],
   (category, widgets) => {
-    const subcategories = CATEGORIES.find(({ value }) => value === category)
-      ?.subcategories;
+    const subcategories = CATEGORIES.find(
+      ({ value }) => value === category
+    )?.subcategories;
 
     if (!widgets || !subcategories) return [];
 
@@ -677,16 +667,26 @@ export const getWidgetsGroupedBySubcategory = createSelector(
 );
 
 export const getActiveWidget = createSelector(
-  [getWidgets, selectActiveWidget, selectAnalysis],
-  (widgets, activeWidgetKey, analysis) => {
+  [
+    getWidgets,
+    getWidgetsGroupedBySubcategory,
+    selectActiveWidget,
+    selectAnalysis,
+    selectGroupBySubcategory,
+  ],
+  (widgets, widgetGroups, activeWidgetKey, analysis, groupBySubcategory) => {
     if (!widgets || analysis) return null;
-    if (!activeWidgetKey) return widgets[0];
+
+    if (!activeWidgetKey) {
+      return groupBySubcategory ? widgetGroups[0]?.widgets[0] : widgets[0];
+    }
+
     return widgets.find((w) => w.widget === activeWidgetKey);
   }
 );
 
 export const getNoDataMessage = createSelector(
-  [getGeodescriberTitleFull, getActiveCategory],
+  [getGeodescriberTitleFull, selectCategory],
   (title, category) => {
     if (!title || !category) return 'No data available';
     if (!category) return `No data available for ${title}`;

diff --git a/layouts/dashboards/components/global-sentence/selectors.js b/layouts/dashboards/components/global-sentence/selectors.js
@@ -1,6 +1,6 @@
 import { createStructuredSelector } from 'reselect';
 
-import { getActiveCategory } from 'components/widgets/selectors';
+import { selectCategory } from 'components/widgets/selectors';
 
 import {
   selectLocation,
@@ -12,5 +12,5 @@ export const getGlobalSentenceProps = createStructuredSelector({
   loading: selectLoading,
   location: selectLocation,
   locationNames: getAdminsSelected,
-  category: getActiveCategory,
+  category: selectCategory,
 });
diff --git a/layouts/dashboards/selectors.js b/layouts/dashboards/selectors.js
@@ -6,7 +6,7 @@ import { encodeQueryParams } from 'utils/url';
 import {
   filterWidgetsByLocation,
   getWidgetCategories,
-  getActiveCategory,
+  selectCategory,
 } from 'components/widgets/selectors';
 import { getActiveArea } from 'providers/areas-provider/selectors';
 
@@ -17,9 +17,6 @@ const selectShowMap = (state) => state.widgets?.showMap;
 const selectLocation = (state) => state.location;
 const selectLocationType = (state) =>
   state.location && state.location.payload && state.location.payload.type;
-const selectCategory = (state) =>
-  (state.location && state.location.query && state.location.query.category) ||
-  'summary';
 export const selectQuery = (state) => state.location && state.location.query;
 
 export const getEmbed = createSelector(
@@ -44,7 +41,7 @@ export const getNoWidgetsMessage = createSelector(
 );
 
 export const getLinks = createSelector(
-  [getWidgetCategories, getActiveCategory, selectLocation],
+  [getWidgetCategories, selectCategory, selectLocation],
   (widgetCats, activeCategory, location) => {
     const serializePayload = Object.values(location.payload).filter(
       (p) => p && p.toString().length
@@ -59,6 +56,8 @@ export const getLinks = createSelector(
         ...(category.value === 'summary' && {
           category: undefined,
         }),
+        widget: null,
+        scrollTo: null,
       });
       return encodedQueryString.length > 0 ? `?${encodedQueryString}` : '';
     }
@@ -96,7 +95,7 @@ export const getLinks = createSelector(
 
 export const getDashboardsProps = createStructuredSelector({
   showMapMobile: selectShowMap,
-  category: getActiveCategory,
+  category: selectCategory,
   links: getLinks,
   widgetAnchor: getWidgetAnchor,
   noWidgetsMessage: getNoWidgetsMessage,

diff --git a/pages/dashboards/[[...location]].js b/pages/dashboards/[[...location]].js
@@ -282,18 +282,18 @@ const DashboardsPage = (props) => {
     countryData,
   } = props;
 
-  useEffect(() => {
-    const {
-      map,
-      modalMeta,
-      dashboardPrompts,
-      category,
-      areaOfInterestModal,
-      showMap,
-      widget,
-      ...widgets
-    } = decodeQueryParams(query) || {};
+  const {
+    map,
+    modalMeta,
+    dashboardPrompts,
+    category,
+    areaOfInterestModal,
+    showMap,
+    widget,
+    ...widgets
+  } = decodeQueryParams(query) || {};
 
+  useEffect(() => {
     if (map) {
       dispatch(setMapSettings(map));
     }
@@ -310,10 +310,6 @@ const DashboardsPage = (props) => {
       dispatch(setWidgetsSettings(widgets));
     }
 
-    if (category) {
-      dispatch(setWidgetsCategory(category));
-    }
-
     if (showMap) {
       dispatch(setShowMap(showMap));
     }
@@ -332,24 +328,30 @@ const DashboardsPage = (props) => {
     }
   }, [fullPathname, isFallback]);
 
+  useEffect(() => {
+    dispatch(setWidgetsCategory(category));
+  }, [category]);
+
   // when setting the query params from the URL we need to make sure we don't render the map
   // on the server otherwise the DOM will be out of sync
   useEffect(() => {
     if (!ready) {
       setReady(true);
     }
-  });
+  }, []);
 
   return (
     <PageLayout {...props}>
       <Head>
         <link rel="canonical" href={getCanonical(props, query)} />
       </Head>
-      <Dashboards
-        basePath={basePath}
-        ssrLocation={handleSSRLocation}
-        globalSentence={globalSentence}
-      />
+      {ready && (
+        <Dashboards
+          basePath={basePath}
+          ssrLocation={handleSSRLocation}
+          globalSentence={globalSentence}
+        />
+      )}
     </PageLayout>
   );
 };