Pagination

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - Emoji pack configuration
+- Statuses page: fetch all statuses from a given instance
 
 ## [1.1.0] - 2019-09-15
 

src/api/status.js

@@ -21,10 +21,10 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
-export async function fetchStatusesByInstance(instance, authHost, token) {
+export async function fetchStatusesByInstance(instance, authHost, token, pageSize, page = 1) {
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/instances/${instance}/statuses`,
+    url: `/api/pleroma/admin/instances/${instance}/statuses?page=${page}&page_size=${pageSize}`,
     method: 'get',
     headers: authHeaders(token)
   })

src/lang/en.js

@@ -232,7 +232,8 @@ export default {
   },
   statuses: {
     statuses: 'Statuses',
-    instanceFilter: 'Instance filter'
+    instanceFilter: 'Instance filter',
+    loadMore: 'Load more'
   },
   userProfile: {
     tags: 'Tags',

src/store/modules/status.js

@@ -9,6 +9,9 @@ const status = {
     SET_STATUSES: (state, statuses) => {
       state.fetchedStatuses = statuses
     },
+    PUSH_STATUSES: (state, statuses) => {
+      state.fetchedStatuses = [...state.fetchedStatuses, ...statuses]
+    },
     SET_LOADING: (state, status) => {
       state.loading = status
     }
@@ -30,12 +33,19 @@ const status = {
         dispatch('FetchUserStatuses', { userId, godmode })
       }
     },
-    async FetchStatusesByInstance({ commit, getters }, instance) {
+    async FetchStatusesByInstance({ commit, getters }, { instance, page, pageSize }) {
       commit('SET_LOADING', true)
-      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token)
+      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token, pageSize, page)
 
       commit('SET_STATUSES', statuses.data)
       commit('SET_LOADING', false)
+    },
+    async FetchStatusesPageByInstance({ commit, getters }, { instance, page, pageSize }) {
+      commit('SET_LOADING', true)
+      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token, pageSize, page)
+
+      commit('PUSH_STATUSES', statuses.data)
+      commit('SET_LOADING', false)
     }
   }
 }

src/views/statuses/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading" class="statuses-container">
+  <div v-if="!loadingPeers" class="statuses-container">
     <h1>
       {{ $t('statuses.statuses') }}
     </h1>
@@ -13,6 +13,9 @@
       </el-select>
     </div>
     <status v-for="status in statuses" :key="status.id" :status="status" />
+    <div v-if="statuses.length > 0" class="statuses-pagination">
+      <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
+    </div>
   </div>
 </template>
 
@@ -28,11 +31,12 @@ export default {
   data() {
     return {
       selectedInstance: '',
-      page: 1
+      page: 1,
+      pageSize: 2
     }
   },
   computed: {
-    loading() {
+    loadingPeers() {
       return this.$store.state.peers.loading
     },
     ...mapGetters([
@@ -47,7 +51,18 @@ export default {
   },
   methods: {
     handleFilterChange(instance) {
-      this.$store.dispatch('FetchStatusesByInstance', instance)
+      this.page = 1
+
+      this.$store.dispatch('FetchStatusesByInstance', { instance, page: this.page, pageSize: this.pageSize })
+    },
+    handleLoadMore() {
+      this.page = this.page + 1
+
+      this.$store.dispatch('FetchStatusesPageByInstance', {
+        instance: this.selectedInstance,
+        page: this.page,
+        pageSize: this.pageSize
+      })
     }
   }
 }
@@ -60,6 +75,10 @@ export default {
 .filter-container {
   margin: 22px 15px 15px 0;
 }
+.statuses-pagination {
+  padding: 15px 0;
+  text-align: center;
+}
 h1 {
   margin: 22px 0 0 0;
 }