i changed my mind, fetch logic does belong in <List>

src/components/settings_modal/admin_tabs/admin_card.js

@@ -2,7 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue'
 import TextConfirm from 'src/components/confirm_modal/text_confirm.vue'
 import Modal from 'src/components/modal/modal.vue'
-import PageList from 'src/components/page_list/page_list.vue'
+import List from 'src/components/list/list.vue'
 import Popover from 'src/components/popover/popover.vue'
 import Select from 'src/components/select/select.vue'
 import AdminStatusCard from 'src/components/settings_modal/admin_tabs/admin_status_card.vue'
@@ -132,7 +132,7 @@ const AdminCard = {
   components: {
     BasicUserCard,
     Checkbox,
-    PageList,
+    List,
     AdminStatusCard,
     Modal,
     Popover,

src/components/settings_modal/admin_tabs/users_tab.js

@@ -28,12 +28,6 @@ const UsersTab = {
       filtersName: '',
       filtersEmail: '',
       expandedUser: null,
-      loading: false,
-      error: null,
-      bottomedOut: false,
-      users: [],
-      page: 1,
-      total: null,
     }
   },
   computed: {
@@ -118,29 +112,14 @@ const UsersTab = {
     GenericConfirm,
   },
   methods: {
-    fetchPage() {
-      if (this.loading) return
-
-      this.loading = true
-      this.error = null
-
-      this.$store
+    fetchUsers(page) {
+      console.log(page)
+      return this.$store
         .dispatch('fetchAdminUsers', {
           ...this.fetchOptions,
-          page: this.page,
-        })
-        .then((result) => {
-          console.log('RESULT', result)
-          this.loading = false
-          this.bottomedOut = isEmpty(result.users)
-          this.page += 1
-          this.total = result.count
-          this.users.push(...result.users)
-        })
-        .catch((error) => {
-          this.loading = false
-          this.error = error
+          page,
         })
+        .then(({ count, users }) => ({ count, items: users }))
     },
     /**
      * show the confirmation box for bulk actions.
@@ -170,9 +149,7 @@ const UsersTab = {
   },
   watch: {
     fetchOptions () {
-      this.page = 1
-      this.users = []
-      this.fetchPage()
+      this.$refs.usersList.reset()
     }
   }
 }

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -121,12 +121,8 @@
       </div>
     </div>
     <List
-      :get-key="i => i"
-      :items="users"
-      :loading="loading"
-      :error="error"
-      :bottomed-out="bottomedOut"
-      @fetch-requested="fetchPage"
+      ref="usersList"
+      :fetch-function="fetchUsers"
       selectable
       scrollable
     >

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -7,7 +7,6 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
 import List from 'src/components/list/list.vue'
 import MuteCard from 'src/components/mute_card/mute_card.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
-import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -61,24 +60,7 @@ const MutesAndBlocks = {
   },
   methods: {
     fetchItems(group) {
-      if (this[group + 'Loading']) return
-
-      const capGroup = group[0].toUpperCase() + group.slice(1)
-
-      this[group + 'Loading'] = true
-      this[group + 'Error'] = null
-
-      this.$store
-        .dispatch('fetch' + capGroup, this.userId)
-        .then((newEntries) => {
-          this[group + 'Loading'] = false
-          this[group + 'BottomedOut'] = isEmpty(newEntries)
-          return newEntries
-        })
-        .catch((error) => {
-          this[group + 'Loading'] = false
-          this[group + 'Error'] = error
-        })
+      return () => this.$store.dispatch('fetch' + group, this.userId)
     },
     importFollows(file) {
       return this.$store.state.api.backendInteractor

src/components/settings_modal/tabs/mutes_and_blocks_tab.vue

@@ -22,11 +22,8 @@
       </div>
       <List
         :get-key="i => i"
-        :items="blocks"
-        :loading="blocksLoading"
-        :error="blocksError"
-        :bottomed-out="blocksBottomedOut"
-        @fetch-requested="fetchItems('blocks')"
+        :external-items="blocks"
+        :fetch-function="fetchItems('Blocks')"
         scrollable
         selectable
       >
@@ -79,11 +76,8 @@
       </div>
       <List
         :get-key="i => i"
-        :items="mutes"
-        :loading="mutesLoading"
-        :error="mutesError"
-        :bottomed-out="mutesBottomedOut"
-        @fetch-requested="fetchItems('mutes')"
+        :external-items="mutes"
+        :fetch-function="fetchItems('Mutes')"
         scrollable
         selectable
       >
@@ -136,11 +130,8 @@
       </div>
       <List
         :get-key="i => i"
-        :items="domains"
-        :loading="domainsLoading"
-        :error="domainsError"
-        :bottomed-out="domainsBottomedOut"
-        @fetch-requested="fetchItems('domainMutes')"
+        :external-items="domains"
+        :fetch-function="fetchItems('DomainMutes')"
         scrollable
         selectable
       >