Add message loading

Author: AchoArnold

web/layouts/default.vue

@@ -50,12 +50,6 @@ export default class DefaultLayout extends Vue {
       channel.bind('phone.updated', () => {
         this.canPoll = true
       })
-      channel.bind('message.phone.sent', () => {
-        this.canPoll = true
-      })
-      channel.bind('message.send.failed', () => {
-        this.canPoll = true
-      })
 
       this.startPoller()
     }, 10_000) // delay so that the auth user is present
@@ -79,21 +73,12 @@ export default class DefaultLayout extends Vue {
       if (this.$store.getters.getAuthUser && this.$store.getters.getOwner) {
         setAuthHeader((await this.$fire.auth.currentUser?.getIdToken()) ?? '')
         promises.push(
+          promises.push(this.$store.dispatch('loadPhones', true)),
           this.$store.dispatch('loadThreads'),
           this.$store.dispatch('getHeartbeat'),
         )
       }
-      promises.push(this.$store.dispatch('loadPhones', true))
-
       this.canPoll = false
-      if (this.$store.getters.hasThread) {
-        promises.push(
-          this.$store.dispatch(
-            'loadThreadMessages',
-            this.$store.getters.getThread.id,
-          ),
-        )
-      }
       await Promise.all(promises)
 
       setTimeout(() => {

web/pages/threads/_id/index.vue

@@ -343,6 +343,7 @@ import {
   mdiSim,
   mdiContentCopy,
 } from '@mdi/js'
+import Pusher, { Channel } from 'pusher-js'
 import { Message } from '~/models/message'
 import { NotificationRequest, SendMessageRequest, SIM } from '~/store'
 
@@ -382,6 +383,7 @@ export default Vue.extend({
       formMessage: '',
       formMessageRules,
       submitting: false,
+      webhookChannel: null as Channel | null,
       selectedMenuItem: -1,
     }
   },
@@ -410,6 +412,27 @@ export default Vue.extend({
 
   async mounted() {
     await this.loadData()
+
+    const pusher = new Pusher(this.$config.pusherKey, {
+      cluster: this.$config.pusherCluster,
+    })
+    this.webhookChannel = pusher.subscribe(this.$store.getters.getAuthUser.id)
+    this.webhookChannel.bind('message.phone.sent', () => {
+      if (!this.loadingMessages) {
+        this.loadMessages(false)
+      }
+    })
+    this.webhookChannel.bind('message.send.failed', () => {
+      if (!this.loadingMessages) {
+        this.loadMessages(false)
+      }
+    })
+  },
+
+  beforeDestroy() {
+    if (this.webhookChannel) {
+      this.webhookChannel.unsubscribe()
+    }
   },
 
   methods: {