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,