diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue index 978c43965..958e1b9da 100644 --- a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue +++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue @@ -30,7 +30,7 @@ -
+
No Chat {{ $t('CONVERSATION.404') }}
diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js index 937d25afd..357d895c0 100644 --- a/app/javascript/dashboard/store/modules/conversations/actions.js +++ b/app/javascript/dashboard/store/modules/conversations/actions.js @@ -84,35 +84,21 @@ const actions = { } }, - setActiveChat(store, data) { - const { commit } = store; - const localDispatch = store.dispatch; - let donePromise = null; - - commit(types.default.CURRENT_CHAT_WINDOW, data); + async setActiveChat({ commit, dispatch }, data) { + commit(types.default.SET_CURRENT_CHAT_WINDOW, data); commit(types.default.CLEAR_ALL_MESSAGES_LOADED); if (data.dataFetched === undefined) { - donePromise = new Promise(resolve => { - localDispatch('fetchPreviousMessages', { + try { + await dispatch('fetchPreviousMessages', { conversationId: data.id, before: data.messages[0].id, - }) - .then(() => { - Vue.set(data, 'dataFetched', true); - resolve(); - }) - .catch(() => { - // Handle error - }); - }); - } else { - donePromise = new Promise(resolve => { - commit(types.default.SET_CHAT_META, { id: data.id }); - resolve(); - }); + }); + Vue.set(data, 'dataFetched', true); + } catch (error) { + // Ignore error + } } - return donePromise; }, assignAgent: async ({ commit }, { conversationId, agentId }) => { diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js index cfea74813..c1a42c3e4 100644 --- a/app/javascript/dashboard/store/modules/conversations/getters.js +++ b/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; diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js index ef978383b..a7ac8b8e2 100644 --- a/app/javascript/dashboard/store/modules/conversations/index.js +++ b/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); - 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); + _state.selectedChatId = activeChat.id; } }, [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) { - _state.selectedChat.status = conversation.status; + if (_state.selectedChatId === conversation.id) { 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; }, diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js index a0437b337..1492ebdb6 100644 --- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js +++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js @@ -58,9 +58,7 @@ describe('#getters', () => { id: 2, }, ], - selectedChat: { - id: 1, - }, + selectedChatId: 1, }; expect(getters.getNextChatConversation(state)).toEqual({ id: 2, @@ -73,9 +71,7 @@ describe('#getters', () => { id: 1, }, ], - selectedChat: { - id: 1, - }, + selectedChatId: 1, }; expect(getters.getNextChatConversation(state)).toBeNull(); }); diff --git a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js new file mode 100644 index 000000000..ca7173746 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js index 1a39175fa..4c72137fb 100755 --- a/app/javascript/dashboard/store/mutation-types.js +++ b/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',