feat: Handle notification.deleted action cable event (#8501)

app/javascript/dashboard/helper/actionCable.js

@@ -23,6 +23,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'contact.updated': this.onContactUpdate,
       'conversation.mentioned': this.onConversationMentioned,
       'notification.created': this.onNotificationCreated,
+      'notification.deleted': this.onNotificationDeleted,
       'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
@@ -195,6 +196,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/addNotification', data);
   };
 
+  onNotificationDeleted = data => {
+    this.app.$store.dispatch('notifications/deleteNotification', data);
+  };
+
   // eslint-disable-next-line class-methods-use-this
   onFirstReplyCreated = () => {
     bus.$emit('fetch_overview_reports');

app/javascript/dashboard/store/modules/notifications/actions.js

@@ -56,4 +56,7 @@ export const actions = {
   addNotification({ commit }, data) {
     commit(types.ADD_NOTIFICATION, data);
   },
+  deleteNotification({ commit }, data) {
+    commit(types.DELETE_NOTIFICATION, data);
+  },
 };

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -55,4 +55,10 @@ export const mutations = {
     Vue.set($state.meta, 'unreadCount', unreadCount);
     Vue.set($state.meta, 'count', count);
   },
+  [types.DELETE_NOTIFICATION]($state, data) {
+    const { notification, unread_count: unreadCount, count } = data;
+    Vue.delete($state.records, notification.id);
+    Vue.set($state.meta, 'unreadCount', unreadCount);
+    Vue.set($state.meta, 'count', count);
+  },
 };

app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js

@@ -98,4 +98,13 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#deleteNotification', () => {
+    it('sends correct actions', async () => {
+      await actions.deleteNotification({ commit }, { data: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.DELETE_NOTIFICATION, { data: 1 }],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js

@@ -118,4 +118,27 @@ describe('#mutations', () => {
       expect(state.meta.count).toEqual(232);
     });
   });
+
+  describe('#DELETE_NOTIFICATION', () => {
+    it('delete notification', () => {
+      const state = {
+        meta: { unreadCount: 4, count: 231 },
+        records: {
+          1: { id: 1, primary_actor_id: 1 },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      const data = {
+        notification: { id: 1, primary_actor_id: 1 },
+        unread_count: 5,
+        count: 232,
+      };
+      mutations[types.DELETE_NOTIFICATION](state, data);
+      expect(state.records).toEqual({
+        2: { id: 2, primary_actor_id: 2 },
+      });
+      expect(state.meta.unreadCount).toEqual(5);
+      expect(state.meta.count).toEqual(232);
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -133,6 +133,7 @@ export default {
   SET_NOTIFICATIONS_UI_FLAG: 'SET_NOTIFICATIONS_UI_FLAG',
   UPDATE_NOTIFICATION: 'UPDATE_NOTIFICATION',
   ADD_NOTIFICATION: 'ADD_NOTIFICATION',
+  DELETE_NOTIFICATION: 'DELETE_NOTIFICATION',
   UPDATE_ALL_NOTIFICATIONS: 'UPDATE_ALL_NOTIFICATIONS',
   SET_NOTIFICATIONS_ITEM: 'SET_NOTIFICATIONS_ITEM',
   SET_NOTIFICATIONS: 'SET_NOTIFICATIONS',