Added i18n translations to tile components

scripts/extract_messages.sh

@@ -25,7 +25,8 @@ npm list @formatjs/cli || npm install formatjs
 npm run extract -- 'js/**/*.ts*' \
   --out-file js/i18n/strings/en/place.json \
   --id-interpolation-pattern '[sha512:contenthash:base64:6]'\
-  --ignore '**/i18n/i18n.tsx'
+  --ignore '**/i18n/i18n.tsx' \
+  --ignore '**/*.d.ts'
 
 cd ..
 

static/js/components/place_name.tsx

@@ -20,6 +20,7 @@
 
 import React, { useEffect, useState } from "react";
 
+import { intl } from "../i18n/i18n";
 import { ABORT_CONTROLLER_CANCELLED } from "../shared/constants";
 import { isUSACountyOrCity } from "../tools/shared_util";
 import { getPlaceDisplayNames, getPlaceNames } from "../utils/place_utils";
@@ -33,12 +34,14 @@ export function PlaceName(props: PlaceNameProp): JSX.Element {
   // We want the display name (gets name with state code if available) if
   // parent place is USA
   const [name, setName] = useState<string>("");
+
   useEffect(() => {
     const controller = new AbortController();
     const placeNamesPromise = isUSACountyOrCity(props.dcid)
       ? getPlaceDisplayNames([props.dcid], {
           apiRoot: props.apiRoot,
           signal: controller.signal,
+          locale: intl.locale,
         })
       : getPlaceNames([props.dcid], {
           apiRoot: props.apiRoot,

static/js/components/tiles/bar_tile.tsx

@@ -35,6 +35,8 @@ import {
 } from "../../chart/draw_bar";
 import { URL_PATH } from "../../constants/app/visualization_constants";
 import { CSV_FIELD_DELIMITER } from "../../constants/tile_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { PLACE_TYPES } from "../../shared/constants";
 import { useLazyLoad } from "../../shared/hooks";
 import { PointApiResponse, SeriesApiResponse } from "../../shared/stat_types";
@@ -620,7 +622,7 @@ function getExploreLink(props: BarTilePropType): {
     {}
   );
   return {
-    displayText: "Timeline Tool",
+    displayText: intl.formatMessage(tileMessages.timelineTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/bivariate_tile.tsx

@@ -29,6 +29,8 @@ import { Point } from "../../chart/draw_scatter";
 import { GeoJsonData } from "../../chart/types";
 import { URL_PATH } from "../../constants/app/visualization_constants";
 import { CSV_FIELD_DELIMITER } from "../../constants/tile_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { USA_PLACE_DCID } from "../../shared/constants";
 import { useLazyLoad } from "../../shared/hooks";
 import { PointApiResponse, SeriesApiResponse } from "../../shared/stat_types";
@@ -453,7 +455,7 @@ function getExploreLink(props: BivariateTilePropType): {
     {}
   );
   return {
-    displayText: "Scatter Tool",
+    displayText: intl.formatMessage(tileMessages.scatterTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/chart_footer.tsx

@@ -20,6 +20,8 @@
 
 import React, { useState } from "react";
 
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import {
   GA_EVENT_TILE_DOWNLOAD,
   GA_EVENT_TILE_EXPLORE_MORE,
@@ -61,7 +63,7 @@ export function ChartFooter(props: ChartFooterPropType): JSX.Element {
                     props.handleEmbed();
                   }}
                 >
-                  Download
+                  {intl.formatMessage(tileMessages.download)}
                 </a>
               </div>
             )}
@@ -79,7 +81,9 @@ export function ChartFooter(props: ChartFooterPropType): JSX.Element {
                     return true;
                   }}
                 >
-                  Explore in {props.exploreLink.displayText}
+                  {intl.formatMessage(tileMessages.exploreLink, {
+                    toolName: props.exploreLink.displayText,
+                  })}
                 </a>
               </div>
             )}

static/js/components/tiles/disaster_event_map_tile.tsx

@@ -35,11 +35,13 @@ import {
   GeoJsonFeature,
   GeoJsonFeatureProperties,
 } from "../../chart/types";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import {
   EARTH_NAMED_TYPED_PLACE,
   USA_PLACE_DCID,
 } from "../../shared/constants";
-import { NamedPlace, NamedTypedPlace, StatVarSpec } from "../../shared/types";
+import { NamedPlace, NamedTypedPlace } from "../../shared/types";
 import { isChildPlaceOf } from "../../tools/shared_util";
 import {
   DisasterEventPoint,
@@ -197,7 +199,7 @@ export const DisasterEventMapTile = memo(function DisasterEventMapTile(
       exploreLink={
         props.showExploreMore
           ? {
-              displayText: "Disaster Tool",
+              displayText: intl.formatMessage(tileMessages.disasterTool),
               url: `${EXPLORE_MORE_BASE_URL}${props.place.dcid}`,
             }
           : null

static/js/components/tiles/histogram_tile.tsx

@@ -24,6 +24,8 @@ import React, { memo, useCallback, useRef } from "react";
 import { DataPoint } from "../../chart/base";
 import { drawHistogram } from "../../chart/draw_histogram";
 import { DATE_OPTION_30D_KEY } from "../../constants/disaster_event_map_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { NamedTypedPlace } from "../../shared/types";
 import {
   DisasterEventPoint,
@@ -282,7 +284,7 @@ export const HistogramTile = memo(function HistogramTile(
       exploreLink={
         props.showExploreMore
           ? {
-              displayText: "Disaster Tool",
+              displayText: intl.formatMessage(tileMessages.disasterTool),
               url: `${EXPLORE_MORE_BASE_URL}${props.place.dcid}`,
             }
           : null

static/js/components/tiles/line_tile.tsx

@@ -28,6 +28,8 @@ import { drawLineChart } from "../../chart/draw_line";
 import { TimeScaleOption } from "../../chart/types";
 import { URL_PATH } from "../../constants/app/visualization_constants";
 import { CSV_FIELD_DELIMITER } from "../../constants/tile_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { useLazyLoad } from "../../shared/hooks";
 import { SeriesApiResponse } from "../../shared/stat_types";
 import { NamedTypedPlace, StatVarSpec } from "../../shared/types";
@@ -486,7 +488,7 @@ function getExploreLink(props: LineTilePropType): {
     {}
   );
   return {
-    displayText: "Timeline Tool",
+    displayText: intl.formatMessage(tileMessages.timelineTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/loading_header.tsx

@@ -21,6 +21,9 @@
 import React from "react";
 import { Spinner } from "reactstrap";
 
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
+
 /**
  * Header with loading indicator
  * @param props.isLoading true if the component is loading
@@ -37,7 +40,7 @@ export function LoadingHeader(props: {
       {isLoading ? (
         <>
           <Spinner color="secondary" size="sm" className="mr-1" />
-          {title ? title : "Loading..."}
+          {title ? title : intl.formatMessage(tileMessages.loading)}
         </>
       ) : (
         title

static/js/components/tiles/map_tile.tsx

@@ -40,6 +40,8 @@ import { drawLegendSvg, getTooltipHtmlFn } from "../../chart/draw_map_utils";
 import { GeoJsonData } from "../../chart/types";
 import { URL_PATH } from "../../constants/app/visualization_constants";
 import { CSV_FIELD_DELIMITER } from "../../constants/tile_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { USA_PLACE_DCID } from "../../shared/constants";
 import { useLazyLoad } from "../../shared/hooks";
 import { PointApiResponse, SeriesApiResponse } from "../../shared/stat_types";
@@ -745,7 +747,7 @@ function getExploreLink(props: MapTilePropType): {
     {}
   );
   return {
-    displayText: "Map Tool",
+    displayText: intl.formatMessage(tileMessages.mapTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/scatter_tile.tsx

@@ -33,6 +33,8 @@ import {
 import { URL_PATH } from "../../constants/app/visualization_constants";
 import { ChartQuadrant } from "../../constants/scatter_chart_constants";
 import { CSV_FIELD_DELIMITER } from "../../constants/tile_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { useLazyLoad } from "../../shared/hooks";
 import { PointApiResponse, SeriesApiResponse } from "../../shared/stat_types";
 import { NamedTypedPlace, StatVarSpec } from "../../shared/types";
@@ -556,7 +558,7 @@ function getExploreLink(props: ScatterTilePropType): {
     displayOptions
   );
   return {
-    displayText: "Scatter Tool",
+    displayText: intl.formatMessage(tileMessages.scatterTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/sv_ranking_units.tsx

@@ -21,6 +21,8 @@ import React, { RefObject, useRef } from "react";
 
 import { VisType } from "../../apps/visualization/vis_type_configs";
 import { URL_PATH } from "../../constants/app/visualization_constants";
+import { intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { StatVarSpec } from "../../shared/types";
 import {
   RankingData,
@@ -380,7 +382,7 @@ function getExploreLink(
     {}
   );
   return {
-    displayText: "Timeline Tool",
+    displayText: intl.formatMessage(tileMessages.timelineTool),
     url: `${props.apiRoot || ""}${URL_PATH}#${hash}`,
   };
 }

static/js/components/tiles/top_event_tile.tsx

@@ -27,7 +27,8 @@ import {
   ASYNC_ELEMENT_HOLDER_CLASS,
 } from "../../constants/css_constants";
 import { INITIAL_LOADING_CLASS } from "../../constants/tile_constants";
-import { formatNumber } from "../../i18n/i18n";
+import { formatNumber, intl } from "../../i18n/i18n";
+import { tileMessages } from "../../i18n/i18n_tile_messages";
 import { ChartEmbed } from "../../place/chart_embed";
 import { NamedPlace, NamedTypedPlace } from "../../shared/types";
 import {
@@ -217,7 +218,7 @@ export const TopEventTile = memo(function TopEventTile(
             exploreLink={
               props.showExploreMore
                 ? {
-                    displayText: "Disaster Tool",
+                    displayText: intl.formatMessage(tileMessages.disasterTool),
                     url: `${EXPLORE_MORE_BASE_URL}${props.place.dcid}`,
                   }
                 : null

static/js/i18n/i18n_place_messages.ts

@@ -168,7 +168,7 @@ export const pageMessages = defineMessages({
       "Header text for the Key Demographics section for the current place. Section will include a table of key demographic statistics for the place.",
   },
   MoreCharts: {
-    id: "more_charts",
+    id: "more_charts_link",
     defaultMessage: "More charts",
     description:
       "Link text to show additional charts for the given chart category section for the current place.",