From 1036358b285dffb333bf55c792d2d9c6cf009cf1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Sat, 28 Nov 2020 00:29:22 +0100
Subject: [PATCH] Use a $watch-based system to register subscribe handlers when
 the events component is not yet ready instead of relying on setTimeout hacks

---
 platypush/backend/http/webapp/src/Events.vue  |  2 ++
 .../webapp/src/components/VoiceAssistant.vue  |  2 +-
 .../backend/http/webapp/src/utils/Events.vue  | 27 ++++++++++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/platypush/backend/http/webapp/src/Events.vue b/platypush/backend/http/webapp/src/Events.vue
index aaddf83659..080ab90670 100644
--- a/platypush/backend/http/webapp/src/Events.vue
+++ b/platypush/backend/http/webapp/src/Events.vue
@@ -17,6 +17,7 @@ export default {
   data() {
     return {
       ws: null,
+      initialized: false,
       pending: false,
       opened: false,
       timeout: null,
@@ -125,6 +126,7 @@ export default {
       this.ws.onopen = this.onOpen
       this.ws.onerror = this.onError
       this.ws.onclose = this.onClose
+      this.initialized = true
     },
 
     subscribe(msg) {
diff --git a/platypush/backend/http/webapp/src/components/VoiceAssistant.vue b/platypush/backend/http/webapp/src/components/VoiceAssistant.vue
index ff07c2c586..c7ef813712 100644
--- a/platypush/backend/http/webapp/src/components/VoiceAssistant.vue
+++ b/platypush/backend/http/webapp/src/components/VoiceAssistant.vue
@@ -118,7 +118,7 @@ export default {
   },
 
   mounted() {
-    setTimeout(this.registerHandlers, 10000)
+    this.registerHandlers()
   },
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/utils/Events.vue b/platypush/backend/http/webapp/src/utils/Events.vue
index caaae33d01..3037605ee6 100644
--- a/platypush/backend/http/webapp/src/utils/Events.vue
+++ b/platypush/backend/http/webapp/src/utils/Events.vue
@@ -3,11 +3,32 @@ import { bus } from "@/bus";
 
 export default {
   name: "Events",
+  computed: {
+    _eventsReady() {
+      return this.$root.$refs.events?.initialized
+    },
+  },
+
   methods: {
     subscribe(handler, ...events) {
-      bus.emit('subscribe', {
-        events: events,
-        handler: handler,
+      const subFunc = () => {
+        bus.emit('subscribe', {
+          events: events,
+          handler: handler,
+        })
+      }
+
+      if (this._eventsReady) {
+        subFunc()
+        return
+      }
+
+      const self = this
+      const unwatch = this.$watch( () => self._eventsReady, (newVal) => {
+        if (newVal) {
+          subFunc()
+          unwatch()
+        }
       })
     },
   }