feat: Add pending message on dashboard (#1547)

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

@@ -2,7 +2,11 @@ import Vue from 'vue';
 import * as types from '../../mutation-types';
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
-import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
+import {
+  createPendingMessage,
+  createPendingAttachment,
+} from 'dashboard/helper/commons';
 
 // actions
 const actions = {
@@ -128,8 +132,13 @@ const actions = {
 
   sendMessage: async ({ commit }, data) => {
     try {
-      const response = await MessageApi.create(data);
-      commit(types.default.ADD_MESSAGE, response.data);
+      const pendingMessage = createPendingMessage(data);
+      commit(types.default.ADD_MESSAGE, pendingMessage);
+      const response = await MessageApi.create(pendingMessage);
+      commit(types.default.ADD_MESSAGE, {
+        ...response.data,
+        status: MESSAGE_STATUS.SENT,
+      });
     } catch (error) {
       // Handle error
     }
@@ -208,7 +217,12 @@ const actions = {
 
   sendAttachment: async ({ commit }, data) => {
     try {
-      const response = await MessageApi.sendAttachment(data);
+      const pendingMessage = createPendingAttachment(data);
+      commit(types.default.ADD_MESSAGE, pendingMessage);
+      const response = await MessageApi.sendAttachment([
+        ...data,
+        pendingMessage.id,
+      ]);
       commit(types.default.ADD_MESSAGE, response.data);
     } catch (error) {
       // Handle error

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

@@ -0,0 +1,6 @@
+export const findPendingMessageIndex = (chat, message) => {
+  const { echo_id: tempMessageId } = message;
+  return chat.messages.findIndex(
+    m => m.id === message.id || m.id === tempMessageId
+  );
+};

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

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import * as types from '../../mutation-types';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
+import { findPendingMessageIndex } from './helpers';
 import wootConstants from '../../../constants';
 
 const state = {
@@ -85,17 +86,16 @@ export const mutations = {
       selectedChatId: conversationId,
     });
     if (!chat) return;
-    const previousMessageIndex = chat.messages.findIndex(
-      m => m.id === message.id
-    );
-    if (previousMessageIndex === -1) {
+
+    const pendingMessageIndex = findPendingMessageIndex(chat, message);
+    if (pendingMessageIndex !== -1) {
+      Vue.set(chat.messages, pendingMessageIndex, message);
+    } else {
       chat.messages.push(message);
       chat.timestamp = message.created_at;
       if (selectedChatId === conversationId) {
         window.bus.$emit('scrollToMessage');
       }
-    } else {
-      chat.messages[previousMessageIndex] = message;
     }
   },
 

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

@@ -0,0 +1,37 @@
+import { findPendingMessageIndex } from '../../conversations/helpers';
+
+describe('#findPendingMessageIndex', () => {
+  it('returns the correct index of pending message with id', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 1 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+  });
+
+  it('returns -1 if pending message with id is not present', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 2 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+  });
+});
+
+describe('#addOrUpdateChat', () => {
+  it('returns the correct index of pending message with id', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 1 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+  });
+
+  it('returns -1 if pending message with id is not present', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 2 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+  });
+});