changed locales initialization & add date-fns locale imports

app/src/App.vue

@@ -91,10 +91,6 @@ export default {
 
   // This hook is only triggered at page first load
   async created () {
-    // Save user locales in store
-    const { locale, fallbackLocale } = this.$i18n
-    this.$store.dispatch('INIT_LOCALES', { locale, fallbackLocale })
-
     // From this hook the value of `connected` always come from the localStorage.
     if (!this.connected) {
       // user is not connected: allow the login view to be rendered.

app/src/i18n/helpers.js

@@ -1,6 +1,8 @@
 import i18n from '@/i18n'
+import store from '@/store'
 import supportedLocales from './supportedLocales'
 
+let dateFnsLocale
 const loadedLanguages = []
 
 /**
@@ -10,9 +12,8 @@ const loadedLanguages = []
  * @return {string[]}
  */
 function getDefaultLocales () {
-  const locale = localStorage.getItem('locale')
-  const fallbackLocale = localStorage.getItem('fallbackLocale')
-
+  const locale = store.getters.locale
+  const fallbackLocale = store.getters.fallbackLocale
   if (locale && fallbackLocale) return [locale, fallbackLocale]
 
   const navigatorLocales = navigator.languages || [navigator.language]
@@ -49,7 +50,7 @@ function loadLocaleMessages (locale) {
     return Promise.resolve(locale)
   }
   return import(
-    /* webpackChunkName: "lang-[request]" */ `@/locales/${locale}.json`
+    /* webpackChunkName: "lc/lang-[request]" */ `@/locales/${locale}`
   ).then(messages => {
     i18n.setLocaleMessage(locale, messages.default)
     loadedLanguages.push(locale)
@@ -57,8 +58,35 @@ function loadLocaleMessages (locale) {
   })
 }
 
-export {
-  getDefaultLocales,
-  updateDocumentLocale,
-  loadLocaleMessages
+/**
+ * Loads a date-fns locale object
+ */
+async function loadDateFnsLocale (locale) {
+  const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale || locale
+  return import(
+    /* webpackChunkName: "lc/datefns-[request]" */
+    `date-fns/locale/${dateFnsLocaleName}/index.js`
+  ).then(locale => {
+    dateFnsLocale = locale.default
+  })
+}
+
+/**
+ * Initialize all locales
+ */
+function initDefaultLocales () {
+  // Get defined locales from `localStorage` or `navigator`
+  const [locale, fallbackLocale] = getDefaultLocales()
+
+  store.dispatch('UPDATE_LOCALE', locale)
+  store.dispatch('UPDATE_FALLBACK_LOCALE', fallbackLocale || 'en')
+  loadLocaleMessages('en')
+}
+
+export {
+  initDefaultLocales,
+  updateDocumentLocale,
+  loadLocaleMessages,
+  loadDateFnsLocale,
+  dateFnsLocale
 }

app/src/i18n/index.js

@@ -5,21 +5,12 @@
 
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import { getDefaultLocales, loadLocaleMessages } from './helpers'
+import { initDefaultLocales } from './helpers'
 
 // Plugin Initialization
 Vue.use(VueI18n)
 
-// Get defined locales from `localStorage` or `navigator`
-const [locale, fallbackLocale] = getDefaultLocales()
+export default new VueI18n({})
 
-export default new VueI18n({
-  locale,
-  fallbackLocale: fallbackLocale ? [fallbackLocale, 'en'] : ['en'],
-  messages: {}
-})
-
-// Load default locales translations files
-loadLocaleMessages(locale)
-loadLocaleMessages(fallbackLocale)
-loadLocaleMessages('en')
+// Load default locales translations files and setup store data
+initDefaultLocales()

app/src/i18n/supportedLocales.js

@@ -1,26 +1,83 @@
+// date-fns locales can be found here : https://github.com/date-fns/date-fns/tree/master/src/locale
+
 export default {
-  ar: 'عربي',
-  bn_BD: 'বাংলা',
-  br: 'Brezhoneg',
-  ca: 'Català',
-  de: 'Deutsch',
-  el: 'Eλληνικά',
-  en: 'English',
-  eo: 'Esperanto',
-  es: 'Español',
-  eu: 'Euskara',
-  fr: 'Français',
-  hi: 'हिन्दी',
-  hu: 'Magyar',
-  it: 'Italiano',
-  nb_NO: 'Norsk bokmål',
-  ne: 'नेपाली',
-  nl: 'Nederlands',
-  oc: 'Occitan',
-  pl: 'Polski',
-  pt: 'Português',
-  ru: 'Русский',
-  sv: 'Svenska',
-  tr: 'Türkçe',
-  zh_Hans: '简化字'
+  ar: {
+    name: 'عربي'
+  },
+  bn_BD: {
+    name: 'বাংলা',
+    dateFnsLocale: 'bn'
+  },
+  br: {
+    name: 'Brezhoneg',
+    dateFnsLocale: 'fr'
+  },
+  ca: {
+    name: 'Català'
+  },
+  de: {
+    name: 'Deutsch'
+  },
+  el: {
+    name: 'Eλληνικά'
+  },
+  en: {
+    name: 'English',
+    dateFnsLocale: 'en-GB'
+  },
+  eo: {
+    name: 'Esperanto'
+  },
+  es: {
+    name: 'Español'
+  },
+  eu: {
+    name: 'Euskara'
+  },
+  fr: {
+    name: 'Français'
+  },
+  hi: {
+    name: 'हिन्दी'
+  },
+  hu: {
+    name: 'Magyar'
+  },
+  it: {
+    name: 'Italiano'
+  },
+  nb_NO: {
+    name: 'Norsk bokmål',
+    dateFnsLocale: 'nb'
+  },
+  ne: {
+    name: 'नेपाली',
+    dateFnsLocale: 'en-GB'
+  },
+  nl: {
+    name: 'Nederlands'
+  },
+  oc: {
+    name: 'Occitan',
+    dateFnsLocale: 'ca'
+  },
+  pl: {
+    name: 'Polski'
+  },
+  pt: {
+    name: 'Português'
+  },
+  ru: {
+    name: 'Русский'
+  },
+  sv: {
+    name: 'Svenska'
+  },
+  tr: {
+    name: 'Türkçe'
+  },
+  zh_Hans: {
+    name: '简化字',
+    dateFnsLocale: 'zh-CN'
+  }
 }

app/src/store/settings.js

@@ -4,12 +4,12 @@
  */
 
 import i18n from '@/i18n'
-import { loadLocaleMessages, updateDocumentLocale } from '@/i18n/helpers'
+import { loadLocaleMessages, updateDocumentLocale, loadDateFnsLocale } from '@/i18n/helpers'
 
 export default {
   state: {
-    locale: undefined,
-    fallbackLocale: undefined
+    locale: localStorage.getItem('locale'),
+    fallbackLocale: localStorage.getItem('fallbackLocale')
   },
 
   mutations: {
@@ -27,22 +27,19 @@ export default {
   actions: {
     'UPDATE_LOCALE' ({ commit }, locale) {
       loadLocaleMessages(locale).then(() => {
-        i18n.locale = locale
         updateDocumentLocale(locale)
         commit('SET_LOCALE', locale)
+        i18n.locale = locale
       })
+      // also query the date-fns locale object for filters
+      loadDateFnsLocale(locale)
     },
 
     'UPDATE_FALLBACK_LOCALE' ({ commit }, locale) {
       loadLocaleMessages(locale).then(() => {
-        i18n.fallbackLocale = [locale, 'en']
         commit('SET_FALLBACK_LOCALE', locale)
+        i18n.fallbackLocale = [locale, 'en']
       })
-    },
-
-    'INIT_LOCALES' ({ commit }, { locale, fallbackLocale }) {
-      commit('SET_LOCALE', locale)
-      commit('SET_FALLBACK_LOCALE', fallbackLocale[0])
     }
   },