fix: Use bus.$off to remove listeners on destroy (#3478)

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -3,10 +3,12 @@
 </template>
 
 <script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
 export default {
   methods: {
     onMenuItemClick() {
-      bus.$emit('sidemenu_icon_click');
+      bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);
     },
   },
 };

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -29,12 +29,16 @@ export default {
   },
 
   mounted() {
-    bus.$on('newToastMessage', message => {
-      this.snackMessages.push({ key: new Date().getTime(), message });
-      window.setTimeout(() => {
-        this.snackMessages.splice(0, 1);
-      }, this.duration);
-    });
+    bus.$on('newToastMessage', this.onNewToastMessage);
+  },
+  beforeDestroy() {
+    bus.$off('newToastMessage', this.onNewToastMessage);
+  },
+  onNewToastMessage(message) {
+    this.snackMessages.push({ key: new Date().getTime(), message });
+    window.setTimeout(() => {
+      this.snackMessages.splice(0, 1);
+    }, this.duration);
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -243,25 +243,31 @@ export default {
   },
 
   created() {
-    bus.$on('scrollToMessage', () => {
-      this.$nextTick(() => this.scrollToBottom());
-      this.makeMessagesRead();
-    });
-
-    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, selectedTweetId => {
-      this.selectedTweetId = selectedTweetId;
-    });
+    bus.$on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
   },
 
   mounted() {
     this.addScrollListener();
   },
 
-  unmounted() {
+  beforeDestroy() {
+    this.removeBusListeners();
     this.removeScrollListener();
   },
 
   methods: {
+    removeBusListeners() {
+      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+      bus.$off(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
+    },
+    setSelectedTweet(tweetId) {
+      this.selectedTweetId = tweetId;
+    },
+    onScrollToMessage() {
+      this.$nextTick(() => this.scrollToBottom());
+      this.makeMessagesRead();
+    },
     showPopoutReplyBox() {
       this.isPopoutReplyBox = !this.isPopoutReplyBox;
     },

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -93,6 +93,7 @@ import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/cons
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import {
   isEscape,
@@ -368,7 +369,7 @@ export default {
         this.clearMessage();
         try {
           await this.$store.dispatch('sendMessage', messagePayload);
-          this.$emit('scrollToMessage');
+          this.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
         } catch (error) {
           const errorMessage =
             error?.response?.data?.error ||