follows/followers pagination ready for review

2 files changed, 25 insertions, 60 deletions

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 4f09c9e7..0361d253 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,6 +1,8 @@
 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 FriendsList from '../friends_list/friends_list.vue'
+import FollowersList from '../followers_list/followers_list.vue'
 
 const UserProfile = {
   created () {
@@ -15,15 +17,7 @@ const UserProfile = {
     }
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'user')
-    this.$store.dispatch('stopFetching', 'favorites')
-    this.$store.dispatch('stopFetching', 'media')
-  },
-  data () {
-    return {
-      followsPage: 0,
-      followersPage: 0
-    }
+    this.cleanUp(this.userId)
   },
   computed: {
     timeline () {
@@ -45,12 +39,6 @@ const UserProfile = {
       return this.userId && this.$store.state.users.currentUser.id &&
         this.userId === this.$store.state.users.currentUser.id
     },
-    friends () {
-      return this.user.friends
-    },
-    followers () {
-      return this.user.followers
-    },
     userInStore () {
       if (this.isExternal) {
         return this.$store.getters.userById(this.userId)
@@ -74,66 +62,48 @@ const UserProfile = {
     }
   },
   methods: {
-    fetchFollowers () {
-      const id = this.userId
-      this.$store.dispatch('addFollowers', { id })
-    },
-    fetchFriends () {
-      const id = this.userId
-      this.$store.dispatch('addFriends', { id })
-    },
     startFetchFavorites () {
       if (this.isUs) {
         this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
       }
     },
-    nextFollowsPage () {
-      this.followsPage += 1
-      this.$store.dispatch('addFriends', { id: this.userId, page: this.followsPage })
-      console.log(this.user.friends)
-    }
-  },
-  watch: {
-    // TODO get rid of this copypasta
-    userName () {
-      if (this.isExternal) {
-        return
-      }
-      this.$store.dispatch('stopFetching', 'user')
-      this.$store.dispatch('stopFetching', 'favorites')
-      this.$store.dispatch('stopFetching', 'media')
-      this.$store.commit('clearTimeline', { timeline: 'user' })
-      this.$store.commit('clearTimeline', { timeline: 'favorites' })
-      this.$store.commit('clearTimeline', { timeline: 'media' })
+    startUp () {
       this.$store.dispatch('startFetching', ['user', this.fetchBy])
       this.$store.dispatch('startFetching', ['media', this.fetchBy])
+
       this.startFetchFavorites()
     },
-    userId () {
-      if (!this.isExternal) {
-        return
-      }
+    cleanUp () {
       this.$store.dispatch('stopFetching', 'user')
       this.$store.dispatch('stopFetching', 'favorites')
       this.$store.dispatch('stopFetching', 'media')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.commit('clearTimeline', { timeline: 'favorites' })
       this.$store.commit('clearTimeline', { timeline: 'media' })
-      this.$store.dispatch('startFetching', ['user', this.fetchBy])
-      this.$store.dispatch('startFetching', ['media', this.fetchBy])
-      this.startFetchFavorites()
+    }
+  },
+  watch: {
+    userName () {
+      if (this.isExternal) {
+        return
+      }
+      this.cleanUp()
+      this.startUp()
     },
-    user () {
-      if (this.user.id && !this.user.followers) {
-        this.fetchFollowers()
-        this.fetchFriends()
+    userId () {
+      if (!this.isExternal) {
+        return
       }
+      this.cleanUp()
+      this.startUp()
     }
   },
   components: {
     UserCardContent,
     UserCard,
-    Timeline
+    Timeline,
+    FriendsList,
+    FollowersList
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index baf6aef6..4ba09dc3 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -5,18 +5,13 @@
     <tab-switcher>
       <Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/>
       <div :label="$t('user_card.followees')">
-        <div v-if="friends">
-          <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
-          <div @click="nextFollowsPage" class="panel-footer">MORE</div>
-        </div>
+        <FriendsList v-if="user.friends_count > 0" :userId="userId" />
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
       <div :label="$t('user_card.followers')">
-        <div v-if="followers">
-          <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
-        </div>
+        <FollowersList v-if="user.followers_count > 0" :userId="userId" />
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>