Implement pagination

src/api/reports.js

@@ -31,19 +31,13 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
-export async function fetchReports(limit, max_id, authHost, token) {
+export async function fetchReports(filter, page, pageSize, authHost, token) {
+  const url = filter.length > 0
+    ? `/api/pleroma/admin/reports?state=${filter}&page=${page}&page_size=${pageSize}`
+    : `/api/pleroma/admin/reports?page=${page}&page_size=${pageSize}`
   return await request({
     baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/reports?limit=${limit}&max_id=${max_id}`,
-    method: 'get',
-    headers: authHeaders(token)
-  })
-}
-
-export async function filterReports(filter, limit, max_id, authHost, token) {
-  return await request({
-    baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/reports?state=${filter}&limit=${limit}&max_id=${max_id}`,
+    url,
     method: 'get',
     headers: authHeaders(token)
   })

src/store/modules/reports.js

-import { changeState, changeStatusScope, deleteStatus, fetchReports, filterReports } from '@/api/reports'
+import { changeState, changeStatusScope, deleteStatus, fetchReports } from '@/api/reports'
 
 const reports = {
   state: {
     fetchedReports: [],
+    totalReportsCount: 0,
+    currentPage: 1,
+    pageSize: 1,
     groupReports: true,
-    idOfLastReport: '',
     stateFilter: '',
     loading: true
   },
@@ -15,9 +17,15 @@ const reports = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
+    SET_PAGE: (state, page) => {
+      state.currentPage = page
+    },
     SET_REPORTS: (state, reports) => {
       state.fetchedReports = reports
     },
+    SET_REPORTS_COUNT: (state, total) => {
+      state.totalReportsCount = total
+    },
     SET_REPORTS_FILTER: (state, filter) => {
       state.stateFilter = filter
     },
@@ -26,30 +34,29 @@ const reports = {
     }
   },
   actions: {
-    async ChangeReportState({ commit, getters, state }, { reportState, reportId }) {
-      const { data } = await changeState(reportState, reportId, getters.authHost, getters.token)
-      const updatedReports = state.fetchedReports.map(report => report.id === reportId ? data : report)
-      commit('SET_REPORTS', updatedReports)
+    async ChangeReportState({ dispatch, getters, state }, { reportState, reportId }) {
+      await changeState(reportState, reportId, getters.authHost, getters.token)
+      dispatch('FetchReports', state.currentPage)
     },
-    async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility }) {
+    async ChangeStatusScope({ dispatch, getters, state }, { statusId, isSensitive, visibility }) {
       await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
-      dispatch('FetchReports')
+      dispatch('FetchReports', state.currentPage)
     },
     ClearFetchedReports({ commit }) {
       commit('SET_REPORTS', [])
       commit('SET_LAST_REPORT_ID', '')
     },
-    async DeleteStatus({ dispatch, getters }, { statusId }) {
-      deleteStatus(statusId, getters.authHost, getters.token)
-      dispatch('FetchReports')
+    async DeleteStatus({ dispatch, getters, state }, { statusId }) {
+      await deleteStatus(statusId, getters.authHost, getters.token)
+      dispatch('FetchReports', state.currentPage)
     },
-    async FetchReports({ commit, getters, state }) {
+    async FetchReports({ commit, getters, state }, page) {
       commit('SET_LOADING', true)
-      const { data } = state.stateFilter.length === 0
-        ? await fetchReports(state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
-        : await filterReports(state.stateFilter, state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
+      const { data } = await fetchReports(state.stateFilter, page, state.pageSize, getters.authHost, getters.token)
 
       commit('SET_REPORTS', data.reports)
+      commit('SET_REPORTS_COUNT', data.total)
+      commit('SET_PAGE', page)
       commit('SET_LOADING', false)
     },
     SetFilter({ commit }, filter) {

src/views/reports/components/ReportsFilter.vue

@@ -44,7 +44,7 @@ export default {
     toggleFilters() {
       this.$store.dispatch('SetFilter', this.$data.filter)
       this.$store.dispatch('ClearFetchedReports')
-      this.$store.dispatch('FetchReports')
+      this.$store.dispatch('FetchReports', 1)
     }
   }
 }

src/views/reports/index.vue

@@ -225,27 +225,18 @@ export default {
     }
   },
   mounted() {
-    this.$store.dispatch('FetchReports')
+    this.$store.dispatch('FetchReports', 1)
   },
   created() {
     window.addEventListener('scroll', this.handleScroll)
   },
-  // destroyed() {
-  //   window.removeEventListener('scroll', this.handleScroll)
-  // },
   methods: {
     handlePageChange(page) {
-      this.$store.dispatch('FetchReports', { page })
+      this.$store.dispatch('FetchReports', page)
     },
     toggleReportsGrouping() {
       this.$store.dispatch('ToggleReportsGrouping')
     }
-    // handleScroll(reports) {
-    //   const bottomOfWindow = document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight
-    //   if (bottomOfWindow) {
-    //     this.$store.dispatch('FetchReports')
-    //   }
-    // }
   }
 }
 </script>
@@ -274,6 +265,10 @@ export default {
 
   }
 }
+.reports-pagination {
+  margin: 25px 0;
+  text-align: center;
+}
 @media
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
@@ -288,9 +283,5 @@ only screen and (max-width: 760px),
   #app > div > div.main-container > section > div > div.block > ul {
     margin: 45px 45px 5px 19px;
   }
-  .reports-pagination {
-    margin: 25px 0;
-    text-align: center;
-  }
 }
 </style>