diff --git a/frontend/public/unknown-locale.png b/frontend/public/unknown-locale.png new file mode 100644 index 0000000000..00b618ad5a Binary files /dev/null and b/frontend/public/unknown-locale.png differ diff --git a/frontend/public/unkown-user.png b/frontend/public/unknown-user.png similarity index 100% rename from frontend/public/unkown-user.png rename to frontend/public/unknown-user.png diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js index 9d737435cc..2f8e0cfaa1 100644 --- a/frontend/src/component/application/application-edit-component.js +++ b/frontend/src/component/application/application-edit-component.js @@ -145,7 +145,8 @@ class ClientApplications extends PureComponent { icon="timeline" subtitle={ - {clientIp} last seen at {this.formatFullDateTime(lastSeen)} + {clientIp} last seen at{' '} + {this.formatFullDateTime(lastSeen)} } > diff --git a/frontend/src/component/common/__tests__/util-test.jsx b/frontend/src/component/common/__tests__/util-test.jsx index 5392876a07..cb86e4fdf8 100644 --- a/frontend/src/component/common/__tests__/util-test.jsx +++ b/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(1487232809466, 'nb-NO')).toEqual('2017-02-16 08:13:29'); - expect(formatFullDateTimeWithLocale(1477232809466, 'nb-NO')).toEqual('2016-10-23 14:26:49'); + expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'UTC')).toEqual('2017-02-23 14:56:49'); + expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Paris')).toEqual('2017-02-23 15:56: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(1487232809466, 'us-US')).toEqual('2017-02-16 03:13:29'); - expect(formatFullDateTimeWithLocale(1477232809466, 'us-US')).toEqual('2016-10-23 10:26:49'); + expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO')).toEqual( + expect.stringMatching(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/) + ); + expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB')).toEqual(expect.stringContaining('02/23/2017')); + expect(formatFullDateTimeWithLocale(1487861809466, 'en-US')).toEqual(expect.stringContaining('02/23/2017')); }); diff --git a/frontend/src/component/common/util.js b/frontend/src/component/common/util.js index 325887c01a..0439f99dfb 100644 --- a/frontend/src/component/common/util.js +++ b/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 -const predefinedLocale = [ - { - 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'; +export const formatFullDateTimeWithLocale = (v, locale, tz) => { + if (tz) { + dateTimeOptions.timeZone = tz; + } return new Date(v).toLocaleString(locale, dateTimeOptions); }; diff --git a/frontend/src/component/user/show-user-component.jsx b/frontend/src/component/user/show-user-component.jsx index eb1c056fab..4375f6bb5c 100644 --- a/frontend/src/component/user/show-user-component.jsx +++ b/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]; - let index = this.possibleLocales.findIndex(v => v === locale); + const locale = this.props.location + ? 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 imageUrl = email ? this.props.profile.imageUrl : 'public/unkown-user.png'; - const imageLocale = `public/${locale}.png`; + const locale = this.props.location + ? this.props.location.locale + : 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 (