Rewrite FollowList using hocs

2 files changed, 29 insertions, 10 deletions

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index ebf6c61a..9f9d43e4 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,8 +1,32 @@
+import { compose } from 'vue-compose'
 import get from 'lodash/get'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeline from '../timeline/timeline.vue'
-import FollowList from '../follow_list/follow_list.vue'
+import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import withList from '../../hocs/with_list/with_list'
+
+const FollowerList = compose(
+  withLoadMore({
+    fetch: (props, $store) => $store.dispatch('addFollowers', props.userId),
+    select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []),
+    destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
+    childPropName: 'entries',
+    additionalPropNames: ['userId']
+  }),
+  withList({ getEntryProps: user => ({ user }) })
+)(UserCard)
+
+const FriendList = compose(
+  withLoadMore({
+    fetch: (props, $store) => $store.dispatch('addFriends', props.userId),
+    select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []),
+    destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
+    childPropName: 'entries',
+    additionalPropNames: ['userId']
+  }),
+  withList({ getEntryProps: user => ({ user }) })
+)(UserCard)
 
 const UserProfile = {
   data () {
@@ -123,7 +147,8 @@ const UserProfile = {
     UserCardContent,
     UserCard,
     Timeline,
-    FollowList
+    FollowerList,
+    FriendList
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index ba1a7760..a3d2825f 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -18,16 +18,10 @@
         :user-id="fetchBy"
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
-        <FollowList v-if="user.friends_count > 0" :userId="userId" :showFollowers="false" />
-        <div class="userlist-placeholder" v-else>
-          <i class="icon-spin3 animate-spin"></i>
-        </div>
+        <FriendList :userId="userId" />
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
-        <FollowList v-if="user.followers_count > 0" :userId="userId" :showFollowers="true" />
-        <div class="userlist-placeholder" v-else>
-          <i class="icon-spin3 animate-spin"></i>
-        </div>
+        <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
       </div>
       <Timeline
         :label="$t('user_card.media')"