feat: Update notifications and unread count in real time (#4261)

app/javascript/dashboard/helper/actionCable.js

@@ -22,6 +22,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'contact.deleted': this.onContactDelete,
       'contact.updated': this.onContactUpdate,
       'conversation.mentioned': this.onConversationMentioned,
+      'notification.created': this.onNotificationCreated,
     };
   }
 
@@ -134,6 +135,10 @@ class ActionCableConnector extends BaseActionCableConnector {
   onContactUpdate = data => {
     this.app.$store.dispatch('contacts/updateContact', data);
   };
+
+  onNotificationCreated = data => {
+    this.app.$store.dispatch('notifications/addNotification', data);
+  };
 }
 
 export default {

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

@@ -52,4 +52,8 @@ export const actions = {
       throw new Error(error);
     }
   },
+
+  addNotification({ commit }, data) {
+    commit(types.ADD_NOTIFICATION, data);
+  },
 };

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

@@ -45,4 +45,14 @@ export const mutations = {
       Vue.set($state.records[item.id], 'read_at', true);
     });
   },
+
+  [types.ADD_NOTIFICATION]($state, data) {
+    const { notification, unread_count: unreadCount, count } = data;
+    Vue.set($state.records, notification.id, {
+      ...($state.records[notification.id] || {}),
+      ...notification,
+    });
+    Vue.set($state.meta, 'unreadCount', unreadCount);
+    Vue.set($state.meta, 'count', count);
+  },
 };

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

@@ -90,4 +90,12 @@ describe('#actions', () => {
       await expect(actions.readAll({ commit })).rejects.toThrow(Error);
     });
   });
+  describe('#addNotification', () => {
+    it('sends correct actions if API is success', async () => {
+      await actions.addNotification({ commit }, { data: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.ADD_NOTIFICATION, { data: 1 }],
+      ]);
+    });
+  });
 });

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

@@ -93,4 +93,29 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#ADD_NOTIFICATION', () => {
+    it('add 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: 3, primary_actor_id: 3 },
+        unread_count: 5,
+        count: 232,
+      };
+      mutations[types.ADD_NOTIFICATION](state, data);
+      expect(state.records).toEqual({
+        1: { id: 1, primary_actor_id: 1 },
+        2: { id: 2, primary_actor_id: 2 },
+        3: { id: 3, primary_actor_id: 3 },
+      });
+      expect(state.meta.unreadCount).toEqual(5);
+      expect(state.meta.count).toEqual(232);
+    });
+  });
 });

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

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