fix(locale): make timezone defaulted

frontend/src/component/application/application-edit-component.js

@@ -145,7 +145,8 @@ class ClientApplications extends PureComponent {
                                         icon="timeline"
                                         subtitle={
                                             <span>
-                                                {clientIp} last seen at <small>{this.formatFullDateTime(lastSeen)}</small>
+                                                {clientIp} last seen at{' '}
+                                                <small>{this.formatFullDateTime(lastSeen)}</small>
                                             </span>
                                         }
                                     >

frontend/src/component/common/__tests__/util-test.jsx

@@ -1,11 +1,17 @@
 import { formatFullDateTimeWithLocale } from '../util';
 
 test('formats dates correctly', () => {
-    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO')).toEqual('2017-02-23 14:56:49');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'UTC')).toEqual('2017-02-23 14:56:49');
-    expect(formatFullDateTimeWithLocale(1487232809466, 'nb-NO')).toEqual('2017-02-16 08:13:29');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Paris')).toEqual('2017-02-23 15:56:49');
-    expect(formatFullDateTimeWithLocale(1477232809466, 'nb-NO')).toEqual('2016-10-23 14:26:49');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Oslo')).toEqual('2017-02-23 15:56:49');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/London')).toEqual('2017-02-23 14:56:49');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Paris')).toEqual('02/23/2017, 3:56:49 PM');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Oslo')).toEqual('02/23/2017, 3:56:49 PM');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/London')).toEqual('02/23/2017, 2:56:49 PM');
 
-    expect(formatFullDateTimeWithLocale(1487861809466, 'us-US')).toEqual('2017-02-23 09:56:49');
+    expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO')).toEqual(
-    expect(formatFullDateTimeWithLocale(1487232809466, 'us-US')).toEqual('2017-02-16 03:13:29');
+        expect.stringMatching(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/)
-    expect(formatFullDateTimeWithLocale(1477232809466, 'us-US')).toEqual('2016-10-23 10:26:49');
+    );
+    expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB')).toEqual(expect.stringContaining('02/23/2017'));
+    expect(formatFullDateTimeWithLocale(1487861809466, 'en-US')).toEqual(expect.stringContaining('02/23/2017'));
 });

frontend/src/component/common/util.js

@@ -6,23 +6,9 @@ const dateTimeOptions = {
     minute: '2-digit',
     second: '2-digit',
 };
-// todo for a more comprehensive list use of moment.tz from https://github.com/moment/moment-timezone
+export const formatFullDateTimeWithLocale = (v, locale, tz) => {
-const predefinedLocale = [
+    if (tz) {
-    {
+        dateTimeOptions.timeZone = tz;
-        locale: 'nb-NO',
+    }
-        timezone: 'UTC',
-    },
-    {
-        locale: 'us-US',
-        timezone: 'America/New_York',
-    },
-    {
-        locale: 'en-GB',
-        timezone: 'Europe/London',
-    },
-];
-export const formatFullDateTimeWithLocale = (v, locale) => {
-    let found = predefinedLocale.find(v => v.locale === locale);
-    dateTimeOptions.timeZone = found ? found.timezone : 'UTC';
     return new Date(v).toLocaleString(locale, dateTimeOptions);
 };

frontend/src/component/user/show-user-component.jsx

@@ -9,24 +9,39 @@ export default class ShowUserComponent extends React.Component {
         fetchUser: PropTypes.func.isRequired,
         updateSettingLocation: PropTypes.func.isRequired,
     };
-    possibleLocales = ['nb-NO', 'us-US', 'en-GB'];
+    possibleLocales = [
+        { value: 'nb-NO', image: 'nb-NO' },
+        { value: 'us-US', image: 'us-US' },
+        { value: 'en-GB', image: 'en-GB' },
+    ];
 
     componentDidMount() {
         this.props.fetchUser();
+        // find default locale and add it in choices if not present
+        let locale = navigator.language;
+        let found = this.possibleLocales.find(l => l.value === locale);
+        if (!found) {
+            this.possibleLocales.push({ value: locale, image: 'unknown-locale' });
+        }
     }
 
     updateLocale() {
-        const locale = this.props.location ? this.props.location.locale : this.possibleLocales[0];
+        const locale = this.props.location
-        let index = this.possibleLocales.findIndex(v => v === locale);
+            ? this.props.location.locale
+            : this.possibleLocales[this.possibleLocales.length - 1];
+        let index = this.possibleLocales.findIndex(v => v.value === locale);
         index = (index + 1) % this.possibleLocales.length;
-        this.props.updateSettingLocation('locale', this.possibleLocales[index]);
+        this.props.updateSettingLocation('locale', this.possibleLocales[index].value);
     }
 
     render() {
         const email = this.props.profile ? this.props.profile.email : '';
-        const locale = this.props.location ? this.props.location.locale : this.possibleLocales[0];
+        const locale = this.props.location
-        const imageUrl = email ? this.props.profile.imageUrl : 'public/unkown-user.png';
+            ? this.props.location.locale
-        const imageLocale = `public/${locale}.png`;
+            : this.possibleLocales[this.possibleLocales.length - 1].value;
+        let foundLocale = this.possibleLocales.find(l => l.value === locale);
+        const imageUrl = email ? this.props.profile.imageUrl : 'public/unknown-user.png';
+        const imageLocale = foundLocale ? `public/${foundLocale.image}.png` : `public/unknown-locale.png`;
         return (
             <div className={styles.showUserSettings}>
                 <div className={styles.showLocale}>