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/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;
   },