Add functionality for i18n within application (#7)

Author: zplata

.eslintrc

@@ -7,11 +7,13 @@
     "FHIR": true,
     "document": true,
     "Canadarm": true,
-    "canadarmConfig": true
+    "canadarmConfig": true,
+    "navigator": true
   },
   "rules": {
     "class-methods-use-this": ["error", {"exceptMethods": ["handleSubmit", "handleKeyPress", "shouldComponentUpdate", "render"]}],
     "no-console": 0,
-    "jsx-a11y/no-static-element-interactions": 0
+    "jsx-a11y/no-static-element-interactions": 0,
+    "react/prefer-stateless-function": [0, { "ignorePureComponents": true }]
   }
 }

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+* 1.4.0
+    - Add i18n functionality to allow for specific language/locale
+    - Replaced fhir-client library with the latest version
+    - Allow for unknown gender option to be pulled in via FHIR
 * 1.3.0
     - Update UI for the risk factors view to be print-friendly
 * 1.2.0

app/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

app/__mocks__/load_fhir_data.js

@@ -21,11 +21,16 @@ ASCVDRisk.computeLifetimeRisk = jest.fn(() => 35);
 ASCVDRisk.computeLowestLifetime = jest.fn(() => 5);
 ASCVDRisk.computePotentialRisk = jest.fn(() => 20);
 ASCVDRisk.canCalculateScore = jest.fn(() => true);
-ASCVDRisk.missingFields = jest.fn();
+ASCVDRisk.missingFields = jest.fn(() => []);
 ASCVDRisk.isValidAge = jest.fn(() => true);
 ASCVDRisk.isValidTotalCholesterol = jest.fn(() => false);
 ASCVDRisk.isValidSysBP = jest.fn(() => true);
 ASCVDRisk.isValidHDL = jest.fn(() => true);
 ASCVDRisk.computeBirthDateFromAge = jest.fn();
 
+// Test function to change gender in Jest component tests.
+ASCVDRisk.changeGender = (gender) => {
+  ASCVDRisk.patientInfo.gender = gender;
+};
+
 module.exports = ASCVDRisk;

app/load_fhir_data.js

@@ -673,50 +673,33 @@ window.ASCVDRisk = window.ASCVDRisk || {};
   const missingFields = () => {
     const needInput = [];
     if (!ASCVDRisk.isValidTotalCholesterol(ASCVDRisk.patientInfo.totalCholesterol)) {
-      needInput.push('Total cholesterol');
+      needInput.push('formTotalCholesterol');
     }
     if (ASCVDRisk.patientInfo.relatedFactors.diabetic === undefined) {
-      needInput.push('Diabetes status');
+      needInput.push('formDiabetic');
     }
     if (!ASCVDRisk.isValidAge(ASCVDRisk.patientInfo.age)) {
-      needInput.push('Age');
+      needInput.push('formAge');
     }
     if (!ASCVDRisk.isValidHDL(ASCVDRisk.patientInfo.hdl)) {
-      needInput.push('HDL - cholesterol');
+      needInput.push('formHdl');
     }
     if (ASCVDRisk.patientInfo.relatedFactors.smoker === undefined) {
-      needInput.push('Current smoking status');
+      needInput.push('formSmoker');
     }
     if (ASCVDRisk.patientInfo.relatedFactors.race === undefined) {
-      needInput.push('Race');
+      needInput.push('formRace');
     }
     if (!ASCVDRisk.isValidSysBP(ASCVDRisk.patientInfo.systolicBloodPressure)) {
-      needInput.push('Systolic blood pressure');
+      needInput.push('formSysBP');
     }
     if (ASCVDRisk.patientInfo.relatedFactors.hypertensive === undefined) {
-      needInput.push('Hypertension status');
+      needInput.push('formHypertensive');
     }
     if (ASCVDRisk.patientInfo.gender === undefined) {
-      needInput.push('Gender');
+      needInput.push('formSex');
     }
-    if (needInput.length === 9) {
-      return 'All fields required to compute ASCVD risk';
-    } else if (needInput.length > 2) {
-      let retStatement = '';
-      for (let i = 0; i < needInput.length; i += 1) {
-        if (i === needInput.length - 1) {
-          retStatement += `and ${needInput[i]} are all required to compute ASCVD risk`;
-        } else {
-          retStatement += `${needInput[i]}, `;
-        }
-      }
-      return retStatement;
-    } else if (needInput.length === 2) {
-      return `${needInput[0]} and ${needInput[1]} are both required to compute ASCVD risk`;
-    } else if (needInput.length === 1) {
-      return `${needInput[0]} is required to compute ASCVD risk`;
-    } else if (needInput.length === 0) { return ''; }
-    return '';
+    return needInput;
   };
   ASCVDRisk.missingFields = missingFields;
   ASCVDRisk.patientInfo = PatientInfo;

build/css/styles.css

@@ -1,4 +1,5 @@
 import React from 'react';
