Chore: Remove selectedChat from store (#1087)

* Chore: Remove selected chat from store

app/javascript/dashboard/components/widgets/conversation/EmptyState.vue

@@ -30,7 +30,7 @@
         </span>
       </div>
       <!-- No conversation selected -->
-      <div v-else-if="allConversations.length && currentChat.id === null">
+      <div v-else-if="allConversations.length && !currentChat.id">
         <img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
         <span>{{ $t('CONVERSATION.404') }}</span>
       </div>

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

@@ -84,35 +84,21 @@ const actions = {
     }
   },
 
-  setActiveChat(store, data) {
+  async setActiveChat({ commit, dispatch }, data) {
-    const { commit } = store;
+    commit(types.default.SET_CURRENT_CHAT_WINDOW, data);
-    const localDispatch = store.dispatch;
-    let donePromise = null;
-
-    commit(types.default.CURRENT_CHAT_WINDOW, data);
     commit(types.default.CLEAR_ALL_MESSAGES_LOADED);
 
     if (data.dataFetched === undefined) {
-      donePromise = new Promise(resolve => {
+      try {
-        localDispatch('fetchPreviousMessages', {
+        await dispatch('fetchPreviousMessages', {
           conversationId: data.id,
           before: data.messages[0].id,
-        })
+        });
-          .then(() => {
+        Vue.set(data, 'dataFetched', true);
-            Vue.set(data, 'dataFetched', true);
+      } catch (error) {
-            resolve();
+        // Ignore error
-          })
+      }
-          .catch(() => {
-            // Handle error
-          });
-      });
-    } else {
-      donePromise = new Promise(resolve => {
-        commit(types.default.SET_CHAT_META, { id: data.id });
-        resolve();
-      });
     }
-    return donePromise;
   },
 
   assignAgent: async ({ commit }, { conversationId, agentId }) => {

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

@@ -2,9 +2,9 @@ import authAPI from '../../../api/auth';
 
 export const getSelectedChatConversation = ({
   allConversations,
-  selectedChat,
+  selectedChatId,
 }) =>
-  allConversations.filter(conversation => conversation.id === selectedChat.id);
+  allConversations.filter(conversation => conversation.id === selectedChatId);
 
 // getters
 const getters = {
@@ -12,7 +12,12 @@ const getters = {
     allConversations.sort(
       (a, b) => b.messages.last()?.created_at - a.messages.last()?.created_at
     ),
-  getSelectedChat: ({ selectedChat }) => selectedChat,
+  getSelectedChat: ({ selectedChatId, allConversations }) => {
+    const selectedChat = allConversations.find(
+      conversation => conversation.id === selectedChatId
+    );
+    return selectedChat || {};
+  },
   getMineChats(_state) {
     const currentUserID = authAPI.getCurrentUser().id;
     return _state.allConversations.filter(chat =>
@@ -53,7 +58,7 @@ const getters = {
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
   getNextChatConversation: _state => {
-    const { selectedChat } = _state;
+    const [selectedChat] = getSelectedChatConversation(_state);
     const conversations = getters.getAllStatusChats(_state);
     if (conversations.length <= 1) {
       return null;

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

@@ -6,28 +6,16 @@ import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
 import wootConstants from '../../../constants';
 
-const initialSelectedChat = {
-  id: null,
-  meta: {},
-  status: null,
-  muted: false,
-  seen: false,
-  inbox_id: null,
-  additional_attributes: {
-    type: '',
-  },
-  dataFetched: false,
-};
 const state = {
   allConversations: [],
-  selectedChat: { ...initialSelectedChat },
   listLoadingStatus: true,
   chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
   currentInbox: null,
+  selectedChatId: null,
 };
 
 // mutations
-const mutations = {
+export const mutations = {
   [types.default.SET_ALL_CONVERSATION](_state, conversationList) {
     const newAllConversations = [..._state.allConversations];
     conversationList.forEach(conversation => {
@@ -42,7 +30,7 @@ const mutations = {
   },
   [types.default.EMPTY_ALL_CONVERSATION](_state) {
     _state.allConversations = [];
-    _state.selectedChat = { ...initialSelectedChat };
+    _state.selectedChatId = null;
   },
   [types.default.SET_ALL_MESSAGES_LOADED](_state) {
     const [chat] = getSelectedChatConversation(_state);
@@ -54,7 +42,7 @@ const mutations = {
     Vue.set(chat, 'allMessagesLoaded', false);
   },
   [types.default.CLEAR_CURRENT_CHAT_WINDOW](_state) {
-    _state.selectedChat.id = null;
+    _state.selectedChatId = null;
   },
 
   [types.default.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
@@ -64,47 +52,25 @@ const mutations = {
     }
   },
 
-  [types.default.CURRENT_CHAT_WINDOW](_state, activeChat) {
+  [types.default.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
     if (activeChat) {
-      Object.assign(_state.selectedChat, activeChat);
+      _state.selectedChatId = activeChat.id;
-      Vue.set(_state.selectedChat.meta, 'assignee', activeChat.meta.assignee);
-      Vue.set(_state.selectedChat.meta, 'status', activeChat.meta.status);
-    }
-  },
-
-  [types.default.APPEND_MESSAGES](_state, { id, data }) {
-    if (data.length) {
-      const [chat] = _state.allConversations.filter(c => c.id === id);
-      chat.messages = data;
-      Vue.set(chat, 'dataFetched', true);
-    }
-  },
-
-  [types.default.SET_CHAT_META](_state, { id, data }) {
-    const [chat] = _state.allConversations.filter(c => c.id === id);
-    if (data !== undefined) {
-      Vue.set(chat, 'labels', data.labels);
     }
   },
 
   [types.default.ASSIGN_AGENT](_state, assignee) {
     const [chat] = getSelectedChatConversation(_state);
     chat.meta.assignee = assignee;
-    if (assignee === null) {
-      Object.assign(_state.selectedChat.meta.assignee, assignee);
-    }
   },
 
   [types.default.RESOLVE_CONVERSATION](_state, status) {
     const [chat] = getSelectedChatConversation(_state);
     chat.status = status;
-    _state.selectedChat.status = status;
   },
 
   [types.default.MUTE_CONVERSATION](_state) {
     const [chat] = getSelectedChatConversation(_state);
     chat.muted = true;
-    _state.selectedChat.muted = true;
   },
 
   [types.default.SEND_MESSAGE](_state, currentMessage) {
@@ -126,7 +92,7 @@ const mutations = {
     );
     if (previousMessageIndex === -1) {
       chat.messages.push(message);
-      if (_state.selectedChat.id === message.conversation_id) {
+      if (_state.selectedChatId === message.conversation_id) {
         window.bus.$emit('scrollToMessage');
       }
     } else {
@@ -150,8 +116,7 @@ const mutations = {
         ...conversationAttributes,
       };
       Vue.set(allConversations, currentConversationIndex, currentConversation);
-      if (_state.selectedChat.id === conversation.id) {
+      if (_state.selectedChatId === conversation.id) {
-        _state.selectedChat.status = conversation.status;
         window.bus.$emit('scrollToMessage');
       }
     } else {
@@ -159,10 +124,6 @@ const mutations = {
     }
   },
 
-  [types.default.MARK_SEEN](_state) {
-    _state.selectedChat.seen = true;
-  },
-
   [types.default.SET_LIST_LOADING_STATUS](_state) {
     _state.listLoadingStatus = true;
   },

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

@@ -58,9 +58,7 @@ describe('#getters', () => {
             id: 2,
           },
         ],
-        selectedChat: {
+        selectedChatId: 1,
-          id: 1,
-        },
       };
       expect(getters.getNextChatConversation(state)).toEqual({
         id: 2,
@@ -73,9 +71,7 @@ describe('#getters', () => {
             id: 1,
           },
         ],
-        selectedChat: {
+        selectedChatId: 1,
-          id: 1,
-        },
       };
       expect(getters.getNextChatConversation(state)).toBeNull();
     });

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

@@ -0,0 +1,46 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../conversations';
+
+describe('#mutations', () => {
+  describe('#EMPTY_ALL_CONVERSATION', () => {
+    it('empty conversations', () => {
+      const state = { allConversations: [{ id: 1 }], selectedChatId: 1 };
+      mutations[types.EMPTY_ALL_CONVERSATION](state);
+      expect(state.allConversations).toEqual([]);
+      expect(state.selectedChatId).toEqual(null);
+    });
+  });
+
+  describe('#MARK_MESSAGE_READ', () => {
+    it('mark conversation as read', () => {
+      const state = { allConversations: [{ id: 1 }] };
+      const lastSeen = new Date().getTime() / 1000;
+      mutations[types.MARK_MESSAGE_READ](state, { id: 1, lastSeen });
+      expect(state.allConversations).toEqual([
+        { id: 1, agent_last_seen_at: lastSeen },
+      ]);
+    });
+  });
+
+  describe('#CLEAR_CURRENT_CHAT_WINDOW', () => {
+    it('clears current chat window', () => {
+      const state = { selectedChatId: 1 };
+      mutations[types.CLEAR_CURRENT_CHAT_WINDOW](state);
+      expect(state.selectedChatId).toEqual(null);
+    });
+  });
+
+  describe('#SET_CURRENT_CHAT_WINDOW', () => {
+    it('set current chat window', () => {
+      const state = { selectedChatId: 1 };
+      mutations[types.SET_CURRENT_CHAT_WINDOW](state, { id: 2 });
+      expect(state.selectedChatId).toEqual(2);
+    });
+
+    it('does not set current chat window', () => {
+      const state = { selectedChatId: 1 };
+      mutations[types.SET_CURRENT_CHAT_WINDOW](state);
+      expect(state.selectedChatId).toEqual(1);
+    });
+  });
+});

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

@@ -18,9 +18,8 @@ export default {
   UPDATE_CONVERSATION_CONTACT: 'UPDATE_CONVERSATION_CONTACT',
 
   // Active chat
-  CURRENT_CHAT_WINDOW: 'CURRENT_CHAT_WINDOW',
+  SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',
-  APPEND_MESSAGES: 'APPEND_MESSAGES',
   CLEAR_ALL_MESSAGES: 'CLEAR_ALL_MESSAGES',
   RESOLVE_CONVERSATION: 'RESOLVE_CONVERSATION',
   ADD_CONVERSATION: 'ADD_CONVERSATION',
@@ -30,7 +29,6 @@ export default {
   ASSIGN_AGENT: 'ASSIGN_AGENT',
   SET_CHAT_META: 'SET_CHAT_META',
   ADD_MESSAGE: 'ADD_MESSAGE',
-  MARK_SEEN: 'MARK_SEEN',
   MARK_MESSAGE_READ: 'MARK_MESSAGE_READ',
   SET_PREVIOUS_CONVERSATIONS: 'SET_PREVIOUS_CONVERSATIONS',
   SET_ACTIVE_INBOX: 'SET_ACTIVE_INBOX',