From 68f0dde62ff4c0976f016b98ab7d17ff84672135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 10 Apr 2019 17:29:03 +0200
Subject: [PATCH] Refactored RelativeDateTime

Removed timeouts for the sake of simplicity
---
 .../components/RelativeDateTime/index.spec.js | 15 ++++--
 webapp/components/RelativeDateTime/index.vue  | 53 ++-----------------
 2 files changed, 16 insertions(+), 52 deletions(-)

diff --git a/webapp/components/RelativeDateTime/index.spec.js b/webapp/components/RelativeDateTime/index.spec.js
index 7952f14ec..89c0e40fb 100644
--- a/webapp/components/RelativeDateTime/index.spec.js
+++ b/webapp/components/RelativeDateTime/index.spec.js
@@ -1,15 +1,24 @@
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
 import RelativeDateTime from './index.vue'
 
+import Filters from '../../plugins/vue-filters.js'
+const localVue = createLocalVue()
+localVue.use(Filters)
+
 describe('RelativeDateTime', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(RelativeDateTime, {})
+    wrapper = shallowMount(RelativeDateTime, {
+      localVue,
+      propsData: {
+        dateTime: new Date()
+      }
+    })
   })
 
   it('renders', () => {
     console.log(wrapper.html())
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.is('span')).toBe(true)
   })
 })
diff --git a/webapp/components/RelativeDateTime/index.vue b/webapp/components/RelativeDateTime/index.vue
index 2c7d82dfe..b3d20a909 100644
--- a/webapp/components/RelativeDateTime/index.vue
+++ b/webapp/components/RelativeDateTime/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :title="absoluteTime">{{ relativeDateTime }}</span>
+  <span>{{ relativeDateTime }}</span>
 </template>
 
 <script>
@@ -11,54 +11,9 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      relativeDateTime: null,
-      interval: 15000,
-      timeout: null,
-      absoluteTime: null
-    }
-  },
-  watch: {
-    locale() {
-      this.calcRelativeDateTime()
-    },
-    dateTime(dateTime) {
-      this.calcRelativeDateTime()
-    }
-  },
-  created() {
-    this.calcRelativeDateTime()
-  },
-  mounted() {
-    this.calcRelativeDateTime()
-  },
-  destroyed() {
-    clearTimeout(this.timeout)
-  },
-  methods: {
-    calcRelativeDateTime() {
-      // Reset Timer
-      clearTimeout(this.timeout)
-
-      // Calculate Relative Date
-      this.relativeDateTime = this.$filters.relativeDateTime(this.dateTime)
-
-      // TODO It is unclear what exactly this does and how to archive it
-      /*if (
-        this.relativeDateTime ===
-        t
-          .add(this.interval, 'milliseconds')
-          .utc()
-          .fromNow()
-      ) {
-        this.interval += 15000
-      }*/
-
-      // Recalculate Timer
-      this.timeout = setTimeout(() => {
-        this.calcRelativeDateTime()
-      }, this.interval)
+  computed: {
+    relativeDateTime() {
+      return this.$filters.relativeDateTime(this.dateTime)
     }
   }
 }