integrate withLoadMore HOC into List

src/components/user_profile/user_profile.js

@@ -7,7 +7,6 @@ import List from 'src/components/list/list.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Timeline from 'src/components/timeline/timeline.vue'
 import UserCard from 'src/components/user_card/user_card.vue'
-import withLoadMore from '../../hocs/with_load_more/with_load_more'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -19,28 +18,6 @@ import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faCircleNotch)
 
-const FollowerList = withLoadMore({
-  fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
-  select: (props, $store) =>
-    get($store.getters.findUser(props.userId), 'followerIds', []).map((id) =>
-      $store.getters.findUser(id),
-    ),
-  destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
-  childPropName: 'items',
-  additionalPropNames: ['userId'],
-})(List)
-
-const FriendList = withLoadMore({
-  fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
-  select: (props, $store) =>
-    get($store.getters.findUser(props.userId), 'friendIds', []).map((id) =>
-      $store.getters.findUser(id),
-    ),
-  destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
-  childPropName: 'items',
-  additionalPropNames: ['userId'],
-})(List)
-
 const defaultTabKey = 'statuses'
 
 const UserProfile = {
@@ -64,6 +41,8 @@ const UserProfile = {
   unmounted() {
     this.stopFetching()
     useInterfaceStore().setForeignProfileBackground(null)
+    this.$store.dispatch('clearFollowers', this.userId)
+    this.$store.dispatch('clearFriends', this.userId)
   },
   computed: {
     timeline() {
@@ -109,6 +88,18 @@ const UserProfile = {
     setFooterRef(el) {
       this.footerRef = el
     },
+    getFriends() {
+      return get(
+        this.$store.getters.findUser(this.userId),
+        'friendIds', []
+      ).map((id) => this.$store.getters.findUser(id))
+    },
+    getFollowers() {
+      return get(
+        this.$store.getters.findUser(this.userId),
+        'followerIds', []
+      ).map((id) => this.$store.getters.findUser(id))
+    },
     load(userNameOrId) {
       const startFetchingTimeline = (timeline, userId) => {
         // Clear timeline only if load another user's profile
@@ -203,8 +194,7 @@ const UserProfile = {
   components: {
     UserCard,
     Timeline,
-    FollowerList,
-    FriendList,
+    List,
     FollowCard,
     TabSwitcher,
     Conversation,

src/components/user_profile/user_profile.vue

@@ -39,14 +39,15 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList
+          <List
             :user-id="userId"
-            :non-interactive="true"
+            :items-function="getFriends"
+            :fetch-function="() => $store.dispatch('fetchFriends', userId)"
           >
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
-          </FriendList>
+          </List>
         </div>
         <div
           v-if="followersTabVisible"
@@ -55,9 +56,10 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList
+          <List
             :user-id="userId"
-            :non-interactive="true"
+            :items-function="getFollowers"
+            :fetch-function="() => $store.dispatch('fetchFollowers', userId)"
           >
             <template #item="{item}">
               <FollowCard
@@ -65,7 +67,7 @@
                 :no-follows-you="isUs"
               />
             </template>
-          </FollowerList>
+          </List>
         </div>
         <Timeline
           key="media"