+import { intlShape } from 'react-intl';
 import ASCVDRisk from '../../app/load_fhir_data';
 import PatientBanner from '../../components/PatientBanner/banner';
 import Header from '../../components/Header/header';
@@ -17,6 +18,7 @@ class App extends React.Component {
     this.updateRiskScores = this.updateRiskScores.bind(this);
     this.updateChangedProperty = this.updateChangedProperty.bind(this);
     this.setView = this.setView.bind(this);
+    this.getBirthDateDisplay = this.getBirthDateDisplay.bind(this);
     this.addOption = this.addOption.bind(this);
     this.removeOption = this.removeOption.bind(this);
     this.state = {
@@ -65,6 +67,8 @@ class App extends React.Component {
           updateChangedProperty={this.updateChangedProperty}
           options={this.state.options}
           removeOption={this.removeOption}
+          intl={this.props.intl}
+          currentLocale={this.props.currentLocale}
         />
       );
     } else if (this.state.view === 'Risk Factors') {
@@ -77,13 +81,34 @@ class App extends React.Component {
           lifetimeBest={ASCVDRisk.computeLowestLifetime()}
           options={this.state.options}
           removeOption={this.removeOption}
+          intl={this.props.intl}
+          currentLocale={this.props.currentLocale}
         />
       );
     }
     return (
-      <Recommendations />
+      <Recommendations intl={this.props.intl} />
     );
   }
+  /**
+   * Displays a user-friendly date of birth
+   * @returns {string} - Internationalized string representing a possible date of birth
+   */
+  getBirthDateDisplay() {
+    const propIntl = this.props.intl;
+    const messages = propIntl.messages;
+    let birthDateDisplay = '';
+    const date = ASCVDRisk.patientInfo.dateOfBirth;
+    if (Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime())) {
+      birthDateDisplay = propIntl.formatMessage(messages.bannerDate, {
+        date: (`0${date.getDate()}`).slice(-2),
+        month: (`0${date.getMonth() + 1}`).slice(-2),
+        year: date.getFullYear(),
+      });
+    }
+    return birthDateDisplay;
+  }
+
 
   /**
    * Adds a risk factor option to options property
@@ -137,16 +162,40 @@ class App extends React.Component {
   }
 
   render() {
+    const propIntl = this.props.intl;
+    const messages = propIntl.messages;
+    let gender;
+    if (ASCVDRisk.patientInfo.gender &&
+      ASCVDRisk.patientInfo.gender.toLowerCase() === 'female') {
+      gender = propIntl.formatMessage(messages.bannerFemale);
+    } else if (ASCVDRisk.patientInfo.gender &&
+      ASCVDRisk.patientInfo.gender.toLowerCase() === 'male') {
+      gender = propIntl.formatMessage(messages.bannerMale);
+    } else {
+      gender = propIntl.formatMessage(messages.bannerUnknownGender);
+    }
     return (
       <div>
         <PatientBanner
           hideBanner={ASCVDRisk.hideDemoBanner}
           name={`${ASCVDRisk.patientInfo.firstName} ${ASCVDRisk.patientInfo.lastName}`}
-          age={ASCVDRisk.patientInfo.age}
-          gender={ASCVDRisk.patientInfo.gender}
-          dob={ASCVDRisk.patientInfo.dateOfBirth}
+          age={propIntl.formatMessage(messages.bannerYears,
+            { age: propIntl.formatNumber(ASCVDRisk.patientInfo.age) })}
+          gender={gender}
+          dobPrompt={propIntl.formatMessage(messages.bannerDOB)}
+          dob={this.getBirthDateDisplay()}
+        />
+        <Header
+          header={propIntl.formatMessage(messages.appHeader)}
+          languagePrompt={propIntl.formatMessage(messages.language)}
+          locales={[
+            { name: propIntl.formatMessage(messages.enUS), val: 'en' },
+            { name: propIntl.formatMessage(messages.enUK), val: 'en-GB' },
+            { name: propIntl.formatMessage(messages.es), val: 'es' },
+          ]}
+          updateLocale={this.props.updateLocale}
+          currentLocale={this.props.currentLocale}
         />
-        <Header header={'ASCVD Risk Calculator'} />
         <Navbar
           updateView={this.updateView}
           tab_one={'Results'}
@@ -155,11 +204,18 @@ class App extends React.Component {
           tabIndex={this.state.tabIndex}
           hideNav={this.state.hideNav}
           changedProperty={this.state.changedProperty}
+          intl={propIntl}
+          currentLocale={this.props.currentLocale}
         />
         { this.setView() }
       </div>
     );
   }
 }
+App.propTypes = {
+  intl: intlShape,
+  currentLocale: React.PropTypes.string,
+  updateLocale: React.PropTypes.func.isRequired,
+};
 
 export default App;

build/images/Settings.svg

@@ -0,0 +1,3 @@
+import { injectIntl } from 'react-intl';
+import App from './app';
+export default injectIntl(App);