feat(i18n): enhanced i18n support (#3730)

platform/ui/src/components/DateRange/DateRange.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 
 /** REACT DATES */
 import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
@@ -8,27 +9,6 @@ import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import './DateRange.css';
 
-const today = moment();
-const lastWeek = moment().subtract(7, 'day');
-const lastMonth = moment().subtract(1, 'month');
-const studyDatePresets = [
-  {
-    text: 'Today',
-    start: today,
-    end: today,
-  },
-  {
-    text: 'Last 7 days',
-    start: lastWeek,
-    end: today,
-  },
-  {
-    text: 'Last 30 days',
-    start: lastMonth,
-    end: today,
-  },
-];
-
 const renderYearsOptions = () => {
   const currentYear = moment().year();
   const options = [];
@@ -52,6 +32,27 @@ const DateRange = props => {
   const { id, onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
+  const { t } = useTranslation('DatePicker');
+  const today = moment();
+  const lastWeek = moment().subtract(7, 'day');
+  const lastMonth = moment().subtract(1, 'month');
+  const studyDatePresets = [
+    {
+      text: t('Today'),
+      start: today,
+      end: today,
+    },
+    {
+      text: t('Last 7 days'),
+      start: lastWeek,
+      end: today,
+    },
+    {
+      text: t('Last 30 days'),
+      start: lastMonth,
+      end: today,
+    },
+  ];
 
   const renderDatePresets = () => {
     return (
@@ -149,11 +150,11 @@ const DateRange = props => {
       /** OPTIONAL */
       renderCalendarInfo={renderDatePresets}
       renderMonthElement={renderMonthElement}
-      startDatePlaceholderText={'Start Date'}
-      endDatePlaceholderText={'End Date'}
+      startDatePlaceholderText={t('Start Date')}
+      endDatePlaceholderText={t('End Date')}
       phrases={{
-        closeDatePicker: 'Close',
-        clearDates: 'Clear dates',
+        closeDatePicker: t('Close'),
+        clearDates: t('Clear dates'),
       }}
       isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
       hideKeyboardShortcutsPanel={true}