fix(chat): static timestamps, remove interval

Satellite-im · Jun 2, 2022 · 899ad88 · 899ad88
1 parent d81a482
commit 899ad88
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 43 deletions.
diff --git a/components/typography/HorizontalRuleText/HorizontalRuleText.vue b/components/typography/HorizontalRuleText/HorizontalRuleText.vue
@@ -5,7 +5,6 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import dayjs from 'dayjs'
 
 export default Vue.extend({
   props: {
@@ -22,7 +21,7 @@ export default Vue.extend({
     text() {
       return this.plaintext
         ? this.value
-        : dayjs(parseInt(this.value)).format('MMMM DD')
+        : this.$dayjs(parseInt(this.value)).format('MMMM DD')
     },
   },
 })

diff --git a/components/views/chat/group/Group.html b/components/views/chat/group/Group.html
@@ -15,7 +15,7 @@
   </div>
 </div>
 <div v-else class="group-same">
-  <TypographyText class="timestamp" :text="formattedTimestamp" />
+  <TypographyText class="timestamp" :text="timestamp" />
   <div class="group-messages">
     <Message :group="group" :message="group.message" :from="username" />
   </div>

diff --git a/components/views/chat/group/Group.vue b/components/views/chat/group/Group.vue
@@ -2,15 +2,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
-import { Config } from '~/config'
 import { Group } from '~/types/messaging'
 import {
   getUsernameFromState,
   getAddressFromState,
-  refreshTimestampInterval,
-  convertTimestampToDate,
 } from '~/utilities/Messaging'
 import { GroupMember } from '~/store/groups/types'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   props: {
@@ -19,21 +17,17 @@ export default Vue.extend({
       required: true,
     },
     groupId: {
-      type: String as PropType<string>,
+      type: String,
       required: true,
     },
   },
-  data() {
-    return {
-      timestampRefreshInterval: null,
-      timestamp: convertTimestampToDate(
-        this.$t('friends.details'),
-        this.group.at,
-      ),
-    }
-  },
   computed: {
-    ...mapState(['ui', 'friends', 'accounts', 'groups']),
+    ...mapState({
+      ui: (state) => (state as RootState).ui,
+      friends: (state) => (state as RootState).friends,
+      accounts: (state) => (state as RootState).accounts,
+      groups: (state) => (state as RootState).groups,
+    }),
     ...mapGetters('friends', ['findFriendByKey']),
     ...mapGetters('settings', ['getTimezone']),
     address(): string {
@@ -77,35 +71,18 @@ export default Vue.extend({
 
       return ''
     },
-    groupMember(): GroupMember | null {
+    groupMember(): GroupMember | undefined {
       return this.groups.all
-        .find((it: Group) => it.id === this.groupId)
+        .find((it) => it.id === this.groupId)
         ?.members?.find((it: GroupMember) => it.address === this.group.sender)
     },
-    formattedTimestamp(): string {
+    timestamp(): string {
       return this.$dayjs(this.group.at)
         .local()
         .tz(this.getTimezone)
         .format('LT')
     },
   },
-  created() {
-    const setTimestamp = (timePassed: number) => {
-      this.$data.timestamp = convertTimestampToDate(
-        this.$t('friends.details'),
-        timePassed,
-      )
-    }
-
-    this.$data.timestampRefreshInterval = refreshTimestampInterval(
-      this.group.at,
-      setTimestamp,
-      Config.chat.timestampUpdateInterval,
-    )
-  },
-  beforeDestroy() {
-    clearInterval(this.$data.timestampRefreshInterval)
-  },
   methods: {
     /**
      * @method showQuickProfile
@@ -117,7 +94,7 @@ export default Vue.extend({
     showQuickProfile(e: MouseEvent) {
       const openQuickProfile = () => {
         this.$store.dispatch('ui/showQuickProfile', {
-          textilePublicKey: this.$props.group.from,
+          textilePublicKey: this.group.from,
           position: { x: e.x, y: e.y },
         })
       }

diff --git a/components/views/chat/message/reply/Item/Item.vue b/components/views/chat/message/reply/Item/Item.vue
@@ -3,6 +3,7 @@
 import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
 import { UIMessage, Group } from '~/types/messaging'
+import { RootState } from '~/types/store/store'
 import {
   getUsernameFromState,
   convertTimestampToDate,
@@ -34,8 +35,13 @@ export default Vue.extend({
     },
   },
   computed: {
-    ...mapState(['ui', 'friends', 'accounts']),
+    ...mapState({
+      ui: (state) => (state as RootState).ui,
+      friends: (state) => (state as RootState).friends,
+      accounts: (state) => (state as RootState).accounts,
+    }),
     ...mapGetters('friends', ['findFriendByKey']),
+    ...mapGetters('settings', ['getTimezone']),
     address() {
       if (!this.reply.from) {
         return ''
@@ -49,10 +55,10 @@ export default Vue.extend({
       return getUsernameFromState(this.reply.from, this.$store.state)
     },
     timestamp() {
-      if (!this.reply.at) {
-        return ''
-      }
-      return convertTimestampToDate(this.$t('friends.details'), this.reply.at)
+      return this.$dayjs(this.reply.at)
+        .local()
+        .tz(this.getTimezone)
+        .format('LT')
     },
     src(): string {
       // To check if the sender is you we just compare the from field