feat(widget): move logic to a proper selector

wri · Jan 11, 2024 · c57bb02 · c57bb02
1 parent 09e2875
commit c57bb02
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 48 deletions.
diff --git a/components/widget/components/widget-footer/component.jsx b/components/widget/components/widget-footer/component.jsx
@@ -9,7 +9,7 @@ class WidgetFooter extends PureComponent {
   static propTypes = {
     type: PropTypes.string,
     simple: PropTypes.bool,
-    alerts: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+    alerts: PropTypes.array,
     statements: PropTypes.array,
     locationType: PropTypes.string,
     showAttributionLink: PropTypes.bool,
@@ -20,13 +20,7 @@ class WidgetFooter extends PureComponent {
   renderAlert = (alerts, alertSystem, type, locationType) => {
     if (!alerts) return null;
 
-    let alertList = alerts;
-
-    if (typeof alerts === 'function') {
-      alertList = alerts();
-    }
-
-    return alertList.map((alert, index) => {
+    return alerts.map((alert, index) => {
       if (alert.system === alertSystem || alertSystem === 'all') {
         return (
           <WidgetAlert

diff --git a/components/widgets/forest-change/tree-loss-primary/index.js b/components/widgets/forest-change/tree-loss-primary/index.js
@@ -38,46 +38,12 @@ export default {
   subcategories: ['forest-loss'],
   types: ['global', 'country', 'wdpa', 'aoi'],
   admins: ['global', 'adm0', 'adm1', 'adm2'],
-  alerts: () => {
-    const countriesWithNewWarningText = [
-      'CMR',
-      'CIV',
-      'COD',
-      'GNQ',
-      'GAB',
-      'GHA',
-      'GIN',
-      'GNB',
-      'LBR',
-      'MDG',
-      'COG',
-      'SLE',
-    ];
-
-    const matches = location.pathname.match(
-      new RegExp('/dashboards/country/([A-Z]){3,}/')
-    );
-    const country = matches[0].substring(
-      matches[0].length - 4,
-      matches[0].length - 1
-    );
-
-    if (countriesWithNewWarningText.includes(country)) {
-      return [
-        {
-          text: 'Testing {location}.',
-          visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'],
-        },
-      ];
-    }
-
-    return [
-      {
-        text: 'The methods behind this data have changed over time. Be cautious comparing old and new data, especially before/after 2015. [Read more here](https://www.globalforestwatch.org/blog/data-and-research/tree-cover-loss-satellite-data-trend-analysis/).',
-        visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'],
-      },
-    ];
-  },
+  alerts: [
+    {
+      text: 'The methods behind this data have changed over time. Be cautious comparing old and new data, especially before/after 2015. [Read more here](https://www.globalforestwatch.org/blog/data-and-research/tree-cover-loss-satellite-data-trend-analysis/).',
+      visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'],
+    },
+  ],
   large: true,
   visible: ['dashboard', 'analysis'],
   chartType: 'composedChart',

diff --git a/components/widgets/forest-change/tree-loss-primary/selectors.js b/components/widgets/forest-change/tree-loss-primary/selectors.js
@@ -14,6 +14,8 @@ const getPrimaryLoss = (state) => state.data && state.data.primaryLoss;
 const getAdminLoss = (state) => state.data && state.data.adminLoss;
 const getSettings = (state) => state.settings;
 const getLocationLabel = (state) => state.locationLabel;
+const getAlerts = (state) => state.alerts || [];
+const getAdm0 = (state) => state.adm0;
 const getIndicator = (state) => state.indicator;
 const getColors = (state) => state.colors;
 const getSentence = (state) => state && state.sentence;
@@ -162,6 +164,37 @@ export const parseTitle = createSelector(
   }
 );
 
+export const parseAlerts = createSelector(
+  [getAlerts, getLocationLabel, getAdm0],
+  (alerts, locationLabel, adm0) => {
+    const countriesWithNewWarningText = [
+      'CMR',
+      'CIV',
+      'COD',
+      'GNQ',
+      'GAB',
+      'GHA',
+      'GIN',
+      'GNB',
+      'LBR',
+      'MDG',
+      'COG',
+      'SLE',
+    ];
+
+    if (countriesWithNewWarningText.includes(adm0)) {
+      return [
+        {
+          text: `The methods behind this data have changed over time, resulting in an underreporting of tree cover loss in ${locationLabel} prior to 2015. We advise against comparing the data before/after 2015 in ${locationLabel}. [Read more here](https://www.globalforestwatch.org/blog/data-and-research/tree-cover-loss-satellite-data-trend-analysis/).`,
+          visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'],
+        },
+      ];
+    }
+
+    return alerts;
+  }
+);
+
 const parseSentence = createSelector(
   [
     parseData,
@@ -249,4 +282,5 @@ export default createStructuredSelector({
   config: parseConfig,
   sentence: parseSentence,
   title: parseTitle,
+  alerts: parseAlerts,
 });
diff --git a/components/widgets/forest-change/tree-loss/selectors.js b/components/widgets/forest-change/tree-loss/selectors.js
@@ -16,6 +16,8 @@ const getLocationLabel = (state) => state.locationLabel;
 const getIndicator = (state) => state.indicator;
 const getColors = (state) => state.colors;
 const getSentence = (state) => state && state.sentence;
+const getAlerts = (state) => state.alerts || [];
+const getAdm0 = (state) => state.adm0;
 
 const parseData = createSelector(
   [getLoss, getExtent, getSettings],
@@ -161,8 +163,40 @@ const parseSentence = createSelector(
   }
 );
 
+export const parseAlerts = createSelector(
+  [getAlerts, getLocationLabel, getAdm0],
+  (alerts, locationLabel, adm0) => {
+    const countriesWithNewWarningText = [
+      'CMR',
+      'CIV',
+      'COD',
+      'GNQ',
+      'GAB',
+      'GHA',
+      'GIN',
+      'GNB',
+      'LBR',
+      'MDG',
+      'COG',
+      'SLE',
+    ];
+
+    if (countriesWithNewWarningText.includes(adm0)) {
+      return [
+        {
+          text: `The methods behind this data have changed over time, resulting in an underreporting of tree cover loss in ${locationLabel} prior to 2015. We advise against comparing the data before/after 2015 in ${locationLabel}. [Read more here](https://www.globalforestwatch.org/blog/data-and-research/tree-cover-loss-satellite-data-trend-analysis/).`,
+          visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'],
+        },
+      ];
+    }
+
+    return alerts;
+  }
+);
+
 export default createStructuredSelector({
   data: zeroFillData,
   config: parseConfig,
   sentence: parseSentence,
+  alerts: parseAlerts,
 });