Refactor follower/friends out of statuses/timeline into user_profile where it

belongs. Changed display of profile to single panel with tabs.

src/components/timeline/timeline.js

@@ -10,7 +10,8 @@ const Timeline = {
     'timelineName',
     'title',
     'userId',
-    'tag'
+    'tag',
+    'embedded'
   ],
   data () {
     return {
@@ -20,15 +21,6 @@ const Timeline = {
   },
   computed: {
     timelineError () { return this.$store.state.statuses.error },
-    followers () {
-      return this.timeline.followers
-    },
-    friends () {
-      return this.timeline.friends
-    },
-    viewing () {
-      return this.timeline.viewing
-    },
     newStatusCount () {
       return this.timeline.newStatusCount
     },
@@ -38,6 +30,14 @@ const Timeline = {
       } else {
         return ` (${this.newStatusCount})`
       }
+    },
+    classes () {
+      return {
+        root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+      }
     }
   },
   components: {
@@ -60,12 +60,6 @@ const Timeline = {
       userId: this.userId,
       tag: this.tag
     })
-
-    // don't fetch followers for public, friend, twkn
-    if (this.timelineName === 'user') {
-      this.fetchFriends()
-      this.fetchFollowers()
-    }
   },
   mounted () {
     if (typeof document.hidden !== 'undefined') {
@@ -103,16 +97,6 @@ const Timeline = {
         tag: this.tag
       }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
     }, 1000, this),
-    fetchFollowers () {
-      const id = this.userId
-      this.$store.state.api.backendInteractor.fetchFollowers({ id })
-        .then((followers) => this.$store.dispatch('addFollowers', { followers }))
-    },
-    fetchFriends () {
-      const id = this.userId
-      this.$store.state.api.backendInteractor.fetchFriends({ id })
-        .then((friends) => this.$store.dispatch('addFriends', { friends }))
-    },
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()
       const height = Math.max(bodyBRect.height, -(bodyBRect.y))

src/components/timeline/timeline.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="timeline panel panel-default" v-if="viewing == 'statuses'">
-    <div class="panel-heading timeline-heading">
+  <div :class="classes.root">
+    <div :class="classes.header">
       <div class="title">
         {{title}}
       </div>
@@ -14,43 +14,20 @@
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
-    <div class="panel-body">
+    <div :class="classes.body">
       <div class="timeline">
         <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
       </div>
     </div>
-    <div class="panel-footer">
+    <div :class="classes.footer">
       <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
         <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
       </a>
       <div class="new-status-notification text-center panel-footer" v-else>...</div>
     </div>
   </div>
-  <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
-    <div class="panel-heading timeline-heading">
-      <div class="title">
-        {{$t('user_card.followers')}}
-      </div>
-    </div>
-    <div class="panel-body">
-      <div class="timeline">
-        <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
-      </div>
-    </div>
-  </div>
-  <div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
-    <div class="panel-heading timeline-heading">
-      <div class="title">
-        {{$t('user_card.followees')}}
-      </div>
-    </div>
-    <div class="panel-body">
-      <div class="timeline">
-        <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
-      </div>
-    </div>
-  </div>
 </template>
+
 <script src="./timeline.js"></script>
 
 <style lang="scss">