From 2aa99ee1375470306ad396e1060689998ebbbdef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Thu, 27 Oct 2022 21:35:39 +0200
Subject: [PATCH] fix: Fix timestamp auto-update in conversations chat list
 (#5640)

* fix: Fix timestamp auto-update

* fix: rewrite `setInterval` to `setTimeout`

* fix: change refresh time logic

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../dashboard/components/ui/TimeAgo.vue       | 63 ++++++++-----------
 1 file changed, 25 insertions(+), 38 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index c262a8aa0..c796ed0f6 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -1,17 +1,15 @@
 <template>
   <span class="time-ago">
-    <span> {{ timeAgo }}</span>
+    <span>{{ timeAgo }}</span>
   </span>
 </template>
 
 <script>
-const ZERO = 0;
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
 
 import timeMixin from 'dashboard/mixins/time';
-import { differenceInMilliseconds } from 'date-fns';
 
 export default {
   name: 'TimeAgo',
@@ -28,51 +26,40 @@ export default {
   },
   data() {
     return {
-      timeAgo: '',
+      timeAgo: this.dynamicTime(this.timestamp),
       timer: null,
     };
   },
-  computed: {
+  watch: {
+    timestamp() {
+      this.timeAgo = this.dynamicTime(this.timestamp);
+    },
+  },
+  mounted() {
+    if (this.isAutoRefreshEnabled) {
+      this.createTimer();
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.timeAgo = this.dynamicTime(this.timestamp);
+        this.createTimer();
+      }, this.refreshTime());
+    },
     refreshTime() {
-      const timeDiff = differenceInMilliseconds(
-        new Date(),
-        new Date(this.timestamp * 1000)
-      );
+      const timeDiff = Date.now() - this.timestamp * 1000;
       if (timeDiff > DAY_IN_MILLI_SECONDS) {
         return DAY_IN_MILLI_SECONDS;
       }
       if (timeDiff > HOUR_IN_MILLI_SECONDS) {
         return HOUR_IN_MILLI_SECONDS;
       }
-      if (timeDiff > MINUTE_IN_MILLI_SECONDS) {
-        return MINUTE_IN_MILLI_SECONDS;
-      }
-      return ZERO;
-    },
-  },
-  mounted() {
-    this.timeAgo = this.dynamicTime(this.timestamp);
-    if (this.isAutoRefreshEnabled) {
-      this.createTimer();
-    }
-  },
-  beforeDestroy() {
-    this.clearTimer();
-  },
-  methods: {
-    createTimer() {
-      const refreshTime = this.refreshTime;
-      if (refreshTime > ZERO) {
-        this.timer = setTimeout(() => {
-          this.timeAgo = this.dynamicTime(this.timestamp);
-          this.createTimer();
-        }, refreshTime);
-      }
-    },
-    clearTimer() {
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
+
+      return MINUTE_IN_MILLI_SECONDS;
     },
   },
 };