refactor: improve locale imports

While refactoring the login form component I found many inconsistent
ways of importing the list of locales. So I decided to refactor the
imports altogether. Don't use `process.env` to import locales!

package.json

@@ -26,6 +26,7 @@
     "cypress-cucumber-preprocessor": "^1.16.2",
     "cypress-file-upload": "^3.3.4",
     "cypress-plugin-retries": "^1.3.0",
+    "date-fns": "^2.4.1",
     "dotenv": "^8.1.0",
     "faker": "Marak/faker.js#master",
     "graphql-request": "^1.8.2",

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -36,6 +36,7 @@
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
 import orderBy from 'lodash/orderBy'
+import locales from '~/locales'
 
 export default {
   components: {
@@ -47,7 +48,7 @@ export default {
   },
   data() {
     return {
-      locales: orderBy(process.env.locales, 'name'),
+      locales: orderBy(locales, 'name'),
     }
   },
   computed: {

webapp/components/RelativeDateTime/index.vue

@@ -3,17 +3,8 @@
 </template>
 
 <script>
+import { getDateFnsLocale } from '~/locales'
 import formatRelative from 'date-fns/formatRelative'
-import { enUS, de, nl, fr, pt, es } from 'date-fns/locale' // pl currently not working library wise
-const locales = {
-  en: enUS,
-  de,
-  nl,
-  fr,
-  es,
-  pt,
-  // pl
-}
 
 export default {
   name: 'HcRelativeDateTime',
@@ -25,8 +16,7 @@ export default {
   },
   computed: {
     relativeDateTime() {
-      let locale = locales[this.$i18n.locale() || 'en']
+      return formatRelative(new Date(this.dateTime), new Date(), { locale: getDateFnsLocale(this) })
-      return formatRelative(new Date(this.dateTime), new Date(), { locale })
     },
   },
 }

webapp/locales/index.js

@@ -1,50 +1,67 @@
-module.exports = [
+import { enUS, de, nl, fr, es, it, pt, pl } from 'date-fns/locale'
+import find from 'lodash/find'
+
+const locales = [
   {
     name: 'English',
     code: 'en',
     iso: 'en-US',
     enabled: true,
+    dateFnsLocale: enUS,
   },
   {
     name: 'Deutsch',
     code: 'de',
     iso: 'de-DE',
     enabled: true,
+    dateFnsLocale: de,
   },
   {
     name: 'Nederlands',
     code: 'nl',
     iso: 'nl-NL',
     enabled: true,
+    dateFnsLocale: nl,
   },
   {
     name: 'Français',
     code: 'fr',
     iso: 'fr-FR',
     enabled: true,
+    dateFnsLocale: fr,
   },
   {
     name: 'Italiano',
     code: 'it',
     iso: 'it-IT',
     enabled: true,
+    dateFnsLocale: it,
   },
   {
     name: 'Español',
     code: 'es',
     iso: 'es-ES',
     enabled: true,
+    dateFnsLocale: es,
   },
   {
     name: 'Português',
     code: 'pt',
     iso: 'pt-PT',
     enabled: true,
+    dateFnsLocale: pt,
   },
   {
     name: 'Polski',
     code: 'pl',
     iso: 'pl-PL',
     enabled: true,
+    dateFnsLocale: pl,
   },
 ]
+
+export default locales
+export function getDateFnsLocale({ $i18n }) {
+  const { dateFnsLocale } = find(locales, { code: $i18n.locale() }) || {}
+  return dateFnsLocale || enUS
+}

webapp/maintenance/source/nuxt.config.maintenance.js

@@ -1,16 +1,10 @@
 import defaultConfig from './nuxt.config.js'
 
-const {
+const { css, styleResources, manifest } = defaultConfig
-  css,
-  styleResources,
-  env: { locales },
-  manifest,
-} = defaultConfig
 
 export default {
   css,
   styleResources,
-  env: { locales },
   manifest,
 
   head: {

webapp/nuxt.config.js

@@ -52,8 +52,6 @@ export default {
     ],
     // pages to keep alive
     keepAlivePages: ['index'],
-    // active locales
-    locales: require('./locales'),
   },
   /*
    ** Headers of the page

webapp/plugins/i18n.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import { isEmpty, find } from 'lodash'
+import locales from '~/locales'
 
 /**
  * TODO: Refactor and simplify browser detection
@@ -76,7 +77,7 @@ export default ({ app, req, cookie, store }) => {
     }
   }
 
-  const availableLocales = process.env.locales.filter(lang => !!lang.enabled)
+  const availableLocales = locales.filter(lang => !!lang.enabled)
   const locale = find(availableLocales, ['code', userLocale]) ? userLocale : 'en'
 
   if (locale !== 'en') {

webapp/plugins/vue-filters.js

@@ -1,36 +1,21 @@
 import Vue from 'vue'
-
-import { enUS, de, nl, fr, es } from 'date-fns/locale'
 import format from 'date-fns/format'
 import accounting from 'accounting'
 import trunc from 'trunc-html'
+import { getDateFnsLocale } from '~/locales'
 
 export default ({ app = {} }) => {
-  const locales = {
-    en: enUS,
-    de: de,
-    nl: nl,
-    fr: fr,
-    es: es,
-    pt: es,
-    pl: de,
-  }
-  const getLocalizedFormat = () => {
-    let locale = app.$i18n.locale()
-    locale = locales[locale] ? locale : 'en'
-    return locales[locale]
-  }
   app.$filters = Object.assign(app.$filters || {}, {
     date: (value, fmt = 'dd. MMM yyyy') => {
       if (!value) return ''
       return format(new Date(value), fmt, {
-        locale: getLocalizedFormat(),
+        locale: getDateFnsLocale(app),
       })
     },
     dateTime: (value, fmt = 'dd. MMM yyyy HH:mm') => {
       if (!value) return ''
       return format(new Date(value), fmt, {
-        locale: getLocalizedFormat(),
+        locale: getDateFnsLocale(app),
       })
     },
     number: (value, precision = 2, thousands = '.', decimals = ',', fallback = null) => {

yarn.lock

@@ -1965,6 +1965,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.4.1.tgz#b53f9bb65ae6bd9239437035710e01cf383b625e"
+  integrity sha512-2RhmH/sjDSCYW2F3ZQxOUx/I7PvzXpi89aQL2d3OAxSTwLx6NilATeUbe0menFE3Lu5lFkOFci36ivimwYHHxw==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"