2 files changed, 38 insertions, 64 deletions
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 27e138b0..a22b8722 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,23 +1,22 @@
 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'
 
 const UserProfile = {
   created () {
     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.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
+    this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
     this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
     }
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'user')
-    this.$store.dispatch('stopFetching', 'favorites')
-    this.$store.dispatch('stopFetching', 'media')
+    this.cleanUp(this.userId)
   },
   computed: {
     timeline () {
@@ -39,12 +38,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)
@@ -65,64 +58,56 @@ const UserProfile = {
     },
     isExternal () {
       return this.$route.name === 'external-user-profile'
+    },
+    followsTabVisible () {
+      return this.isUs || !this.user.hide_follows
+    },
+    followersTabVisible () {
+      return this.isUs || !this.user.hide_followers
     }
   },
   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])
+        this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.fetchBy })
       }
+    },
+    startUp () {
+      this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
+      this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
+
+      this.startFetchFavorites()
+    },
+    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' })
     }
   },
   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' })
-      this.$store.dispatch('startFetching', ['user', this.fetchBy])
-      this.$store.dispatch('startFetching', ['media', this.fetchBy])
-      this.startFetchFavorites()
+      this.cleanUp()
+      this.startUp()
     },
     userId () {
       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' })
-      this.$store.dispatch('startFetching', ['user', this.fetchBy])
-      this.$store.dispatch('startFetching', ['media', this.fetchBy])
-      this.startFetchFavorites()
-    },
-    user () {
-      if (this.user.id && !this.user.followers) {
-        this.fetchFollowers()
-        this.fetchFriends()
-      }
+      this.cleanUp()
+      this.startUp()
     }
   },
   components: {
     UserCardContent,
     UserCard,
-    Timeline
+    Timeline,
+    FollowList
   }
 }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index e53ce4cc..79461291 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -9,40 +9,28 @@
     <tab-switcher :renderOnlyFocused="true">
       <Timeline
         :label="$t('user_card.statuses')"
+        :disabled="!user.statuses_count"
         :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"
-          />
-        </div>
+      <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>
       </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>
+      <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>
       </div>
       <Timeline
         :label="$t('user_card.media')"
+        :disabled="!media.visibleStatuses.length"
         :embedded="true" :title="$t('user_card.media')"
         timeline-name="media"
         :timeline="media"
@@ -51,6 +39,7 @@
       <Timeline
         v-if="isUs"
         :label="$t('user_card.favorites')"
+        :disabled="!favorites.visibleStatuses.length"
         :embedded="true"
         :title="$t('user_card.favorites')"
         timeline-name="favorites"