feat: Adds the ability to update conversation timeframe automatically (#5253)

* feat: Adds the ability to update conversation timeframe automatically

* Update app/javascript/dashboard/components/ui/TimeAgo.vue

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -0,0 +1,88 @@
+<template>
+  <span class="time-ago">
+    <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',
+  mixins: [timeMixin],
+  props: {
+    isAutoRefreshEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    timestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      timeAgo: '',
+      timer: null,
+    };
+  },
+  computed: {
+    refreshTime() {
+      const timeDiff = differenceInMilliseconds(
+        new Date(),
+        new Date(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);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.time-ago {
+  color: var(--b-600);
+  font-size: var(--font-size-micro);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--space-normal);
+  margin-left: auto;
+}
+</style>

app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js

@@ -0,0 +1,30 @@
+import TimeAgo from 'dashboard/components/ui/TimeAgo';
+
+export default {
+  title: 'Components/TimeAgo',
+  component: TimeAgo,
+  argTypes: {
+    isAutoRefreshEnabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    timestamp: {
+      control: {
+        type: 'text, date, number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { TimeAgo },
+  template: '<time-ago v-bind="$props"></time-ago>',
+});
+
+export const TimeAgoView = Template.bind({});
+TimeAgoView.args = {
+  timestamp: 1549843200,
+  isAutoRefreshEnabled: false,
+};

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -87,7 +87,7 @@
       </p>
       <div class="conversation--meta">
         <span class="timestamp">
-          {{ dynamicTime(chat.timestamp) }}
+          <time-ago :timestamp="chat.timestamp" />
         </span>
         <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
       </div>
@@ -123,6 +123,7 @@ import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
+import timeAgo from 'dashboard/components/ui/TimeAgo';
 
 const ATTACHMENT_ICONS = {
   image: 'image',
@@ -138,6 +139,7 @@ export default {
     InboxName,
     Thumbnail,
     ConversationContextMenu,
+    timeAgo,
   },
 
   mixins: [