2 files changed, 26 insertions, 59 deletions
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 27e138b0..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,9 +17,7 @@ const UserProfile = {
     }
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'user')
-    this.$store.dispatch('stopFetching', 'favorites')
-    this.$store.dispatch('stopFetching', 'media')
+    this.cleanUp(this.userId)
   },
   computed: {
     timeline () {
@@ -39,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)
@@ -68,61 +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])
       }
-    }
-  },
-  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 e53ce4cc..c431c729 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -16,27 +16,13 @@
         :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"
-          />
-        </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"
-          />
-        </div>
+        <FollowersList v-if="user.followers_count > 0" :userId="userId" />
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>