Add string translation

Author: barshathakuri

app/src/views/CountryNsOverviewCapacity/index.tsx

@@ -62,6 +62,7 @@ export function Component() {
                 </Link>
             )}
         >
+            {/* Data is currently under review, it will be include in the next version */}
             {countryResponse?.region === REGION_ASIA && (
                 <CountryNsOrganisationalCapacity />
             )}

app/src/views/CountryProfileOverview/ClimateChart/i18n.json

@@ -0,0 +1,11 @@
+{
+    "namespace": "countryClimateChart",
+    "strings": {
+        "climateChartMax": "Max",
+        "climateChangeAverage": "Average",
+        "climateChangeMin": "Min",
+        "climateChangePrecipitation": "Precipation totals (mm)",
+        "climateChangeChart": "Climate chart (Avg. country values)",
+        "climateChartTemperature": "Average min and max temperature (°C)"
+    }
+}

app/src/views/CountryProfileOverview/ClimateChart/index.tsx

@@ -9,6 +9,7 @@ import {
     TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     maxSafe,
     minSafe,
@@ -22,6 +23,7 @@ import {
 import useTemporalChartData from '#hooks/useTemporalChartData';
 import { GoApiResponse } from '#utils/restRequest';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 const NUM_Y_AXIS_TICKS = 5;
@@ -35,6 +37,8 @@ function ClimateChart(props: Props) {
         data,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const temperatureContainerRef = useRef<HTMLDivElement>(null);
     const precipitationContainerRef = useRef<HTMLDivElement>(null);
 
@@ -127,20 +131,17 @@ function ClimateChart(props: Props) {
                     description={(
                         <>
                             <TextOutput
-                                // FIXME: use translation
-                                label="Max"
+                                label={strings.climateChartMax}
                                 value={currentData.max_temp}
                                 valueType="number"
                             />
                             <TextOutput
-                                // FIXME: use translation
-                                label="Average"
+                                label={strings.climateChangeAverage}
                                 value={currentData.avg_temp}
                                 valueType="number"
                             />
                             <TextOutput
-                                // FIXME: use translation
-                                label="Min"
+                                label={strings.climateChangeMin}
                                 value={currentData.min_temp}
                                 valueType="number"
                             />
@@ -149,7 +150,12 @@ function ClimateChart(props: Props) {
                 />
             );
         },
-        [dataByMonth],
+        [
+            dataByMonth,
+            strings.climateChartMax,
+            strings.climateChangeAverage,
+            strings.climateChangeMin,
+        ],
     );
 
     const precipitationTooltipSelector = useCallback(
@@ -170,16 +176,15 @@ function ClimateChart(props: Props) {
                     title={currentData.month_display}
                     description={(
                         <TextOutput
-                            // FIXME: use translation
-                            label="Precipitation"
+                            label={strings.climateChangePrecipitation}
                             value={currentData.precipitation}
                             valueType="number"
                         />
                     )}
                 />
             );
         },
-        [dataByMonth],
+        [dataByMonth, strings.climateChangePrecipitation],
     );
 
     const barWidth = bound(
@@ -191,14 +196,12 @@ function ClimateChart(props: Props) {
     return (
         <Container
             className={styles.climateChart}
-            // FIXME: use translation
-            heading="Climate chart"
+            heading={strings.climateChangeChart}
             contentViewType="vertical"
             withHeaderBorder
         >
             <Container
-                // FIXME: use translation
-                heading="Temperature"
+                heading={strings.climateChartTemperature}
                 headingLevel={5}
             >
                 <div
@@ -233,8 +236,7 @@ function ClimateChart(props: Props) {
                 </div>
             </Container>
             <Container
-                // FIXME: use translation
-                heading="Precipitation"
+                heading={strings.climateChangePrecipitation}
                 headingLevel={5}
             >
                 <div
@@ -257,8 +259,8 @@ function ClimateChart(props: Props) {
                                     height={(
                                         Math.max(
                                             precipitationChartData.dataAreaSize.height
-                                                - chartPoint.y
-                                                + precipitationChartData.dataAreaOffset.top,
+                                            - chartPoint.y
+                                            + precipitationChartData.dataAreaOffset.top,
                                             0,
                                         )
                                     )}

app/src/views/CountryProfileOverview/PopulationMap/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "populationMap",
+    "strings": {
+        "populationMapTitle": "Population Map"
+    }
+}

app/src/views/CountryProfileOverview/PopulationMap/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { maxSafe } from '@ifrc-go/ui/utils';
 import {
     isDefined,
@@ -30,6 +31,7 @@ import {
 } from '#utils/constants';
 import { GoApiResponse } from '#utils/restRequest';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 const DEFAULT_MAX_POPULATION = 1000000;
@@ -40,6 +42,8 @@ interface Props {
 
 function PopulatioMap(props: Props) {
     const { data } = props;
+    const strings = useTranslation(i18n);
+
     const countryData = useCountry({ id: data?.id ?? -1 });
 
     const bounds = (isDefined(countryData) && isDefined(countryData.bbox))
@@ -209,8 +213,7 @@ function PopulatioMap(props: Props) {
 
     return (
         <Container
-            // FIXME: use translation
-            heading="Population Map"
+            heading={strings.populationMapTitle}
             className={styles.populationMap}
             withHeaderBorder
         >

app/src/views/CountryProfileOverview/i18n.json

@@ -19,6 +19,7 @@
         "seasonalCalendarTooltipEventLabel": "Event",
         "seasonalCalendarTooltipEventTypeLabel": "Event type",
         "seasonalCalendarTooltipMonthsLabel": "Months",
-        "seasonalCalendarTooltipSourceLabel": "Source"
+        "seasonalCalendarTooltipSourceLabel": "Source",
+        "seasonalCalenderDataNotAvailable": "Data is not available!"
     }
 }

app/src/views/CountryProfileOverview/index.tsx

@@ -371,8 +371,7 @@ export function Component() {
                     </div>
                     {(isNotDefined(eventTypeGroupedData) || eventTypeGroupedData.length === 0) && (
                         <Message
-                            // FIXME: use translation
-                            title="Data is not available!"
+                            title={strings.seasonalCalenderDataNotAvailable}
                         />
                     )}
                     {eventTypeGroupedData?.map(

app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "emergenciesOverMonth",
+    "strings": {
+        "emergenciesOverMonthTargetedPopulation": "Targeted population"
+    }
+}

app/src/views/CountryProfilePreviousEvents/EmergenciesOverMonth/index.tsx

@@ -9,11 +9,13 @@ import {
     TextOutput,
     Tooltip,
 } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { isNotDefined } from '@togglecorp/fujs';
 
 import useTemporalChartData from '#hooks/useTemporalChartData';
 import { useRequest } from '#utils/restRequest';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 interface Props {
@@ -29,6 +31,8 @@ function EmergenciesOverMonth(props: Props) {
         countryId,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const containerRef = useRef<ElementRef<'div'>>(null);
 
     const {
@@ -78,8 +82,7 @@ function EmergenciesOverMonth(props: Props) {
                                     <>
                                         <DateOutput value={dataPoint.originalData.date} />
                                         <TextOutput
-                                            // FIXME: use translation
-                                            label="Targeted population"
+                                            label={strings.emergenciesOverMonthTargetedPopulation}
                                             value={dataPoint.originalData.targeted_population}
                                             valueType="number"
                                         />

app/src/views/CountryProfilePreviousEvents/PastEventsChart/i18n.json

@@ -0,0 +1,10 @@
+{
+    "namespace": "pastEventsChart",
+    "strings": {
+        "pastEventsChartEvents": "Past events",
+        "pastEventsPeopleExposed": "People Exposed / Affected",
+        "pastEventsTargetedPopulation": "Targeted population",
+        "pastEventsAmountRequested": "Amount requested",
+        "pastEventsAmountFunded": "Amount funded"
+    }
+}