Add date translation

The weekly/trends chart have also been updated from "MMM D" to "D MMM" in French

.babelrc

@@ -7,6 +7,9 @@
       "plugins": ["rewire"]
     }
   },
+  "plugins": [
+    "transform-decorators-legacy"
+  ],
   "presets": [
     "es2015",
     "stage-0",

.eslintrc

@@ -5,6 +5,7 @@
     "jsx": true,
     "classes": true,
     "modules": true,
+    "experimentalDecorators": true
   },
   "env": {
     // I write for browser
@@ -43,5 +44,5 @@
   },
   "plugins": [
     "react"
-  ]
+  ],
 }

app/components/chart/trends.js

@@ -22,6 +22,7 @@ import bows from 'bows';
 import React, { PropTypes, PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import sundial from 'sundial';
+import { translate } from 'react-i18next';
 
 import Header from './header';
 import SubNav from './trendssubnav';
@@ -35,6 +36,7 @@ const TrendsContainer = viz.containers.TrendsContainer;
 const reshapeBgClassesToBgBounds = viz.utils.reshapeBgClassesToBgBounds;
 const Loader = viz.components.Loader;
 
+@translate()
 class Trends extends PureComponent {
   static propTypes = {
     bgPrefs: PropTypes.object.isRequired,
@@ -105,15 +107,15 @@ class Trends extends PureComponent {
   }
 
   formatDate(datetime) {
-    const timePrefs = this.props.timePrefs
+    const { timePrefs, t } = this.props;
     let timezone;
     if (!timePrefs.timezoneAware) {
       timezone = 'UTC';
     }
     else {
       timezone = timePrefs.timezoneName || 'UTC';
     }
-    return sundial.formatInTimezone(datetime, timezone, 'MMM D, YYYY');
+    return sundial.formatInTimezone(datetime, timezone, t('MMM D, YYYY'));
   }
 
   getNewDomain(current, extent) {

app/components/chart/weekly.js

@@ -20,6 +20,7 @@ var bows = require('bows');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var sundial = require('sundial');
+import { translate } from 'react-i18next';
 
 // tideline dependencies & plugins
 var tidelineBlip = require('tideline/plugins/blip');
@@ -150,7 +151,7 @@ var WeeklyChart = React.createClass({
   }
 });
 
-var Weekly = React.createClass({
+var Weekly = translate()(React.createClass({
   chartType: 'weekly',
   log: bows('Weekly View'),
   propTypes: {
@@ -297,8 +298,9 @@ var Weekly = React.createClass({
   },
 
   formatDate: function(datetime) {
+    const { t } = this.props;
     // even when timezoneAware, labels should be generated as if UTC; just trust me (JEB)
-    return sundial.formatInTimezone(datetime, 'UTC', 'MMM D, YYYY');
+    return sundial.formatInTimezone(datetime, 'UTC', t('MMM D, YYYY'));
   },
 
   getTitle: function(datetimeLocationEndpoints) {
@@ -411,6 +413,6 @@ var Weekly = React.createClass({
     }
     this.setState({showingValues: !this.state.showingValues});
   }
-});
+}));
 
 module.exports = Weekly;

app/components/navbar/navbar.js

@@ -28,7 +28,7 @@ var NavbarPatientCard = require('../../components/navbarpatientcard');
 var logoSrc = require('./images/tidepool-logo-408x46.png');
 
 // The pure component needs to be exported for tests
-export const PureNavbar = React.createClass({
+export default translate('translation', {withRef: true})(React.createClass({
   propTypes: {
     currentPage: React.PropTypes.string,
     user: React.PropTypes.object,
@@ -227,6 +227,4 @@ export const PureNavbar = React.createClass({
       logout();
     }
   }
-});
-
-export default translate('translation', {withRef: true})(PureNavbar);
+}));

app/core/language.js

@@ -2,6 +2,10 @@
 import i18n from 'i18next';
 import { reactI18nextModule } from 'react-i18next';
 import getLocale from 'browser-locale';
+import moment from 'moment';
+
+// Update moment with the right language, for date display
+i18n.on('languageChanged', lng => moment.locale(lng));
 
 i18n
   .use(reactI18nextModule)

locales/en/translation.json

@@ -12,6 +12,7 @@
   "Logging in...": "",
   "Login": "",
   "Logout": "",
+  "MMM D, YYYY": "",
   "Password": "",
   "Remember me": "",
   "Sign up": ""

locales/fr/translation.json

@@ -12,6 +12,7 @@
   "Logging in...": "Connexion...",
   "Login": "Connexion",
   "Logout": "Déconnexion",
+  "MMM D, YYYY": "D MMM YYYY",
   "Password": "Mot de passe",
   "Remember me": "Se souvenir de moi",
   "Sign up": "Inscription"

package.json

@@ -87,6 +87,7 @@
   "devDependencies": {
     "babel-eslint": "6.1.2",
     "babel-plugin-rewire": "1.0.0-rc-6",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "chai": "3.5.0",
     "chromedriver": "2.23.1",
     "eslint": "2.13.1",

test/unit/app/core/language.test.js

@@ -1,16 +1,23 @@
 import i18n from '../../../../app/core/language';
 
-/* global chai */
-/* global describe */
-/* global it */
+/* global chai, describe, before, after, it */
 
 const expect = chai.expect;
 
 describe('languages', () => {
+  before(() => {
+    i18n.changeLanguage('en');
+  });
+
   it('should be able to change language', () => {
     expect(i18n.t('Log in')).to.equal('Log in');
 
     i18n.changeLanguage('fr');
     expect(i18n.t('Log in')).to.equal('Connexion');
-  })
+  });
+
+  after(() => {
+    // Avoid affecting other tests
+    i18n.changeLanguage('en');
+  });
 });

test/unit/components/chart/trends.test.js

@@ -30,6 +30,7 @@ import Trends from '../../../../app/components/chart/trends';
 import { shallow } from 'enzyme';
 import { MGDL_UNITS } from '../../../../app/core/constants';
 import { components as vizComponents } from '@tidepool/viz';
+import i18next from '../../../../app/core/language';
 
 const { Loader } = vizComponents;
 
@@ -88,14 +89,15 @@ describe('Trends', () => {
     trendsState: {
       '1234': {},
     },
+    t: i18next.t.bind(i18next),
     loading: false,
     onUpdateChartDateRange: sinon.stub(),
     updateDatetimeLocation: sinon.stub(),
   };
 
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<Trends {...baseProps} />);
+    wrapper = shallow(<Trends.WrappedComponent {...baseProps} />);
   })
 
   afterEach(() => {
@@ -120,7 +122,7 @@ describe('Trends', () => {
     let instance;
 
     beforeEach(() => {
-      wrapper = shallow(<Trends {...baseProps} />);
+      wrapper = shallow(<Trends.WrappedComponent {...baseProps} />);
       instance = wrapper.instance();
     });
 

test/unit/components/chart/weekly.test.js

@@ -32,6 +32,7 @@ import Weekly from '../../../../app/components/chart/weekly';
 import { shallow } from 'enzyme';
 import { MGDL_UNITS } from '../../../../app/core/constants';
 import { components as vizComponents } from '@tidepool/viz';
+import i18next from '../../../../app/core/language';
 
 const { Loader } = vizComponents;
 
@@ -77,11 +78,12 @@ describe('Weekly', () => {
     loading: false,
     onUpdateChartDateRange: sinon.stub(),
     updateDatetimeLocation: sinon.stub(),
+    t: i18next.t.bind(i18next)
   };
 
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<Weekly {...baseProps} />);
+    wrapper = shallow(<Weekly.WrappedComponent {...baseProps} />);
   })
 
   afterEach(() => {
@@ -110,7 +112,7 @@ describe('Weekly', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallow(<Weekly {...baseProps} />);
+      wrapper = shallow(<Weekly.WrappedComponent {...baseProps} />);
       instance = wrapper.instance();
     });
 

test/unit/components/navbar.test.js

@@ -4,10 +4,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import '../../../app/core/language';
-// The HOC makes it difficult to access / set properties of the pure component,
-// in this case the trackMetric property of PureNavbar. So we test
-// on the pure component instead.
-import Navbar, {PureNavbar} from '../../../app/components/navbar';
+import Navbar from '../../../app/components/navbar';
 
 const expect = chai.expect;
 
@@ -25,7 +22,10 @@ describe('Navbar', ()  => {
         </div>
       );
     });
-    wrapper = shallow(<PureNavbar {...props} />);
+    // The HOC makes it difficult to access / set properties of the pure component,
+    // in this case the trackMetric property of PureNavbar. So we test
+    // on the pure component instead.
+    wrapper = shallow(<Navbar.WrappedComponent {...props} />);
   });
 
   after(() => {