fix(message): update timestamp message every minute

components/tailored/messaging/group/Group.html

@@ -7,10 +7,16 @@
       <span v-on:click="showQuickProfile">
         <UiUsername :username="username" :badge="badge" />
       </span>
-      <TypographyText :text="$dayjs(group.at).from()" />
+      <TypographyText :text="timestamp" />
     </div>
     <div class="group-messages">
-      <TailoredMessagingMessage v-for="message in group.messages" :group="group" :message="message" :from="username" :key="message.id" />
+      <TailoredMessagingMessage
+        v-for="message in group.messages"
+        :group="group"
+        :message="message"
+        :from="username"
+        :key="message.id"
+      />
     </div>
   </div>
-</div>
+</div>

components/tailored/messaging/group/Group.vue

@@ -2,11 +2,14 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
+import { Config } from '~/config'
+
 import { Group } from '~/types/messaging'
 import { User } from '~/types/ui/user'
 import {
   getUsernameFromState,
   getAddressFromState,
+  refreshTimestampInterval,
 } from '~/utilities/Messaging'
 
 export default Vue.extend({
@@ -16,6 +19,12 @@ export default Vue.extend({
       // default: () => {},
     },
   },
+  data() {
+    return {
+      timestampRefreshInterval: null,
+      timestamp: this.$dayjs(this.group.at).from(),
+    }
+  },
   computed: {
     address() {
       return getAddressFromState(this.group.from, this.$store.state)
@@ -41,6 +50,20 @@ export default Vue.extend({
       this.$store.commit('ui/quickProfile', true)
     },
   },
+  created() {
+    const setTimestamp = (timePassed: string) => {
+      this.$data.timestamp = timePassed
+    }
+
+    this.$data.timestampRefreshInterval = refreshTimestampInterval(
+      this.group.at,
+      setTimestamp,
+      Config.chat.timestampUpdateInterval
+    )
+  },
+  beforeDestroy() {
+    clearInterval(this.$data.refreshTimestampEveryMinute)
+  },
 })
 </script>
 <style scoped lang="less" src="./Group.less"></style>

components/tailored/messaging/message/Message.html

@@ -1,35 +1,74 @@
 <div class="is-message" @contextmenu="contextMenu">
-  <div @mouseenter="mouseOver" @mouseleave="mouseOver"
-    :class="`message-container ${messageHover ? 'message-hover' : '' } ${message.pinned ? 'pinned-message' : ''}`">
-
+  <div
+    @mouseenter="mouseOver"
+    @mouseleave="mouseOver"
+    :class="`message-container ${messageHover ? 'message-hover' : '' } ${message.pinned ? 'pinned-message' : ''}`"
+  >
     <div v-if="message.pinned" class="pinned-badge">
       <archive-icon size="0.85x" />
       Archived
     </div>
     <div v-if="hideActions" class="inline-meta">
       <div class="sat-icon-container satellite-icon-helper">
-        <UiCircle type="random" :seed="$mock.users.filter(u => u.name === from)[0].address" :size="23" />
+        <UiCircle
+          type="random"
+          :seed="$mock.users.filter(u => u.name === from)[0].address"
+          :size="23"
+        />
       </div>
-      <UiUsername :username="from" :badge="$mock.users.filter(u => u.name === from)[0].badge" />
-      <TypographyText :text="$dayjs(message.at).from()" />
+      <UiUsername
+        :username="from"
+        :badge="$mock.users.filter(u => u.name === from)[0].badge"
+      />
+      <TypographyText :text="timestamp" />
     </div>
     <TailoredMessagingMessageActions
       v-if="messageHover && !hideActions"
       :setReplyChatbarContent="setReplyChatbarContent"
       :emojiReaction="emojiReaction"
       :editMessage="editMessage"
-      :messageOwner="this.$props.message.from" />
-    <VueMarkdown v-if="!messageEdit && message.type === 'text'" :source="message.payload" class="markdown" />
-    <UiImage v-else-if="message.type === 'image'" :source="message.payload.url" alt="" />
+      :messageOwner="this.$props.message.from"
+    />
+    <VueMarkdown
+      v-if="!messageEdit && message.type === 'text'"
+      :source="message.payload"
+      class="markdown"
+    />
+    <UiImage
+      v-else-if="message.type === 'image'"
+      :source="message.payload.url"
+      alt=""
+    />
     <!-- Only for video types we can't embed directly without doing something sketchy, like sending it to a server somewhere to extract the HTML5 video-->
-    <UiEmbedsEmbeddedLinkContent v-if="message.type === 'text'" :data="message.payload" />
-    <UiEmbedsVideoPlayer v-else-if="message.type === 'video'" :data="message.payload" />
-    <UiEmbedsAudioPlayer v-else-if="message.type === 'audio'" :data="message.payload" />
+    <UiEmbedsEmbeddedLinkContent
+      v-if="message.type === 'text'"
+      :data="message.payload"
+    />
+    <UiEmbedsVideoPlayer
+      v-else-if="message.type === 'video'"
+      :data="message.payload"
+    />
+    <UiEmbedsAudioPlayer
+      v-else-if="message.type === 'audio'"
+      :data="message.payload"
+    />
     <UiEmbedsFile v-else-if="message.type === 'file'" :data="message.payload" />
-    <TailoredMessagingMessageReactions v-if="!hideActions && hasReactions" :message="this.$props.message"
+    <TailoredMessagingMessageReactions
+      v-if="!hideActions && hasReactions"
+      :message="this.$props.message"
       :group="this.$props.group"
-      :key="`${this.$props.message.id}-${hasReactions ? this.$props.message.reactions.length : 0}`" />
+      :key="`${this.$props.message.id}-${hasReactions ? this.$props.message.reactions.length : 0}`"
+    />
   </div>
-  <TailoredMessagingMessageReply :message="message" :group="group" v-if="!hideActions" :from="from" />
-  <TailoredMessagingMessageEdit v-if="messageEdit" :message="message.payload" @commitMessage="saveMessage" />
+  <TailoredMessagingMessageReply
+    :message="message"
+    :group="group"
+    v-if="!hideActions"
+    :from="from"
+  />
+  <TailoredMessagingMessageEdit
+    v-if="messageEdit"
+    :message="message.payload"
+    @commitMessage="saveMessage"
+  />
 </div>

components/tailored/messaging/message/Message.vue

@@ -7,7 +7,10 @@ import { ArchiveIcon } from 'satellite-lucide-icons'
 
 import VueMarkdown from 'vue-markdown'
 import { ContextMenu } from '~/components/mixins/UI/ContextMenu'
+
+import { Config } from '~/config'
 import { UIMessage, Group } from '~/types/messaging'
+import { refreshTimestampInterval } from '~/utilities/Messaging'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -76,6 +79,8 @@ export default Vue.extend({
         { text: 'Save Image', func: (this as any).testFunc },
         { text: 'Copy Link', func: (this as any).testFunc },
       ],
+      timestampRefreshInterval: null,
+      timestamp: this.$dayjs(this.$props.message.at).from(),
     }
   },
   computed: {
@@ -180,6 +185,20 @@ export default Vue.extend({
       })
     },
   },
+  created() {
+    const setTimestamp = (timePassed: string) => {
+      this.$data.timestamp = timePassed
+    }
+
+    this.$data.timestampRefreshInterval = refreshTimestampInterval(
+      this.$props.message.at,
+      setTimestamp,
+      Config.chat.timestampUpdateInterval
+    )
+  },
+  beforeDestroy() {
+    clearInterval(this.$data.refreshTimestampEveryMinute)
+  },
 })
 </script>
 <style lang="less" src="./Message.less"></style>

config.ts

@@ -83,6 +83,7 @@ export const Config = {
   chat: {
     defaultMessageLimit: 50,
     defalutLoadMoreLimit: 20,
+    timestampUpdateInterval: 60 * 1000,
   },
   routingMiddleware: {
     prerequisitesCheckBypass: ['auth', 'setup'],

utilities/Messaging.ts

@@ -203,3 +203,15 @@ export function getAddressFromState(
 
   return address
 }
+
+export function refreshTimestampInterval(
+  timestamp: number,
+  action: (timePassed: string) => any,
+  interval: number
+) {
+  return setInterval(() => {
+    const updatedTimestamp = dayjs(timestamp).fromNow()
+
+    action(updatedTimestamp)
+  }, interval)
+}