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
2020-02-26 21:15:01 +05:30
parent e5bc372a29
commit 0740d4762f
28 changed files with 395 additions and 141 deletions
--- a/app/javascript/dashboard/api/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@@ -6,12 +6,13 @@ class ConversationApi extends ApiClient {
    super('conversations');
  }

-  get({ inboxId, status, assigneeType }) {
+  get({ inboxId, status, assigneeType, page }) {
    return axios.get(this.url, {
      params: {
        inbox_id: inboxId,
        status,
-        assignee_type_id: assigneeType,
+        assignee_type: assigneeType,
+        page,
      },
    });
  }
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -129,7 +129,6 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 }

@mixin scroll-on-hover() {
-  transition: all .4s $ease-in-out-cubic;
  overflow: hidden;

  &:hover {
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -82,6 +82,27 @@
  @include flex;
  flex-direction: column;

+  .load-more-conversations {
+    color: $color-woot;
+    cursor: pointer;
+    font-size: $font-size-small;
+    padding: $space-normal;
+
+    &:hover {
+      background: $color-background;
+    }
+  }
+
+  .end-of-list-text {
+    font-style: italic;
+    padding: $space-normal;
+  }
+
+  .conversations-list {
+    @include flex-weight(1);
+    @include scroll-on-hover;
+  }
+
  .chat-list__top {
    @include flex;
    @include padding($space-normal $zero $space-small $zero);
@@ -108,10 +129,7 @@
    }
  }

-  .conversations-list {
-    @include flex-weight(1);
-    @include scroll-on-hover;
-  }
+

  .content-box {
    text-align: center;
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -3,40 +3,52 @@
    <div class="chat-list__top">
      <h1 class="page-title">
        <woot-sidemenu-icon />
-        {{ inbox.name || pageTitle }}
+        {{ inbox.name || $t('CHAT_LIST.TAB_HEADING') }}
      </h1>
-      <chat-filter @statusFilterChange="getDataForStatusTab" />
+      <chat-filter @statusFilterChange="updateStatusType" />
    </div>

    <chat-type-tabs
      :items="assigneeTabItems"
-      :active-tab-index="activeAssigneeTab"
+      :active-tab="activeAssigneeTab"
      class="tab--chat-type"
-      @chatTabChange="getDataForTab"
+      @chatTabChange="updateAssigneeTab"
    />

-    <p
-      v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
-      class="content-box"
-    >
+    <p v-if="!chatListLoading && !getChatsForTab().length" class="content-box">
      {{ $t('CHAT_LIST.LIST.404') }}
    </p>

-    <div v-if="chatListLoading" class="text-center">
-      <span class="spinner message"></span>
-    </div>
-
-    <transition-group
-      name="conversations-list"
-      tag="div"
-      class="conversations-list"
-    >
+    <div class="conversations-list">
      <conversation-card
-        v-for="chat in getChatsForTab(activeStatus)"
+        v-for="chat in getChatsForTab()"
        :key="chat.id"
        :chat="chat"
      />
-    </transition-group>
+
+      <div v-if="chatListLoading" class="text-center">
+        <span class="spinner"></span>
+      </div>
+
+      <div
+        v-if="!hasCurrentPageEndReached && !chatListLoading"
+        class="text-center load-more-conversations"
+        @click="fetchConversations"
+      >
+        {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
+      </div>
+
+      <p
+        v-if="
+          getChatsForTab().length &&
+            hasCurrentPageEndReached &&
+            !chatListLoading
+        "
+        class="text-center text-muted end-of-list-text"
+      >
+        {{ $t('CHAT_LIST.EOF') }}
+      </p>
+    </div>
  </div>
 </template>

@@ -59,11 +71,11 @@ export default {
    ChatFilter,
  },
  mixins: [timeMixin, conversationMixin],
-  props: ['conversationInbox', 'pageTitle'],
+  props: ['conversationInbox'],
  data() {
    return {
-      activeAssigneeTab: 0,
-      activeStatus: 0,
+      activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
+      activeStatus: wootConstants.STATUS_TYPE.OPEN,
    };
  },
  computed: {
@@ -78,66 +90,69 @@ export default {
      convStats: 'getConvTabStats',
    }),
    assigneeTabItems() {
-      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map((item, index) => ({
-        id: index,
+      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => ({
+        key: item.KEY,
        name: item.NAME,
-        count: this.convStats[item.KEY] || 0,
+        count: this.convStats[item.COUNT_KEY] || 0,
      }));
    },
    inbox() {
      return this.$store.getters['inboxes/getInbox'](this.activeInbox);
    },
-    getToggleStatus() {
-      if (this.toggleType) {
-        return 'Open';
-      }
-      return 'Resolved';
+    currentPage() {
+      return this.$store.getters['conversationPage/getCurrentPage'](
+        this.activeAssigneeTab
+      );
+    },
+    hasCurrentPageEndReached() {
+      return this.$store.getters['conversationPage/getHasEndReached'](
+        this.activeAssigneeTab
+      );
+    },
+  },
+  watch: {
+    conversationInbox() {
+      this.resetAndFetchData();
    },
  },
  mounted() {
-    this.$watch('$store.state.route', () => {
-      if (this.$store.state.route.name !== 'inbox_conversation') {
-        this.$store.dispatch('emptyAllConversations');
-        this.fetchData();
-      }
-    });
-
-    this.$store.dispatch('emptyAllConversations');
-    this.fetchData();
+    this.$store.dispatch('setChatFilter', this.activeStatus);
+    this.resetAndFetchData();
    this.$store.dispatch('agents/get');
  },
  methods: {
-    fetchData() {
-      if (this.chatLists.length === 0) {
-        this.fetchConversations();
-      }
+    resetAndFetchData() {
+      this.$store.dispatch('conversationPage/reset');
+      this.$store.dispatch('emptyAllConversations');
+      this.fetchConversations();
    },
    fetchConversations() {
      this.$store.dispatch('fetchAllConversations', {
        inboxId: this.conversationInbox ? this.conversationInbox : undefined,
        assigneeType: this.activeAssigneeTab,
-        status: this.activeStatus ? 'resolved' : 'open',
+        status: this.activeStatus,
+        page: this.currentPage + 1,
      });
    },
-    getDataForTab(index) {
-      if (this.activeAssigneeTab !== index) {
-        this.activeAssigneeTab = index;
-        this.fetchConversations();
+    updateAssigneeTab(selectedTab) {
+      if (this.activeAssigneeTab !== selectedTab) {
+        this.activeAssigneeTab = selectedTab;
+        if (!this.currentPage) {
+          this.fetchConversations();
+        }
      }
    },
-    getDataForStatusTab(index) {
+    updateStatusType(index) {
      if (this.activeStatus !== index) {
        this.activeStatus = index;
-        this.fetchConversations();
+        this.resetAndFetchData();
      }
    },
    getChatsForTab() {
      let copyList = [];
-      if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.MINE) {
+      if (this.activeAssigneeTab === 'me') {
        copyList = this.mineChatsList.slice();
-      } else if (
-        this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.UNASSIGNED
-      ) {
+      } else if (this.activeAssigneeTab === 'unassigned') {
        copyList = this.unAssignedChatsList.slice();
      } else {
        copyList = this.allChatList.slice();
--- a/app/javascript/dashboard/components/buttons/ResolveButton.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveButton.vue
@@ -16,8 +16,12 @@
 /* global bus */
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
+import wootConstants from '../../constants';

 export default {
+  components: {
+    Spinner,
+  },
  props: ['conversationId'],
  data() {
    return {
@@ -29,19 +33,23 @@ export default {
      currentChat: 'getSelectedChat',
    }),
    currentStatus() {
-      const ButtonName = this.currentChat.status === 0 ? 'Resolve' : 'Reopen';
+      const ButtonName =
+        this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+          ? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
+          : this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
      return ButtonName;
    },
    buttonClass() {
-      return this.currentChat.status === 0 ? 'success' : 'warning';
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+        ? 'success'
+        : 'warning';
    },
    buttonIconClass() {
-      return this.currentChat.status === 0 ? 'ion-checkmark' : 'ion-refresh';
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+        ? 'ion-checkmark'
+        : 'ion-refresh';
    },
  },
-  components: {
-    Spinner,
-  },
  methods: {
    toggleStatus() {
      this.isLoading = true;
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,15 +1,15 @@
 <template>
-  <woot-tabs :index="tabsIndex" @change="onTabChange">
+  <woot-tabs :index="activeTabIndex" @change="onTabChange">
    <woot-tabs-item
      v-for="item in items"
-      :key="item.name"
+      :key="item.key"
      :name="item.name"
      :count="item.count"
    />
  </woot-tabs>
 </template>
 <script>
-/* eslint no-console: 0 */
+import wootConstants from '../../constants';

 export default {
  props: {
@@ -17,24 +17,25 @@ export default {
      type: Array,
      default: () => [],
    },
-    activeTabIndex: {
-      type: Number,
-      default: 0,
+    activeTab: {
+      type: String,
+      default: wootConstants.ASSIGNEE_TYPE.ME,
    },
  },
  data() {
    return {
-      tabsIndex: 0,
+      tabsIndex: wootConstants.ASSIGNEE_TYPE.ME,
    };
  },
-  created() {
-    this.tabsIndex = this.activeTabIndex;
+  computed: {
+    activeTabIndex() {
+      return this.items.findIndex(item => item.key === this.activeTab);
+    },
  },
  methods: {
    onTabChange(selectedTabIndex) {
-      if (selectedTabIndex !== this.tabsIndex) {
-        this.$emit('chatTabChange', selectedTabIndex);
-        this.tabsIndex = selectedTabIndex;
+      if (this.items[selectedTabIndex].key !== this.activeTab) {
+        this.$emit('chatTabChange', this.items[selectedTabIndex].key);
      }
    },
  },
--- a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <select v-model="activeIndex" class="status--filter" @change="onTabChange()">
+  <select v-model="activeStatus" class="status--filter" @change="onTabChange()">
    <option
      v-for="item in $t('CHAT_LIST.CHAT_STATUS_ITEMS')"
      :key="item['VALUE']"
@@ -11,15 +11,16 @@
 </template>

 <script>
+import wootConstants from '../../../constants';
+
 export default {
  data: () => ({
-    activeIndex: 0,
+    activeStatus: wootConstants.STATUS_TYPE.OPEN,
  }),
-  mounted() {},
  methods: {
    onTabChange() {
-      this.$store.dispatch('setChatFilter', this.activeIndex);
-      this.$emit('statusFilterChange', this.activeIndex);
+      this.$store.dispatch('setChatFilter', this.activeStatus);
+      this.$emit('statusFilterChange', this.activeStatus);
    },
  },
 };
--- a/app/javascript/dashboard/constants.js
+++ b/app/javascript/dashboard/constants.js
@@ -4,9 +4,13 @@ export default {
    return `${this.APP_BASE_URL}/`;
  },
  GRAVATAR_URL: 'https://www.gravatar.com/avatar/',
-  ASSIGNEE_TYPE_SLUG: {
-    MINE: 0,
-    UNASSIGNED: 1,
-    OPEN: 0,
+  ASSIGNEE_TYPE: {
+    ME: 'me',
+    UNASSIGNED: 'unassigned',
+    ALL: 'all',
+  },
+  STATUS_TYPE: {
+    OPEN: 'open',
+    RESOLVED: 'resolved',
  },
 };
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -1,6 +1,8 @@
 {
  "CHAT_LIST": {
    "LOADING": "Fetching conversations",
+    "LOAD_MORE_CONVERSATIONS": "Load more conversations...",
+    "EOF": "You have reached the end of the list",
    "LIST": {
      "404": "There are no active conversations in this group."
    },
@@ -14,20 +16,14 @@
    ],

    "ASSIGNEE_TYPE_TABS": [
-      { "NAME": "Mine", "KEY": "mineCount"},
-      { "NAME": "Unassigned", "KEY": "unAssignedCount"},
-      { "NAME": "All", "KEY": "allCount"}
+      { "NAME": "Mine", "KEY": "me", "COUNT_KEY": "mineCount" },
+      { "NAME": "Unassigned", "KEY": "unassigned", "COUNT_KEY": "unAssignedCount"},
+      { "NAME": "All", "KEY": "all", "COUNT_KEY": "allCount" }
    ],

-    "ASSIGNEE_TYPE_SLUG": {
-      "MINE": 0,
-      "UNASSIGNED": 1,
-      "ALL": 2
-    },
-
    "CHAT_STATUS_ITEMS": [
-      { "TEXT": "Open", "VALUE": 0 },
-      { "TEXT": "Resolved", "VALUE": 1 }
+      { "TEXT": "Open", "VALUE": "open" },
+      { "TEXT": "Resolved", "VALUE": "resolved" }
    ],

    "ATTACHMENTS": {
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -11,6 +11,7 @@
    "LOADING_CONVERSATIONS": "Loading Conversations",
    "HEADER": {
      "RESOLVE_ACTION": "Resolve",
+      "REOPEN_ACTION": "Reopen",
      "OPEN": "More",
      "CLOSE": "Close",
      "DETAILS": "details"
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,10 +1,6 @@
 <template>
  <section class="app-content columns">
-    <chat-list
-      :conversation-inbox="inboxId"
-      :page-title="$t('CHAT_LIST.TAB_HEADING')"
-    >
-    </chat-list>
+    <chat-list :conversation-inbox="inboxId"></chat-list>
    <conversation-box
      :inbox-id="inboxId"
      :is-contact-panel-open="isContactPanelOpen"
@@ -37,7 +33,6 @@ export default {

  data() {
    return {
-      pageTitle: this.$state,
      panelToggleState: false,
    };
  },
@@ -60,7 +55,15 @@ export default {
  props: ['inboxId', 'conversationId'],

  mounted() {
-    this.$watch('$store.state.route', () => {
+    this.initialize();
+    this.$watch('$store.state.route', () => this.initialize());
+    this.$watch('chatList.length', () => {
+      this.setActiveChat();
+    });
+  },
+
+  methods: {
+    initialize() {
      switch (this.$store.state.route.name) {
        case 'inbox_conversation':
          this.setActiveChat();
@@ -80,13 +83,8 @@ export default {
          this.$store.dispatch('setActiveInbox', null);
          break;
      }
-    });
-    this.$watch('chatList.length', () => {
-      this.setActiveChat();
-    });
-  },
+    },

-  methods: {
    setActiveChat() {
      const conversationId = parseInt(this.conversationId, 10);
      const [chat] = this.chatList.filter(c => c.id === conversationId);
--- a/app/javascript/dashboard/routes/index.spec.js
+++ b/app/javascript/dashboard/routes/index.spec.js
@@ -21,10 +21,14 @@ jest.mock('../constants', () => {
    CHANNELS: {
      FACEBOOK: 'facebook',
    },
-    ASSIGNEE_TYPE_SLUG: {
-      MINE: 0,
-      UNASSIGNED: 1,
-      OPEN: 1,
+    ASSIGNEE_TYPE: {
+      ME: 'me',
+      UNASSIGNED: 'unassigned',
+      ALL: 'all',
+    },
+    STATUS_TYPE: {
+      OPEN: 'open',
+      RESOLVED: 'resolved',
    },
  };
 });
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -8,8 +8,9 @@ import cannedResponse from './modules/cannedResponse';
 import Channel from './modules/channels';
 import contacts from './modules/contacts';
 import contactConversations from './modules/contactConversations';
-import conversationMetadata from './modules/conversationMetadata';
 import conversationLabels from './modules/conversationLabels';
+import conversationMetadata from './modules/conversationMetadata';
+import conversationPage from './modules/conversationPage';
 import conversations from './modules/conversations';
 import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
@@ -27,6 +28,7 @@ export default new Vuex.Store({
    contactConversations,
    conversationLabels,
    conversationMetadata,
+    conversationPage,
    conversations,
    inboxes,
    inboxMembers,
--- a/app/javascript/dashboard/store/modules/conversationPage.js
+++ b/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,
+};
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/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
    }
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/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,
 };

--- a/app/javascript/dashboard/store/modules/specs/conversationPage/actions.spec.js
+++ b/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],
+      ]);
+    });
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/conversationPage/getters.spec.js
+++ b/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);
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/conversationPage/mutations.spec.js
+++ b/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,
+      });
+    });
+  });
+});
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -81,4 +81,9 @@ export default {

  // Conversation Metadata
  SET_CONVERSATION_METADATA: 'SET_CONVERSATION_METADATA',
+
+  // Conversation Page
+  SET_CURRENT_PAGE: 'SET_CURRENT_PAGE',
+  SET_CONVERSATION_END_REACHED: 'SET_CONVERSATION_END_REACHED',
+  CLEAR_CONVERSATION_PAGE: 'CLEAR_CONVERSATION_PAGE',
 };