fix composing new message and unmounting listeners

src/frontend/components/App.vue

@@ -256,6 +256,7 @@ import DialogUtils from "../js/DialogUtils";
 import WebSocketConnection from "../js/WebSocketConnection";
 import GlobalState from "../js/GlobalState";
 import Utils from "../js/Utils";
+import GlobalEmitter from "../js/GlobalEmitter";
 
 export default {
     name: 'App',
@@ -277,16 +278,15 @@ export default {
 
         };
     },
-    created() {
-        // listen for websocket messages
-        WebSocketConnection.on("message", this.onWebsocketMessage);
-    },
-    beforeDestroy() {
+    beforeUnmount() {
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
     },
     mounted() {
 
+        // listen for websocket messages
+        WebSocketConnection.on("message", this.onWebsocketMessage);
+
         this.getAppInfo();
 
         // update calls list
@@ -378,37 +378,11 @@ export default {
         },
         async startNewLXMFConversation() {
 
-            // ask for destination address
-            const destinationHash = await this.prompt("Enter LXMF Address");
-            if(!destinationHash){
-                return;
-            }
+            // go to messages route
+            await this.$router.push({ name: "messages" });
 
-            this.openLXMFConversation(destinationHash);
-
-        },
-        openLXMFConversation(destinationHash) {
-
-            // fixme: reimplement
-
-            // attempt to find existing peer so we can show their name
-            const existingPeer = this.peers[destinationHash];
-            if(existingPeer){
-                this.onPeerClick(existingPeer);
-                return;
-            }
-
-            // simple attempt to prevent garbage input
-            if(destinationHash.length !== 32){
-                DialogUtils.alert("Invalid Address");
-                return;
-            }
-
-            // we didn't find an existing peer, so just use an unknown name
-            this.onPeerClick({
-                name: "Unknown Peer",
-                destination_hash: destinationHash,
-            });
+            // emit global event handled by MessagesPage
+            GlobalEmitter.emit("compose-new-message");
 
         },
         parseSeconds: function(secondsToFormat) {
@@ -501,15 +475,6 @@ export default {
             }
 
         },
-        async prompt(message) {
-            if(window.electron){
-                // running inside electron, use ipc prompt
-                return await window.electron.prompt(message);
-            } else {
-                // running inside normal browser, use browser prompt
-                return window.prompt(message);
-            }
-        },
     },
     computed: {
         isElectron() {

src/frontend/components/messages/MessagesPage.vue

@@ -29,6 +29,8 @@ import MessagesSidebar from "./MessagesSidebar.vue";
 import ConversationViewer from "./ConversationViewer.vue";
 import Utils from "../../js/Utils";
 import GlobalState from "../../js/GlobalState";
+import DialogUtils from "../../js/DialogUtils";
+import GlobalEmitter from "../../js/GlobalEmitter";
 
 export default {
     name: 'MessagesPage',
@@ -48,16 +50,17 @@ export default {
 
         };
     },
-    created() {
-        // listen for websocket messages
-        WebSocketConnection.on("message", this.onWebsocketMessage);
-    },
-    beforeDestroy() {
+    beforeUnmount() {
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
+        GlobalEmitter.off("compose-new-message", this.onComposeNewMessage);
     },
     mounted() {
 
+        // listen for websocket messages
+        WebSocketConnection.on("message", this.onWebsocketMessage);
+        GlobalEmitter.on("compose-new-message", this.onComposeNewMessage);
+
         this.getConfig();
         this.getConversations();
         this.getLxmfDeliveryAnnounces();
@@ -69,6 +72,34 @@ export default {
 
     },
     methods: {
+        async onComposeNewMessage() {
+
+            // ask for destination address
+            const destinationHash = await DialogUtils.prompt("Enter LXMF Address");
+            if(!destinationHash){
+                return;
+            }
+
+            // attempt to find existing peer so we can show their name
+            const existingPeer = this.peers[destinationHash];
+            if(existingPeer){
+                this.onPeerClick(existingPeer);
+                return;
+            }
+
+            // simple attempt to prevent garbage input
+            if(destinationHash.length !== 32){
+                DialogUtils.alert("Invalid Address");
+                return;
+            }
+
+            // we didn't find an existing peer, so just use an unknown name
+            this.onPeerClick({
+                name: "Unknown Peer",
+                destination_hash: destinationHash,
+            });
+
+        },
         async getConfig() {
             try {
                 const response = await window.axios.get(`/api/v1/config`);

src/frontend/components/nomadnetwork/NomadNetworkPage.vue

@@ -141,16 +141,15 @@ export default {
 
         };
     },
-    created() {
-        // listen for websocket messages
-        WebSocketConnection.on("message", this.onWebsocketMessage);
-    },
-    beforeDestroy() {
+    beforeUnmount() {
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
     },
     mounted() {
 
+        // listen for websocket messages
+        WebSocketConnection.on("message", this.onWebsocketMessage);
+
         // fixme: this is called by the micron-parser.js
         window.onNodePageUrlClick = (url) => {
             this.onNodePageUrlClick(url);

src/frontend/js/DialogUtils.js

@@ -10,6 +10,16 @@ class DialogUtils {
         }
     }
 
+    static async prompt(message) {
+        if(window.electron){
+            // running inside electron, use ipc prompt
+            return await window.electron.prompt(message);
+        } else {
+            // running inside normal browser, use browser prompt
+            return window.prompt(message);
+        }
+    }
+
 }
 
 export default DialogUtils;

src/frontend/js/GlobalEmitter.js

@@ -0,0 +1,26 @@
+import mitt from 'mitt';
+
+class GlobalEmitter {
+
+    constructor() {
+        this.emitter = mitt();
+    }
+
+    // add event listener
+    on(event, handler) {
+        this.emitter.on(event, handler);
+    }
+
+    // remove event listener
+    off(event, handler) {
+        this.emitter.off(event, handler);
+    }
+
+    // emit event
+    emit(type, event) {
+        this.emitter.emit(type, event);
+    }
+
+}
+
+export default new GlobalEmitter();