chat message pagination

src/api/chat.js

@@ -23,10 +23,13 @@ export async function fetchChat(id, authHost, token) {
   })
 }
 
-export async function fetchChatMessages(id, authHost, token) {
+export async function fetchChatMessages(id, max_id, authHost, token) {
+  console.log(max_id)
+  let url
+  max_id !== null ? url = `/api/pleroma/admin/chats/${id}/messages?max_id=${max_id}` : url = `/api/pleroma/admin/chats/${id}/messages`
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/chats/${id}/messages`,
+    url: url,
     method: 'get',
     headers: authHeaders(token)
   })

src/lang/en.js

@@ -324,6 +324,7 @@ export default {
     pending: 'Pending',
     noStatuses: 'No statuses to show',
     noChats: 'No chats to show',
+    noMessages: 'No messages to show',
     openAccountInInstance: 'Open account in instance',
     securitySettings: {
       email: 'Email',

src/store/modules/chat.js

@@ -4,17 +4,29 @@ const chat = {
   state: {
     fetchedChat: {},
     fetchedChatMessages: {},
-    loading: false
+    loading: false,
+    buttonLoading: false,
+    allLoaded: false,
+    max_id: null
   },
   mutations: {
-    SET_LOADING: (state, status) => {
+    SET_LOADING: (state, chat) => {
-      state.loading = status
+      state.loading = chat
+    },
+    SET_ALL_LOADED: (state, chat) => {
+      state.allLoaded = chat
+    },
+    SET_BUTTON_LOADING: (state, chat) => {
+      state.buttonLoading = chat
     },
     SET_CHAT: (state, chat) => {
       state.fetchedChat = chat
     },
     SET_CHAT_MESSAGES: (state, chatMessages) => {
       state.fetchedChatMessages = chatMessages
+    },
+    CHANGE_MAX_ID: (state, max_id) => {
+      state.max_id = max_id
     }
   },
   actions: {
@@ -25,15 +37,18 @@ const chat = {
       commit('SET_CHAT', chat.data)
       commit('SET_LOADING', false)
     },
-    async FetchChatMessages({ commit, dispatch, getters, state }, id) {
+    async FetchChatMessages({ commit, dispatch, getters, state }, id, max_id) {
       commit('SET_LOADING', true)
-      const chat = await fetchChatMessages(id, getters.authHost, getters.token)
+      const chat = await fetchChatMessages(id, state.max_id, getters.authHost, getters.token)
       commit('SET_CHAT_MESSAGES', chat.data)
       commit('SET_LOADING', false)
     },
     async DeleteMessage({ commit, dispatch, getters, state }, params) {
       await deleteChatMessage(params.chat_id, params.message_id, getters.authHost, getters.token)
       dispatch('FetchChatMessages', params.chat_id)
+    },
+    HandlePageChange({ commit }, max_id) {
+      commit('CHANGE_MAX_ID', max_id)
     }
   }
 }

src/views/chats/show.vue

@@ -40,7 +40,11 @@
         <el-timeline-item v-for="message in chatMessages" :key="message.id">
           <chat-message :message="message" :author="getAuthor(message.account_id)"/>
         </el-timeline-item>
-        <p v-if="chatMessages.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
+        <p v-if="chatMessages.length === 0" class="no-messages">{{ $t('userProfile.noMessages') }}</p>
+        <div v-if="chatMessages.length === 20" class="statuses-pagination">
+          <el-button v-if="!allLoaded" :loading="buttonLoading" @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
+          <el-button v-else icon="el-icon-check" circle/>
+        </div>
       </el-timeline>
     </div>
 
@@ -54,11 +58,6 @@ import RebootButton from '@/components/RebootButton'
 export default {
   name: 'ChatShow',
   components: { RebootButton, ChatMessage },
-  data() {
-    return {
-
-    }
-  },
   computed: {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
@@ -69,6 +68,12 @@ export default {
     isTablet() {
       return this.$store.state.app.device === 'tablet'
     },
+    allLoaded() {
+      return this.$store.state.chat.allLoaded
+    },
+    buttonLoading() {
+      return this.$store.state.chat.buttonLoading
+    },
     loading() {
       return this.$store.state.chat.loading
     },
@@ -80,6 +85,7 @@ export default {
     }
   },
   beforeMount: function() {
+    this.$store.dispatch('HandlePageChange', null)
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('GetNodeInfo')
     this.$store.dispatch('FetchChat', this.$route.params.id)
@@ -93,6 +99,11 @@ export default {
       const sender = this.chat.sender
       const receiver = this.chat.receiver
       return account_id === sender.id ? sender : receiver
+    },
+    handleLoadMore() {
+      const max_id = this.chatMessages.pop().id
+      this.$store.dispatch('HandlePageChange', max_id)
+      this.$store.dispatch('FetchChatMessages', this.$route.params.id)
     }
   }
 }
@@ -152,6 +163,10 @@ export default {
 .chats {
   padding: 0 20px 0 0;
 }
+.statuses-pagination {
+  padding: 15px 0;
+  text-align: center;
+}
 
 @media only screen and (min-width: 1824px) {