fix: Remove duplicate message in slow networks (#1332)

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

@@ -129,7 +129,7 @@ const actions = {
   sendMessage: async ({ commit }, data) => {
     try {
       const response = await MessageApi.create(data);
-      commit(types.default.SEND_MESSAGE, response.data);
+      commit(types.default.ADD_MESSAGE, response.data);
     } catch (error) {
       // Handle error
     }
@@ -209,7 +209,7 @@ const actions = {
   sendAttachment: async ({ commit }, data) => {
     try {
       const response = await MessageApi.sendAttachment(data);
-      commit(types.default.SEND_MESSAGE, response.data);
+      commit(types.default.ADD_MESSAGE, response.data);
     } catch (error) {
       // Handle error
     }

app/javascript/dashboard/store/modules/conversations/index.js

@@ -78,19 +78,12 @@ export const mutations = {
     chat.muted = false;
   },
 
-  [types.default.SEND_MESSAGE](_state, currentMessage) {
+  [types.default.ADD_MESSAGE]({ allConversations, selectedChatId }, message) {
-    const [chat] = getSelectedChatConversation(_state);
+    const { conversation_id: conversationId } = message;
-    const allMessagesExceptCurrent = (chat.messages || []).filter(
+    const [chat] = getSelectedChatConversation({
-      message => message.id !== currentMessage.id
+      allConversations,
-    );
+      selectedChatId: conversationId,
-    allMessagesExceptCurrent.push(currentMessage);
+    });
-    chat.messages = allMessagesExceptCurrent;
-  },
-
-  [types.default.ADD_MESSAGE](_state, message) {
-    const [chat] = _state.allConversations.filter(
-      c => c.id === message.conversation_id
-    );
     if (!chat) return;
     const previousMessageIndex = chat.messages.findIndex(
       m => m.id === message.id
@@ -98,7 +91,7 @@ export const mutations = {
     if (previousMessageIndex === -1) {
       chat.messages.push(message);
       chat.timestamp = message.created_at;
-      if (_state.selectedChatId === message.conversation_id) {
+      if (selectedChatId === conversationId) {
         window.bus.$emit('scrollToMessage');
       }
     } else {

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

@@ -61,4 +61,103 @@ describe('#mutations', () => {
       expect(state.allConversations[0].can_reply).toEqual(true);
     });
   });
+
+  describe('#ADD_MESSAGE', () => {
+    it('does not add message to the store if conversation does not exist', () => {
+      const state = { allConversations: [] };
+      mutations[types.ADD_MESSAGE](state, { conversationId: 1 });
+      expect(state.allConversations).toEqual([]);
+    });
+
+    it('add message to the conversation if it does not exist in the store', () => {
+      global.bus = { $emit: jest.fn() };
+      const state = {
+        allConversations: [{ id: 1, messages: [] }],
+        selectedChatId: -1,
+      };
+      mutations[types.ADD_MESSAGE](state, {
+        conversation_id: 1,
+        content: 'Test message',
+        created_at: 1602256198,
+      });
+      expect(state.allConversations).toEqual([
+        {
+          id: 1,
+          messages: [
+            {
+              conversation_id: 1,
+              content: 'Test message',
+              created_at: 1602256198,
+            },
+          ],
+          timestamp: 1602256198,
+        },
+      ]);
+      expect(global.bus.$emit).not.toHaveBeenCalled();
+    });
+
+    it('add message to the conversation and emit scrollToMessage if it does not exist in the store', () => {
+      global.bus = { $emit: jest.fn() };
+      const state = {
+        allConversations: [{ id: 1, messages: [] }],
+        selectedChatId: 1,
+      };
+      mutations[types.ADD_MESSAGE](state, {
+        conversation_id: 1,
+        content: 'Test message',
+        created_at: 1602256198,
+      });
+      expect(state.allConversations).toEqual([
+        {
+          id: 1,
+          messages: [
+            {
+              conversation_id: 1,
+              content: 'Test message',
+              created_at: 1602256198,
+            },
+          ],
+          timestamp: 1602256198,
+        },
+      ]);
+      expect(global.bus.$emit).toHaveBeenCalledWith('scrollToMessage');
+    });
+
+    it('update message if it exist in the store', () => {
+      global.bus = { $emit: jest.fn() };
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+            messages: [
+              {
+                conversation_id: 1,
+                content: 'Test message',
+                created_at: 1602256198,
+              },
+            ],
+          },
+        ],
+        selectedChatId: 1,
+      };
+      mutations[types.ADD_MESSAGE](state, {
+        conversation_id: 1,
+        content: 'Test message 1',
+        created_at: 1602256198,
+      });
+      expect(state.allConversations).toEqual([
+        {
+          id: 1,
+          messages: [
+            {
+              conversation_id: 1,
+              content: 'Test message 1',
+              created_at: 1602256198,
+            },
+          ],
+        },
+      ]);
+      expect(global.bus.$emit).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -26,7 +26,6 @@ export default {
   UPDATE_CONVERSATION: 'UPDATE_CONVERSATION',
   MUTE_CONVERSATION: 'MUTE_CONVERSATION',
   UNMUTE_CONVERSATION: 'UNMUTE_CONVERSATION',
-  SEND_MESSAGE: 'SEND_MESSAGE',
   ASSIGN_AGENT: 'ASSIGN_AGENT',
   SET_CHAT_META: 'SET_CHAT_META',
   ADD_MESSAGE: 'ADD_MESSAGE',