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

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -74,9 +74,10 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen
-    @conversation.agent_last_seen_at = DateTime.now.utc
+    # rubocop:disable Rails/SkipsModelValidations
-    @conversation.assignee_last_seen_at = DateTime.now.utc if assignee?
+    @conversation.update_column(:agent_last_seen_at, DateTime.now.utc)
-    @conversation.save!
+    @conversation.update_column(:assignee_last_seen_at, DateTime.now.utc) if assignee?
+    # rubocop:enable Rails/SkipsModelValidations
   end
 
   def custom_attributes

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 => {
+    bus.$on('newToastMessage', this.onNewToastMessage);
-      this.snackMessages.push({ key: new Date().getTime(), message });
+  },
-      window.setTimeout(() => {
+  beforeDestroy() {
-        this.snackMessages.splice(0, 1);
+    bus.$off('newToastMessage', this.onNewToastMessage);
-      }, this.duration);
+  },
-    });
+  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', () => {
+    bus.$on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
-      this.$nextTick(() => this.scrollToBottom());
+    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
-      this.makeMessagesRead();
-    });
-
-    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, selectedTweetId => {
-      this.selectedTweetId = selectedTweetId;
-    });
   },
 
   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 ||

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -11,6 +11,7 @@
 <script>
 import Sidebar from '../../components/layout/Sidebar';
 import CommandBar from './commands/commandbar.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
@@ -50,11 +51,10 @@ export default {
     this.$store.dispatch('setCurrentAccountId', this.$route.params.accountId);
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
-    bus.$on('sidemenu_icon_click', () => {
+    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-      this.isSidebarOpen = !this.isSidebarOpen;
-    });
   },
   beforeDestroy() {
+    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
@@ -65,6 +65,9 @@ export default {
         this.isOnDesktop = false;
       }
     },
+    toggleSidebar() {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -23,6 +23,7 @@ import ChatList from '../../../components/ChatList';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
 import PopOverSearch from './search/PopOverSearch';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
@@ -108,7 +109,7 @@ export default {
           return;
         }
         this.$store.dispatch('setActiveChat', chat).then(() => {
-          bus.$emit('scrollToMessage');
+          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
         });
       } else {
         this.$store.dispatch('clearSelectedState');

app/javascript/shared/constants/busEvents.js

@@ -3,4 +3,6 @@ export const BUS_EVENTS = {
   SHOW_ALERT: 'SHOW_ALERT',
   START_NEW_CONVERSATION: 'START_NEW_CONVERSATION',
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
+  SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
+  TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
 };