Merge pull request #4858 from wri/develop

 PROD Deploy 2024-09-24 10:30am EST

components/widget/index.js

@@ -136,6 +136,7 @@ class WidgetContainer extends Component {
       dashboard,
       embed,
       analysis,
+      status,
     } = this.props;
     this.cancelWidgetDataFetch();
     this.widgetDataFetch = CancelToken.source();
@@ -147,6 +148,9 @@ class WidgetContainer extends Component {
       dashboard,
       embed,
       analysis,
+      // Needed for widgets that will decide whether to use precalculated tables
+      // (when status is 'saved') or OTF (when the nightly run has not occurred yet)
+      status,
     })
       .then((data) => {
         setWidgetData(data);

providers/geodescriber-provider/selectors.js

@@ -7,6 +7,7 @@ import { getDataLocation, buildFullLocationName } from 'utils/location';
 import { getActiveArea } from 'providers/areas-provider/selectors';
 
 import { parseSentence } from 'services/sentences';
+import { isGeodescriberLocation, dynamicGeodescriberSentence } from 'utils/geodescriber';
 
 export const selectGeojson = (state) =>
   state.geostore && state.geostore.data && state.geostore.data.geojson;
@@ -79,6 +80,8 @@ export const getGeodescriberTitle = createSelector(
     getActiveArea,
   ],
   (geodescriber, wdpaLocation, location, adminTitle, activeArea) => {
+    const { title, title_params } = geodescriber;
+
     if (isEmpty(geodescriber)) return null;
 
     if (
@@ -96,12 +99,9 @@ export const getGeodescriberTitle = createSelector(
       };
     }
 
-    // if not an admin we can use geodescriber
-    if (!['global', 'country'].includes(location.type)) {
-      return {
-        sentence: geodescriber.title,
-        params: geodescriber.title_params,
-      };
+    // if not an admin we'll parse the geodescriber information
+    if (isGeodescriberLocation(location)) {
+      return dynamicGeodescriberSentence(title, title_params);
     }
 
     return {
@@ -160,21 +160,10 @@ export const getGeodescriberDescription = createSelector(
         },
       };
     }
-    // if not an admin we can use geodescriber
-    if (!['global', 'country'].includes(location.type)) {
-      // adding space between number and unit
-      const areaFormatted = description_params?.area_0.replace(
-        /([\d|.|,]+)/,
-        '$1 '
-      );
 
-      return {
-        sentence: description,
-        params: {
-          ...description_params,
-          area_0: areaFormatted,
-        },
-      };
+    // if not an admin we'll parse the geodescriber information
+    if (isGeodescriberLocation(location)) {
+      return dynamicGeodescriberSentence(description, description_params)
     }
 
     // if an admin we needs to calculate the params

utils/geodescriber.js

@@ -0,0 +1,64 @@
+import { translateText } from './lang';
+
+const isGeodescriberLocation = (location) => {
+  return !['global', 'country'].includes(location?.type);
+};
+
+const translateSentenceParams = ({ params = {}, excludeKeys = [] }) => {
+  const paramsKeys = Object.keys(params);
+
+  if (!paramsKeys.length) return {};
+
+  return paramsKeys.reduce((paramsAccumulator, paramKey) => {
+    const paramValue = params[paramKey];
+    const shouldTranslateParam = !excludeKeys.includes(paramKey);
+
+    return {
+      ...paramsAccumulator,
+      [paramKey]: shouldTranslateParam ? translateText(paramValue) : paramValue,
+    };
+  }, {});
+};
+
+const formatAreaParams = ({ params = {}, includeKeys = [] }) => {
+  const paramsKeys = Object.keys(params);
+
+  if (!paramsKeys.length) return {};
+
+  return paramsKeys.reduce((paramsAccumulator, paramKey) => {
+    const paramValue = params[paramKey];
+    const shouldFormatParam = includeKeys.includes(paramKey);
+
+    return {
+      ...paramsAccumulator,
+      // We're not using the formatNumber utility here because this comes as a string from the endpoint.
+      // It'd require complicated processing to know the actual unit (ha, kha, etc), pull out the number, then
+      // use the formatNumber utility when we can just use regex to add the space between number and units.
+      [paramKey]: shouldFormatParam
+        ? params?.[paramKey]?.replace(/([\d|.|,]+)/, '$1 ')
+        : paramValue,
+    };
+  }, {});
+};
+
+const dynamicGeodescriberSentence = (sentence, params) => {
+  const translatedSentenceParams = translateSentenceParams({
+    params,
+    excludeKeys: ['area_0'], // we know this is always an area, let's not clutter Transifex
+  });
+
+  const formattedAreaParams = formatAreaParams({
+    params,
+    includeKeys: ['area_0'], // we know this is always an area, we just need to add a space between number and unit
+  });
+
+  return {
+    sentence,
+    params: {
+      ...translatedSentenceParams,
+      ...formattedAreaParams,
+    },
+  };
+};
+
+export { isGeodescriberLocation, dynamicGeodescriberSentence };