Bugfix: Update conversation counters in realtime (#944)

* Bug: Update conversation counters in realtime

app/javascript/dashboard/api/inbox/conversation.js

@@ -43,6 +43,16 @@ class ConversationApi extends ApiClient {
   mute(conversationId) {
     return axios.post(`${this.url}/${conversationId}/mute`);
   }
+
+  meta({ inboxId, status, assigneeType }) {
+    return axios.get(`${this.url}/meta`, {
+      params: {
+        inbox_id: inboxId,
+        status,
+        assignee_type: assigneeType,
+      },
+    });
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -0,0 +1,19 @@
+import conversationAPI from '../../inbox/conversation';
+import ApiClient from '../../ApiClient';
+
+describe('#ConversationAPI', () => {
+  it('creates correct instance', () => {
+    expect(conversationAPI).toBeInstanceOf(ApiClient);
+    expect(conversationAPI).toHaveProperty('get');
+    expect(conversationAPI).toHaveProperty('show');
+    expect(conversationAPI).toHaveProperty('create');
+    expect(conversationAPI).toHaveProperty('update');
+    expect(conversationAPI).toHaveProperty('delete');
+    expect(conversationAPI).toHaveProperty('toggleStatus');
+    expect(conversationAPI).toHaveProperty('assignAgent');
+    expect(conversationAPI).toHaveProperty('markMessageRead');
+    expect(conversationAPI).toHaveProperty('toggleTyping');
+    expect(conversationAPI).toHaveProperty('mute');
+    expect(conversationAPI).toHaveProperty('meta');
+  });
+});

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -1,7 +1,7 @@
 import inboxes from '../inboxes';
 import ApiClient from '../ApiClient';
 
-describe('#AgentAPI', () => {
+describe('#InboxesAPI', () => {
   it('creates correct instance', () => {
     expect(inboxes).toBeInstanceOf(ApiClient);
     expect(inboxes).toHaveProperty('get');

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -66,6 +66,8 @@
 }
 
 .button.resolve--button {
+  @include flex-align($x: center, $y: middle);
+
   width: 13.2rem;
 
   >.icon {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -26,6 +26,7 @@
 
     .link {
       color: $color-white;
+      text-decoration: underline;
     }
   }
 

app/javascript/dashboard/components/ChatList.vue

@@ -55,6 +55,7 @@
 <script>
 /* eslint-env browser */
 /* eslint no-console: 0 */
+/* global bus */
 import { mapGetters } from 'vuex';
 
 import ChatFilter from './widgets/conversation/ChatFilter';
@@ -109,6 +110,14 @@ export default {
         this.activeAssigneeTab
       );
     },
+    conversationFilters() {
+      return {
+        inboxId: this.conversationInbox ? this.conversationInbox : undefined,
+        assigneeType: this.activeAssigneeTab,
+        status: this.activeStatus,
+        page: this.currentPage + 1,
+      };
+    },
   },
   watch: {
     conversationInbox() {
@@ -119,6 +128,10 @@ export default {
     this.$store.dispatch('setChatFilter', this.activeStatus);
     this.resetAndFetchData();
     this.$store.dispatch('agents/get');
+
+    bus.$on('fetch_conversation_stats', () => {
+      this.$store.dispatch('getConversationStats', this.conversationFilters);
+    });
   },
   methods: {
     resetAndFetchData() {
@@ -127,12 +140,7 @@ export default {
       this.fetchConversations();
     },
     fetchConversations() {
-      this.$store.dispatch('fetchAllConversations', {
+      this.$store.dispatch('fetchAllConversations', this.conversationFilters);
-        inboxId: this.conversationInbox ? this.conversationInbox : undefined,
-        assigneeType: this.activeAssigneeTab,
-        status: this.activeStatus,
-        page: this.currentPage + 1,
-      });
     },
     updateAssigneeTab(selectedTab) {
       if (this.activeAssigneeTab !== selectedTab) {

app/javascript/dashboard/helper/actionCable.js

@@ -1,5 +1,6 @@
 import AuthAPI from '../api/auth';
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
+/* global bus */
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -45,10 +46,12 @@ class ActionCableConnector extends BaseActionCableConnector {
     if (id) {
       this.app.$store.dispatch('updateAssignee', { id, assignee });
     }
+    this.fetchConversationStats();
   };
 
   onConversationCreated = data => {
     this.app.$store.dispatch('addConversation', data);
+    this.fetchConversationStats();
   };
 
   onLogout = () => AuthAPI.logout();
@@ -61,6 +64,7 @@ class ActionCableConnector extends BaseActionCableConnector {
 
   onStatusChange = data => {
     this.app.$store.dispatch('updateConversation', data);
+    this.fetchConversationStats();
   };
 
   onTypingOn = ({ conversation, user }) => {
@@ -100,6 +104,10 @@ class ActionCableConnector extends BaseActionCableConnector {
       this.onTypingOff({ conversation, user });
     }, 30000);
   };
+
+  fetchConversationStats = () => {
+    bus.$emit('fetch_conversation_stats');
+  };
 }
 
 export default {

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

@@ -236,6 +236,15 @@ const actions = {
       //
     }
   },
+
+  getConversationStats: async ({ commit }, params) => {
+    try {
+      const response = await ConversationApi.meta(params);
+      commit(types.default.SET_CONV_TAB_META, response.data.meta);
+    } catch (error) {
+      // Ignore error
+    }
+  },
 };
 
 export default actions;

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

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import actions from '../actions';
+import * as types from '../../../mutation-types';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#getConversationStats', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: { meta: { mine_count: 1 } } });
+      await actions.getConversationStats(
+        { commit },
+        { inboxId: 1, assigneeTpe: 'me', status: 'open' }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONV_TAB_META, { mine_count: 1 }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.getConversationStats(
+        { commit },
+        { inboxId: 1, assigneeTpe: 'me', status: 'open' }
+      );
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
+});

app/views/api/v1/accounts/conversations/meta.json.jbuilder

@@ -1,7 +1,5 @@
-json.data do
+json.meta do
-  json.meta do
+  json.mine_count @conversations_count[:mine_count]
-    json.mine_count @conversations_count[:mine_count]
+  json.unassigned_count @conversations_count[:unassigned_count]
-    json.unassigned_count @conversations_count[:unassigned_count]
+  json.all_count @conversations_count[:all_count]
-    json.all_count @conversations_count[:all_count]
-  end
 end

spec/controllers/api/v1/accounts/conversations_controller_spec.rb

@@ -54,7 +54,7 @@ RSpec.describe 'Conversations API', type: :request do
             as: :json
 
         expect(response).to have_http_status(:success)
-        expect(JSON.parse(response.body, symbolize_names: true)[:data][:meta][:all_count]).to eq(1)
+        expect(JSON.parse(response.body, symbolize_names: true)[:meta][:all_count]).to eq(1)
       end
     end
   end