Move statuses state from component data to module

src/api/status.js

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

src/store/modules/status.js

@@ -3,9 +3,20 @@ import { changeStatusScope, deleteStatus, fetchStatusesByInstance } from '@/api/
 const status = {
   state: {
     fetchedStatuses: [],
-    loading: false
+    loading: false,
+    statusesByInstance: {
+      selectedInstance: '',
+      page: 1,
+      pageSize: 30
+    }
   },
   mutations: {
+    CHANGE_PAGE: (state, page) => {
+      state.statusesByInstance.page = page
+    },
+    CHANGE_SELECTED_INSTANCE: (state, instance) => {
+      state.statusesByInstance.selectedInstance = instance
+    },
     SET_STATUSES: (state, statuses) => {
       state.fetchedStatuses = statuses
     },
@@ -37,19 +48,39 @@ const status = {
         dispatch('FetchGroupedReports')
       }
     },
-    async FetchStatusesByInstance({ commit, getters }, { instance, page, pageSize }) {
+    async FetchStatusesByInstance({ commit, getters, state }) {
       commit('SET_LOADING', true)
-      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token, pageSize, page)
+      const statuses = await fetchStatusesByInstance(
+        {
+          instance: state.statusesByInstance.selectedInstance,
+          authHost: getters.authHost,
+          token: getters.token,
+          pageSize: state.statusesByInstance.pageSize,
+          page: state.statusesByInstance.page
+        })
 
       commit('SET_STATUSES', statuses.data)
       commit('SET_LOADING', false)
     },
-    async FetchStatusesPageByInstance({ commit, getters }, { instance, page, pageSize }) {
+    async FetchStatusesPageByInstance({ commit, getters, state }) {
       commit('SET_LOADING', true)
-      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token, pageSize, page)
+      const statuses = await fetchStatusesByInstance(
+        {
+          instance: state.statusesByInstance.selectedInstance,
+          authHost: getters.authHost,
+          token: getters.token,
+          pageSize: state.statusesByInstance.pageSize,
+          page: state.statusesByInstance.page
+        })
 
       commit('PUSH_STATUSES', statuses.data)
       commit('SET_LOADING', false)
+    },
+    HandleFilterChange({ commit }, instance) {
+      commit('CHANGE_SELECTED_INSTANCE', instance)
+    },
+    HandlePageChange({ commit }, page) {
+      commit('CHANGE_PAGE', page)
     }
   }
 }

src/views/statuses/index.vue

@@ -22,7 +22,11 @@
         @apply-action="clearSelection"/>
     </div>
     <div v-for="status in statuses" :key="status.id" class="status-container">
-      <status :status="status" :show-checkbox="isDesktop" @status-selection="handleStatusSelection" />
+      <status
+        :status="status"
+        :show-checkbox="isDesktop"
+        :statuses-args="{ instance: selectedInstance, page, pageSize }"
+        @status-selection="handleStatusSelection" />
     </div>
     <div v-if="statuses.length > 0" class="statuses-pagination">
       <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
@@ -43,10 +47,7 @@ export default {
   },
   data() {
     return {
-      selectedInstance: '',
-      selectedUsers: [],
-      page: 1,
-      pageSize: 30
+      selectedUsers: []
     }
   },
   computed: {
@@ -59,27 +60,34 @@ export default {
     },
     loadingPeers() {
       return this.$store.state.peers.loading
-    }
     },
-  created() {
+    page() {
+      return this.$store.state.status.statusesByInstance.page
+    },
+    pageSize() {
+      return this.$store.state.status.statusesByInstance.pageSize
+    },
+    selectedInstance: {
+      get() {
+        return this.$store.state.status.statusesByInstance.selectedInstance
+      },
+      set(instance) {
+        this.$store.dispatch('HandleFilterChange', instance)
+      }
+    }
   },
   mounted() {
     this.$store.dispatch('FetchPeers')
   },
   methods: {
-    handleFilterChange(instance) {
-      this.page = 1
-
-      this.$store.dispatch('FetchStatusesByInstance', { instance, page: this.page, pageSize: this.pageSize })
+    handleFilterChange() {
+      this.$store.dispatch('HandlePageChange', 1)
+      this.$store.dispatch('FetchStatusesByInstance')
     },
     handleLoadMore() {
-      this.page = this.page + 1
+      this.$store.dispatch('HandlePageChange', this.page + 1)
 
-      this.$store.dispatch('FetchStatusesPageByInstance', {
-        instance: this.selectedInstance,
-        page: this.page,
-        pageSize: this.pageSize
-      })
+      this.$store.dispatch('FetchStatusesPageByInstance')
     },
     clearSelection() {
       // TODO