fix(Components): Add missing i18n functions for a number of component…

…s (MeasurementTable, StudyList, PaginationArea) (#128)
OHIF · Jul 10, 2019 · 6fa0fa5 · 6fa0fa5
1 parent d901244
commit 6fa0fa5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/components/measurementTable/MeasurementTable.js b/src/components/measurementTable/MeasurementTable.js
@@ -149,7 +149,7 @@ class MeasurementTable extends Component {
     return this.props.timepoints.map((timepoint, index) => {
       return (
         <div key={index} className="measurementTableHeaderItem">
-          <div className="timepointLabel">{timepoint.label}</div>
+          <div className="timepointLabel">{this.props.t(timepoint.key)}</div>
           <div className="timepointDate">{timepoint.date}</div>
         </div>
       );
@@ -171,7 +171,7 @@ class MeasurementTable extends Component {
   };
 }
 
-const connectedComponent = withTranslation('MeasurementTable')(
+const connectedComponent = withTranslation(['MeasurementTable', 'Common'])(
   MeasurementTable
 );
 export { connectedComponent as MeasurementTable };

diff --git a/src/components/studyList/PaginationArea.js b/src/components/studyList/PaginationArea.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './PaginationArea.styl';
+import { withTranslation } from '../../utils/LanguageProvider';
 
 class PaginationArea extends PureComponent {
   static defaultProps = {
@@ -43,7 +44,7 @@ class PaginationArea extends PureComponent {
                   disabled={this.props.currentPage === 0}
                   className="btn page-link"
                 >
-                  Previous
+                  {this.props.t('Previous')}
                 </button>
               </li>
               <li className="page-item next">
@@ -55,7 +56,7 @@ class PaginationArea extends PureComponent {
                   }
                   className="btn page-link"
                 >
-                  Next
+                  {this.props.t('Next')}
                 </button>
               </li>
             </ul>
@@ -68,7 +69,7 @@ class PaginationArea extends PureComponent {
   renderRowsPerPageDropdown() {
     return (
       <div className="form-inline form-group rows-per-page">
-        <span>Show</span>
+        <span>{this.props.t('Show')}</span>
         <select
           onChange={this.onRowsPerPageChange}
           defaultValue={this.props.rowsPerPage}
@@ -81,7 +82,7 @@ class PaginationArea extends PureComponent {
             );
           })}
         </select>
-        <span>rows per page</span>
+        <span>{this.props.t('RowsPerPage')}</span>
       </div>
     );
   }
@@ -106,4 +107,5 @@ class PaginationArea extends PureComponent {
   }
 }
 
-export { PaginationArea };
+const connectedComponent = withTranslation('Common')(PaginationArea);
+export { connectedComponent as PaginationArea };
diff --git a/src/components/studyList/StudyList.js b/src/components/studyList/StudyList.js
@@ -11,6 +11,7 @@ import { StudylistToolbar } from './StudyListToolbar.js';
 import { isInclusivelyBeforeDay } from 'react-dates';
 import moment from 'moment';
 import debounce from 'lodash.debounce';
+import { withTranslation } from '../../utils/LanguageProvider';
 
 const today = moment();
 const lastWeek = moment().subtract(7, 'day');
@@ -241,7 +242,7 @@ class StudyList extends Component {
         }}
       >
         <td className={study.patientName ? 'patientName' : 'emptyCell'}>
-          {study.patientName || '(empty)'}
+          {study.patientName || `(${this.props.t('Empty')})`}
         </td>
 
         <td className="patientId">{study.patientId}</td>
@@ -256,28 +257,28 @@ class StudyList extends Component {
   render() {
     const tableMeta = {
       patientName: {
-        displayText: 'Patient Name',
+        displayText: this.props.t('PatientName'),
         sort: 0,
       },
       patientId: {
-        displayText: 'MRN',
+        displayText: this.props.t('MRN'),
         sort: 0,
       },
       accessionNumber: {
-        displayText: 'Accession #',
+        displayText: this.props.t('AccessionNumber'),
         sort: 0,
       },
       studyDate: {
-        displayText: 'Study Date',
+        displayText: this.props.t('StudyDate'),
         inputType: 'date-range',
         sort: 0,
       },
       modalities: {
-        displayText: 'Modality',
+        displayText: this.props.t('Modality'),
         sort: 0,
       },
       studyDescription: {
-        displayText: 'Description',
+        displayText: this.props.t('StudyDescription'),
         sort: 0,
       },
     };
@@ -297,7 +298,7 @@ class StudyList extends Component {
     return (
       <div className="StudyList">
         <div className="studyListToolbar clearfix">
-          <div className="header pull-left">Study List</div>
+          <div className="header pull-left">{this.props.t('StudyList')}</div>
           <div className="studyCount pull-right">
             {this.props.studies.length}
           </div>
@@ -426,4 +427,5 @@ class StudyList extends Component {
   }
 }
 
-export { StudyList };
+const connectedComponent = withTranslation('StudyList')(StudyList);
+export { connectedComponent as StudyList };