Add follower and following views

src/components/timeline/timeline.js

@@ -1,20 +1,32 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const Timeline = {
   props: [
     'timeline',
     'timelineName',
     'title',
+    'showingStatuses',
     'userId'
   ],
   computed: {
-    timelineError () { return this.$store.state.statuses.error }
+    timelineError () { return this.$store.state.statuses.error },
+    followers () {
+      return this.timeline.followers
+    },
+    friends () {
+      return this.timeline.friends
+    },
+    viewing () {
+      return this.timeline.viewing
+    }
   },
   components: {
     Status,
-    StatusOrConversation
+    StatusOrConversation,
+    UserCard
   },
   created () {
     const store = this.$store
@@ -30,6 +42,12 @@ const Timeline = {
       showImmediately,
       userId: this.userId
     })
+
+    // don't fetch followers for public, friend, twkn
+    if (this.timelineName === 'user') {
+      this.fetchFriends()
+      this.fetchFollowers()
+    }
   },
   methods: {
     showNewStatuses () {
@@ -48,6 +66,16 @@ const Timeline = {
         userId: this.userId
       }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
     },
+    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) {
       let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
       if (this.timeline.loading === false && this.$store.state.config.autoLoad && (window.innerHeight + window.pageYOffset) >= (height - 750)) {

src/components/timeline/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default">
+  <div class="timeline panel panel-default" v-if="viewing == 'statuses'">
     <div class="panel-heading timeline-heading base01-background base04">
       <div class="title">
         {{title}}
@@ -24,6 +24,30 @@
       </div>
     </div>
   </div>
+  <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
+    <div class="panel-heading timeline-heading base01-background base04">
+      <div class="title">
+        Followers
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <user-card v-for="follower in followers" :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 base01-background base04">
+      <div class="title">
+        Following
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="timeline">
+        <user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
+      </div>
+    </div>
+  </div>
 </template>
 <script src="./timeline.js"></script>
 
@@ -65,6 +89,13 @@
     }
   }
 
+  .avatar {
+  padding-top: 0.3em;
+  width:32px;
+  height: 32px;
+  border-radius: 50%;
+  }
+
 
   .new-status-notification {
     position:relative;