From b2dccfb51ca6f91b1e9646d8be4f956012811c26 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 15:25:54 +0200
Subject: [PATCH] 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                                  |  1 +
 .../components/LocaleSwitch/LocaleSwitch.vue  |  3 ++-
 webapp/components/RelativeDateTime/index.vue  | 14 ++-----------
 webapp/locales/index.js                       | 19 ++++++++++++++++-
 .../source/nuxt.config.maintenance.js         |  8 +------
 webapp/nuxt.config.js                         |  2 --
 webapp/plugins/i18n.js                        |  3 ++-
 webapp/plugins/vue-filters.js                 | 21 +++----------------
 yarn.lock                                     |  5 +++++
 9 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 6b51d9cca..3ed077b6e 100644
--- a/package.json
+++ b/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",
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index f765c534f..88959e27b 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/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: {
diff --git a/webapp/components/RelativeDateTime/index.vue b/webapp/components/RelativeDateTime/index.vue
index a6187425f..19018c24b 100644
--- a/webapp/components/RelativeDateTime/index.vue
+++ b/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 })
+      return formatRelative(new Date(this.dateTime), new Date(), { locale: getDateFnsLocale(this) })
     },
   },
 }
diff --git a/webapp/locales/index.js b/webapp/locales/index.js
index b4dbedc6e..c4a21c724 100644
--- a/webapp/locales/index.js
+++ b/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
+}
diff --git a/webapp/maintenance/source/nuxt.config.maintenance.js b/webapp/maintenance/source/nuxt.config.maintenance.js
index 738178786..5478fd97d 100644
--- a/webapp/maintenance/source/nuxt.config.maintenance.js
+++ b/webapp/maintenance/source/nuxt.config.maintenance.js
@@ -1,16 +1,10 @@
 import defaultConfig from './nuxt.config.js'
 
-const {
-  css,
-  styleResources,
-  env: { locales },
-  manifest,
-} = defaultConfig
+const { css, styleResources, manifest } = defaultConfig
 
 export default {
   css,
   styleResources,
-  env: { locales },
   manifest,
 
   head: {
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 312e19325..ec2502379 100644
--- a/webapp/nuxt.config.js
+++ b/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
diff --git a/webapp/plugins/i18n.js b/webapp/plugins/i18n.js
index 591387d00..e3f0c5fd2 100644
--- a/webapp/plugins/i18n.js
+++ b/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') {
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index b13af8fa0..df594f5e5 100644
--- a/webapp/plugins/vue-filters.js
+++ b/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) => {
diff --git a/yarn.lock b/yarn.lock
index bd9d62653..3b44b19a0 100644
--- a/yarn.lock
+++ b/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"