From cac64f96a01cc57021963aede87b6a45fc2d720c Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 5 Apr 2023 14:17:12 +0200
Subject: [PATCH] fix(frontend): displayed decay duration

---
 frontend/package.json                         |  2 +-
 .../TransactionRows/DurationRow.vue           | 21 +++++++------------
 frontend/src/i18n.js                          |  4 ----
 frontend/src/plugins/dashboard-plugin.js      |  3 ---
 frontend/test/testSetup.js                    |  3 ---
 frontend/yarn.lock                            | 17 +++++----------
 6 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 513b6b509..812735e3e 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.2",
     "clipboard-polyfill": "^4.0.0-rc1",
+    "date-fns": "^2.29.3",
     "es6-promise": "^4.1.1",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.1.0",
@@ -58,7 +59,6 @@
     "vue-i18n": "^8.22.4",
     "vue-jest": "^3.0.7",
     "vue-loading-overlay": "^3.4.2",
-    "vue-moment": "^4.1.0",
     "vue-router": "^3.0.6",
     "vue-timers": "^2.0.4",
     "vue2-transitions": "^0.2.3",
diff --git a/frontend/src/components/TransactionRows/DurationRow.vue b/frontend/src/components/TransactionRows/DurationRow.vue
index aa20132d7..6f62d9dc5 100644
--- a/frontend/src/components/TransactionRows/DurationRow.vue
+++ b/frontend/src/components/TransactionRows/DurationRow.vue
@@ -5,12 +5,17 @@
         <div>{{ $t('decay.past_time') }}</div>
       </b-col>
       <b-col offset="1" offset-md="0" offset-lg="0" class="text-right mr-5">
-        <span v-if="duration">{{ durationText }}</span>
+        <span v-if="duration">{{ duration }}</span>
       </b-col>
     </b-row>
   </div>
 </template>
 <script>
+import { formatDistance } from 'date-fns'
+import { en, de, es, fr, nl } from 'date-fns/locale'
+
+const locales = { en, de, es, fr, nl }
+
 export default {
   name: 'DurationRow',
   props: {
@@ -25,19 +30,9 @@ export default {
   },
   computed: {
     duration() {
-      return this.$moment.duration(new Date(this.decayEnd) - new Date(this.decayStart))._data
-    },
-    durationText() {
-      const order = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
-      const result = []
-      order.forEach((timeSpan) => {
-        if (this.duration[timeSpan] > 0) {
-          // eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
-          const locale = this.$t(`time.${timeSpan}`)
-          result.push(`${this.duration[timeSpan]} ${locale}`)
-        }
+      return formatDistance(new Date(this.decayEnd), new Date(this.decayStart), {
+        locale: locales[this.$i18n.locale],
       })
-      return result.join(', ')
     },
   },
 }
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index a3b6e461c..04bbc7622 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -98,7 +98,6 @@ const dateTimeFormats = {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
-      weekday: 'long',
       hour: 'numeric',
       minute: 'numeric',
     },
@@ -130,7 +129,6 @@ const dateTimeFormats = {
       day: 'numeric',
       month: 'long',
       year: 'numeric',
-      weekday: 'long',
       hour: 'numeric',
       minute: 'numeric',
     },
@@ -162,7 +160,6 @@ const dateTimeFormats = {
       day: 'numeric',
       month: 'long',
       year: 'numeric',
-      weekday: 'long',
       hour: 'numeric',
       minute: 'numeric',
     },
@@ -194,7 +191,6 @@ const dateTimeFormats = {
       day: 'numeric',
       month: 'long',
       year: 'numeric',
-      weekday: 'long',
       hour: 'numeric',
       minute: 'numeric',
     },
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index fe617169f..826608db7 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -11,8 +11,6 @@ import '@/assets/scss/gradido.scss'
 import FlatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
-import VueMoment from 'vue-moment'
-
 import Loading from 'vue-loading-overlay'
 import 'vue-loading-overlay/dist/vue-loading.css'
 
@@ -26,7 +24,6 @@ export default {
     Vue.use(GlobalDirectives)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
-    Vue.use(VueMoment)
     Vue.use(PortalVue)
     Vue.use(FlatPickr)
     Vue.use(Loading)
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 196f38fcd..9e844370f 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -10,8 +10,6 @@ import { messages } from 'vee-validate/dist/locale/en.json'
 import RegeneratorRuntime from 'regenerator-runtime'
 import VueTimers from 'vue-timers'
 
-import VueMoment from 'vue-moment'
-
 // import clickOutside from '@/directives/click-ouside.js'
 import { focus } from 'vue-focus'
 
@@ -47,7 +45,6 @@ global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)
 global.localVue.use(RegeneratorRuntime)
-global.localVue.use(VueMoment)
 global.localVue.use(VueTimers)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4abfbddf4..9e8fdd81d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5557,6 +5557,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -10324,11 +10329,6 @@ mock-apollo-client@^1.2.1:
   resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.1.tgz#e3bfdc3ff73b1fea28fa7e91ec82e43ba8cbfa39"
   integrity sha512-QYQ6Hxo+t7hard1bcHHbsHxlNQYTQsaMNsm2Psh/NbwLMi2R4tGzplJKt97MUWuARHMq3GHB4PTLj/gxej4Caw==
 
-moment@^2.19.2:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 moo-color@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
@@ -14386,13 +14386,6 @@ vue-loading-overlay@^3.4.2:
   resolved "https://registry.yarnpkg.com/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz#34792a83218df1d35dff50121ce9fac2114f1c38"
   integrity sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==
 
-vue-moment@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
-  integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
-  dependencies:
-    moment "^2.19.2"
-
 vue-router@^3.0.6:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"