Chore: Contact Sidebar, conversation cleanup (#908)

- Update sidebar design
- Move every contact data to contacts module
- Revert go to next conversation feature
- Fix issues with new conversation in action cable
- Escape HTML content
- Broadcast event when conversation.contact changes.

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/store/modules/contacts.js

@@ -1,10 +1,10 @@
 /* eslint no-param-reassign: 0 */
-import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
+import Vue from 'vue';
 
 const state = {
-  records: [],
+  records: {},
   uiFlags: {
     isFetching: false,
     isFetchingItem: false,
@@ -14,16 +14,14 @@ const state = {
 
 export const getters = {
   getContacts($state) {
-    return $state.records;
+    return Object.values($state.records);
   },
   getUIFlags($state) {
     return $state.uiFlags;
   },
   getContact: $state => id => {
-    const [contact = {}] = $state.records.filter(
-      record => record.id === Number(id)
-    );
-    return contact;
+    const contact = $state.records[id];
+    return contact || {};
   },
 };
 
@@ -71,9 +69,19 @@ export const mutations = {
     };
   },
 
-  [types.default.SET_CONTACTS]: MutationHelpers.set,
-  [types.default.SET_CONTACT_ITEM]: MutationHelpers.setSingleRecord,
-  [types.default.EDIT_CONTACT]: MutationHelpers.update,
+  [types.default.SET_CONTACTS]: ($state, data) => {
+    data.forEach(contact => {
+      Vue.set($state.records, contact.id, contact);
+    });
+  },
+
+  [types.default.SET_CONTACT_ITEM]: ($state, data) => {
+    Vue.set($state.records, data.id, data);
+  },
+
+  [types.default.EDIT_CONTACT]: ($state, data) => {
+    Vue.set($state.records, data.id, data);
+  },
 };
 
 export default {

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

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import * as types from '../../mutation-types';
-
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
 import FBChannel from '../../../api/channel/fbChannel';
@@ -11,6 +10,10 @@ const actions = {
     try {
       const response = await ConversationApi.show(conversationId);
       commit(types.default.ADD_CONVERSATION, response.data);
+      commit(
+        `contacts/${types.default.SET_CONTACT_ITEM}`,
+        response.data.meta.sender
+      );
     } catch (error) {
       // Ignore error
     }
@@ -25,6 +28,10 @@ const actions = {
       commit(types.default.SET_ALL_CONVERSATION, chatList);
       commit(types.default.SET_CONV_TAB_META, metaData);
       commit(types.default.CLEAR_LIST_LOADING_STATUS);
+      commit(
+        `contacts/${types.default.SET_CONTACTS}`,
+        chatList.map(chat => chat.meta.sender)
+      );
       dispatch(
         'conversationPage/setCurrentPage',
         {
@@ -120,19 +127,13 @@ const actions = {
     }
   },
 
-  toggleStatus: async ({ commit, dispatch, getters }, data) => {
+  toggleStatus: async ({ commit }, data) => {
     try {
-      const nextChat = getters.getNextChatConversation;
       const response = await ConversationApi.toggleStatus(data);
       commit(
         types.default.RESOLVE_CONVERSATION,
         response.data.payload.current_status
       );
-      if (nextChat) {
-        dispatch('setActiveChat', nextChat);
-      } else {
-        dispatch('clearSelectedState');
-      }
     } catch (error) {
       // Handle error
     }
@@ -159,6 +160,10 @@ const actions = {
     const { currentInbox } = state;
     if (!currentInbox || Number(currentInbox) === conversation.inbox_id) {
       commit(types.default.ADD_CONVERSATION, conversation);
+      commit(
+        `contacts/${types.default.SET_CONTACT_ITEM}`,
+        conversation.meta.sender
+      );
     }
   },
 
@@ -203,6 +208,13 @@ const actions = {
     commit(types.default.UPDATE_ASSIGNEE, data);
   },
 
+  updateConversationContact({ commit }, data) {
+    if (data.id) {
+      commit(`contacts/${types.default.SET_CONTACT_ITEM}`, data);
+    }
+    commit(types.default.UPDATE_CONVERSATION_CONTACT, data);
+  },
+
   setActiveInbox({ commit }, inboxId) {
     commit(types.default.SET_ACTIVE_INBOX, inboxId);
   },

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

@@ -8,9 +8,10 @@ export const getSelectedChatConversation = ({
 
 // getters
 const getters = {
-  getAllConversations: ({ allConversations }) => allConversations.sort(
-    (a, b) => b.messages.last().created_at - a.messages.last().created_at
-  ),
+  getAllConversations: ({ allConversations }) =>
+    allConversations.sort(
+      (a, b) => b.messages.last()?.created_at - a.messages.last()?.created_at
+    ),
   getSelectedChat: ({ selectedChat }) => selectedChat,
   getMineChats(_state) {
     const currentUserID = authAPI.getCurrentUser().id;
@@ -52,12 +53,12 @@ const getters = {
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
   getConvTabStats: ({ convTabStats }) => convTabStats,
-  getNextChatConversation: (_state) => {
+  getNextChatConversation: _state => {
     const { selectedChat } = _state;
     const conversations = getters.getAllStatusChats(_state);
     if (conversations.length <= 1) {
       return null;
-    };
+    }
     const currentIndex = conversations.findIndex(
       conversation => conversation.id === selectedChat.id
     );

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

@@ -203,6 +203,16 @@ const mutations = {
     chat.meta.assignee = payload.assignee;
   },
 
+  [types.default.UPDATE_CONVERSATION_CONTACT](
+    _state,
+    { conversationId, ...payload }
+  ) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    if (chat) {
+      Vue.set(chat.meta, 'sender', payload);
+    }
+  },
+
   [types.default.SET_ACTIVE_INBOX](_state, inboxId) {
     _state.currentInbox = inboxId;
   },

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

@@ -4,14 +4,14 @@ import contactList from './fixtures';
 describe('#getters', () => {
   it('getContacts', () => {
     const state = {
-      records: contactList,
+      records: { 1: contactList[0] },
     };
-    expect(getters.getContacts(state)).toEqual(contactList);
+    expect(getters.getContacts(state)).toEqual([contactList[0]]);
   });
 
   it('getContact', () => {
     const state = {
-      records: contactList,
+      records: { 2: contactList[1] },
     };
     expect(getters.getContact(state)(2)).toEqual(contactList[1]);
   });

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

@@ -4,50 +4,54 @@ import { mutations } from '../../contacts';
 describe('#mutations', () => {
   describe('#SET_CONTACTS', () => {
     it('set contact records', () => {
-      const state = { records: [] };
+      const state = { records: {} };
       mutations[types.default.SET_CONTACTS](state, [
         { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
       ]);
-      expect(state.records).toEqual([
-        {
+      expect(state.records).toEqual({
+        1: {
           id: 1,
           name: 'contact1',
           email: 'contact1@chatwoot.com',
         },
-      ]);
+      });
     });
   });
 
   describe('#SET_CONTACT_ITEM', () => {
     it('push contact data to the store', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.SET_CONTACT_ITEM](state, {
         id: 2,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
-        { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        2: { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 
   describe('#EDIT_CONTACT', () => {
     it('update contact', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.EDIT_CONTACT](state, {
         id: 1,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 });

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

@@ -9,10 +9,16 @@ jest.mock('axios');
 describe('#actions', () => {
   describe('#getConversation', () => {
     it('sends correct actions if API is success', async () => {
-      axios.get.mockResolvedValue({ data: { id: 1, meta: {} } });
+      axios.get.mockResolvedValue({
+        data: { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+      });
       await actions.getConversation({ commit }, 1);
       expect(commit.mock.calls).toEqual([
-        [types.default.ADD_CONVERSATION, { id: 1, meta: {} }],
+        [
+          types.default.ADD_CONVERSATION,
+          { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+        ],
+        ['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],
       ]);
     });
     it('sends correct actions if API is error', async () => {