Enhancement: Paginate conversation calls in tabs (#560)

* Use conversationPage module for pagination

* Load more conversations

* Reset list if conversation status is changed

* Add specs to conversationPage

* Reset filter when page is re-mounted

* Update text

* Update text

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

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import * as types from '../mutation-types';
+
+const state = {
+  currentPage: {
+    me: 0,
+    unassigned: 0,
+    all: 0,
+  },
+  hasEndReached: {
+    me: false,
+    unassigned: false,
+    all: false,
+  },
+};
+
+export const getters = {
+  getHasEndReached: $state => filter => {
+    return $state.hasEndReached[filter];
+  },
+  getCurrentPage: $state => filter => {
+    return $state.currentPage[filter];
+  },
+};
+
+export const actions = {
+  setCurrentPage({ commit }, { filter, page }) {
+    commit(types.default.SET_CURRENT_PAGE, { filter, page });
+  },
+  setEndReached({ commit }, { filter }) {
+    commit(types.default.SET_CONVERSATION_END_REACHED, { filter });
+  },
+  reset({ commit }) {
+    commit(types.default.CLEAR_CONVERSATION_PAGE);
+  },
+};
+
+export const mutations = {
+  [types.default.SET_CURRENT_PAGE]: ($state, { filter, page }) => {
+    Vue.set($state.currentPage, filter, page);
+  },
+  [types.default.SET_CONVERSATION_END_REACHED]: ($state, { filter }) => {
+    if (filter === 'all') {
+      Vue.set($state.hasEndReached, 'unassigned', true);
+      Vue.set($state.hasEndReached, 'me', true);
+    }
+    Vue.set($state.hasEndReached, filter, true);
+  },
+  [types.default.CLEAR_CONVERSATION_PAGE]: $state => {
+    $state.currentPage = {
+      me: 0,
+      unassigned: 0,
+      all: 0,
+    };
+
+    $state.hasEndReached = {
+      me: false,
+      unassigned: false,
+      all: false,
+    };
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -7,7 +7,7 @@ import FBChannel from '../../../api/channel/fbChannel';
 
 // actions
 const actions = {
-  fetchAllConversations: async ({ commit }, params) => {
+  fetchAllConversations: async ({ commit, dispatch }, params) => {
     commit(types.default.SET_LIST_LOADING_STATUS);
     try {
       const response = await ConversationApi.get(params);
@@ -16,6 +16,21 @@ const actions = {
       commit(types.default.SET_ALL_CONVERSATION, chatList);
       commit(types.default.SET_CONV_TAB_META, metaData);
       commit(types.default.CLEAR_LIST_LOADING_STATUS);
+      dispatch(
+        'conversationPage/setCurrentPage',
+        {
+          filter: params.assigneeType,
+          page: params.page,
+        },
+        { root: true }
+      );
+      if (!chatList.length) {
+        dispatch(
+          'conversationPage/setEndReached',
+          { filter: params.assigneeType },
+          { root: true }
+        );
+      }
     } catch (error) {
       // Handle error
     }

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

@@ -2,9 +2,9 @@
 /* eslint no-param-reassign: 0 */
 import Vue from 'vue';
 import * as types from '../../mutation-types';
-import wootConstants from '../../../constants';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
+import wootConstants from '../../../constants';
 
 const state = {
   allConversations: [],
@@ -22,7 +22,7 @@ const state = {
     dataFetched: false,
   },
   listLoadingStatus: true,
-  chatStatusFilter: wootConstants.ASSIGNEE_TYPE_SLUG.OPEN,
+  chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
   currentInbox: null,
 };
 

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

@@ -0,0 +1,33 @@
+import { actions } from '../../conversationPage';
+import * as types from '../../../mutation-types';
+
+const commit = jest.fn();
+
+describe('#actions', () => {
+  describe('#setCurrentPage', () => {
+    it('sends correct actions', () => {
+      actions.setCurrentPage({ commit }, { filter: 'me', page: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CURRENT_PAGE, { filter: 'me', page: 1 }],
+      ]);
+    });
+  });
+
+  describe('#setEndReached', () => {
+    it('sends correct actions', () => {
+      actions.setEndReached({ commit }, { filter: 'me' });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONVERSATION_END_REACHED, { filter: 'me' }],
+      ]);
+    });
+  });
+
+  describe('#reset', () => {
+    it('sends correct actions', () => {
+      actions.reset({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.CLEAR_CONVERSATION_PAGE],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,29 @@
+import { getters } from '../../conversationPage';
+
+describe('#getters', () => {
+  it('getCurrentPage', () => {
+    const state = {
+      currentPage: {
+        me: 1,
+        unassigned: 2,
+        all: 3,
+      },
+    };
+    expect(getters.getCurrentPage(state)('me')).toEqual(1);
+    expect(getters.getCurrentPage(state)('unassigned')).toEqual(2);
+    expect(getters.getCurrentPage(state)('all')).toEqual(3);
+  });
+
+  it('getCurrentPage', () => {
+    const state = {
+      hasEndReached: {
+        me: false,
+        unassigned: true,
+        all: false,
+      },
+    };
+    expect(getters.getHasEndReached(state)('me')).toEqual(false);
+    expect(getters.getHasEndReached(state)('unassigned')).toEqual(true);
+    expect(getters.getHasEndReached(state)('all')).toEqual(false);
+  });
+});

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

@@ -0,0 +1,61 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../conversationPage';
+
+describe('#mutations', () => {
+  describe('#SET_CURRENT_PAGE', () => {
+    it('set current page correctly', () => {
+      const state = { currentPage: { me: 1 } };
+      mutations[types.default.SET_CURRENT_PAGE](state, {
+        filter: 'me',
+        page: 2,
+      });
+      expect(state.currentPage).toEqual({
+        me: 2,
+      });
+    });
+  });
+
+  describe('#CLEAR_CONVERSATION_PAGE', () => {
+    it('resets the state to initial state', () => {
+      const state = {
+        currentPage: { me: 1, unassigned: 2, all: 3 },
+        hasEndReached: { me: true, unassigned: true, all: true },
+      };
+      mutations[types.default.CLEAR_CONVERSATION_PAGE](state);
+      expect(state).toEqual({
+        currentPage: { me: 0, unassigned: 0, all: 0 },
+        hasEndReached: { me: false, unassigned: false, all: false },
+      });
+    });
+  });
+
+  describe('#SET_CONVERSATION_END_REACHED', () => {
+    it('set conversation end reached correctly', () => {
+      const state = {
+        hasEndReached: { me: false, unassigned: false, all: false },
+      };
+      mutations[types.default.SET_CONVERSATION_END_REACHED](state, {
+        filter: 'me',
+      });
+      expect(state.hasEndReached).toEqual({
+        me: true,
+        unassigned: false,
+        all: false,
+      });
+    });
+
+    it('set all state to true if all end has reached', () => {
+      const state = {
+        hasEndReached: { me: false, unassigned: false, all: false },
+      };
+      mutations[types.default.SET_CONVERSATION_END_REACHED](state, {
+        filter: 'all',
+      });
+      expect(state.hasEndReached).toEqual({
+        me: true,
+        unassigned: true,
+        all: true,
+      });
+    });
+  });
+});