Fix leak of components due to EventBus event handlers

Several EventBus event handlers were registered in the components, but
never unregistered. Due to this even when the components were destroyed
the handlers were still active, so the references to the components
prevented them to be garbage collected.

Moreover, as the handlers were still active they were still called when
their associated event was triggered, which could cause for example an
infinite loop of requests to get new messages (as the store was
disconnected and thus the MessagesList component never got an updated
last known message ID, so it requested again and again new messages).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 10 insertions, 8 deletions

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
index 95fd92bfa..02edc5a37 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
@@ -70,20 +70,22 @@ export default {
 			this.fetchConversations()
 		}, 30000)
 
-		EventBus.$on('routeChange', ({ from, to }) => {
+		EventBus.$on('routeChange', this.onRouteChange)
+		EventBus.$on('shouldRefreshConversations', this.fetchConversations)
+	},
+	beforeDestroy() {
+		EventBus.$off('routeChange', this.onRouteChange)
+		EventBus.$off('shouldRefreshConversations', this.fetchConversations)
+	},
+	methods: {
+		onRouteChange({ from, to }) {
 			if (from.name === 'conversation') {
 				leaveConversation(from.params.token)
 			}
 			if (to.name === 'conversation') {
 				joinConversation(to.params.token)
 			}
-		})
-
-		EventBus.$on('shouldRefreshConversations', () => {
-			this.fetchConversations()
-		})
-	},
-	methods: {
+		},
 		sortConversations(conversation1, conversation2) {
 			if (conversation1.isFavorite !== conversation2.isFavorite) {
 				return conversation1.isFavorite ? -1 : 1