Add follower and following views

src/components/status/status.vue

@@ -40,7 +40,7 @@
         </div>
         <div class="media-body">
           <div class="base05 base05=border usercard" v-if="userExpanded">
-            <user-card-content :user="status.user"></user-card-content>
+            <user-card-content :user="status.user" :switcher="false"></user-card-content>
           </div>
           <div class="user-content">
             <div class="media-heading">

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;

src/components/user_card/user_card.js

@@ -0,0 +1,23 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const UserCard = {
+  props: [
+    'user',
+    'showFollows'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCardContent
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    }
+  }
+}
+
+export default UserCard

src/components/user_card/user_card.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="card base00-background base03-border">
+    <a href="#">
+      <img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
+    </a>
+    <div class="base05 base05=border usercard" v-if="userExpanded">
+      <user-card-content :user="user" :switcher="false"></user-card-content>
+    </div>
+    <div class="name-and-screen-name" v-else>
+      <div class="user-name">{{ user.name }}</div>
+      <a href="user.statusnet_profile_url"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
+    </div>
+    <span class="follows-you" v-if="!userExpanded && showFollows">
+      <div class="follows" v-if="user.follows_you">
+        Follows you!
+      </div>
+    </span>
+  </div>
+</template>
+
+<script src="./user_card.js"></script>
+
+<style lang="scss">
+  .name-and-screen-name {
+    margin-left: 0.7em;
+    min-width: 16em;
+    display:block;
+    margin-top:0.0em;
+    margin-right: 2em;
+    text-align: left;
+  }
+
+  .follows-you {
+    margin-left: 2em;
+    width:-webkit-fill-available;
+    width: -moz-webkit-fill-available;
+  }
+
+  .follows {
+    float: right;
+  }
+
+  .card {
+    display: flex;
+    flex: 1 0;
+    padding-top: 0.6em;
+    padding-right: 1em;
+    padding-bottom: 0.6em;
+    padding-left: 1em;
+    border-bottom: 1px solid;
+    margin: 0;
+    border-bottom-color: inherit;
+  }
+
+  .usercard {
+    width: -webkit-fill-available;
+    width: -moz-webkit-fill-available;
+    stretch: fill;
+    margin-left: 0.7em;
+  }
+</style>

src/components/user_card_content/user_card_content.vue

@@ -40,17 +40,20 @@
     </div>
     <div class="panel-body profile-panel-body" :style="bodyStyle">
       <div class="user-counts">
-        <div class="user-count">
-          <h5>Statuses</h5>
-          <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
+        <div class="user-count base04">
+          <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5 class="base05">Statuses</h5></a>
+          <h5 v-else>Statuses</h5>
+          <span class="base05">{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
         </div>
         <div class="user-count">
-          <h5>Following</h5>
-          <span>{{user.friends_count}}</span>
+          <a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5 class="base05">Following</h5></a>
+          <h5 v-else>Following</h5>
+          <span class="base05">{{user.friends_count}}</span>
         </div>
         <div class="user-count">
-          <h5>Followers</h5>
-          <span>{{user.followers_count}}</span>
+          <a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5 class="base05">Followers</h5></a>
+          <h5 v-else>Followers</h5>
+          <span class="base05">{{user.followers_count}}</span>
         </div>
       </div>
       <p>{{user.description}}</p>
@@ -60,7 +63,7 @@
 
 <script>
   export default {
-    props: [ 'user' ],
+    props: [ 'user', 'switcher' ],
     computed: {
       headingStyle () {
         let color = this.$store.state.config.colors['base00']
@@ -103,12 +106,17 @@
         const store = this.$store
         store.commit('setMuted', {user: this.user, muted: !this.user.muted})
         store.state.api.backendInteractor.setUserMute(this.user)
+      },
+      setProfileView (v) {
+        const store = this.$store
+        store.commit('setProfileView', { v })
       }
     }
   }
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
   
 .profile-panel-background {
   background-size: cover;
@@ -230,6 +238,9 @@
         font-weight: bolder;
         margin: 0 0 0.25em;
     }
+    a {
+        text-decoration: none;
+    }
 }
 
 .dailyAvg {

src/components/user_panel/user_panel.vue

@@ -2,7 +2,7 @@
   <div class="user-panel">
     <div v-if='user' class="panel panel-default">
 
-      <user-card-content :user="user"></user-card-content>
+      <user-card-content :user="user" :switcher="false"></user-card-content>
 
       <div class="panel-footer base00-background">
         <post-status-form v-if='user'></post-status-form>

src/components/user_profile/user_profile.js

@@ -20,11 +20,11 @@ const UserProfile = {
       } else {
         return false
       }
-    }
+    },
   },
   components: {
     UserCardContent,
-    Timeline
+    Timeline,
   }
 }
 

src/components/user_profile/user_profile.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="user" class="user-profile panel panel-default base00-background">
-      <user-card-content :user="user"></user-card-content>
+      <user-card-content :user="user" :switcher="true"></user-card-content>
     </div>
     <Timeline :title="'User Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'user'" :user-id="userId"/>
   </div>

src/modules/statuses.js

@@ -19,7 +19,10 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     },
     public: {
       statuses: [],
@@ -30,7 +33,10 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     },
     user: {
       statuses: [],
@@ -41,7 +47,10 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     },
     publicAndExternal: {
       statuses: [],
@@ -52,7 +61,10 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     },
     friends: {
       statuses: [],
@@ -63,7 +75,10 @@ export const defaultState = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     }
   }
 }
@@ -316,7 +331,10 @@ export const mutations = {
       newStatusCount: 0,
       maxId: 0,
       minVisibleId: 0,
-      loading: false
+      loading: false,
+      followers: [],
+      friends: [],
+      viewing: 'statuses'
     }
 
     state.timelines[timeline] = emptyTimeline
@@ -343,6 +361,16 @@ export const mutations = {
   setError (state, { value }) {
     state.error = value
   },
+  setProfileView (state, { v }) {
+    // load followers / friends only when needed
+    state.timelines['user'].viewing = v
+  },
+  addFriends (state, { friends }) {
+    state.timelines['user'].friends = friends
+  },
+  addFollowers (state, { followers }) {
+    state.timelines['user'].followers = followers
+  },
   markNotificationsAsSeen (state, notifications) {
     each(notifications, (notification) => {
       notification.seen = true
@@ -359,6 +387,12 @@ const statuses = {
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })
     },
+    addFriends ({ rootState, commit }, { friends }) {
+      commit('addFriends', { friends })
+    },
+    addFollowers ({ rootState, commit }, { followers }) {
+      commit('addFollowers', { followers })
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })

src/services/api/api.service.js

@@ -13,6 +13,7 @@ const STATUS_URL = '/api/statuses/show'
 const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
 const CONVERSATION_URL = '/api/statusnet/conversation'
 const MENTIONS_URL = '/api/statuses/mentions.json'
+const FOLLOWERS_URL = '/api/statuses/followers.json'
 const FRIENDS_URL = '/api/statuses/friends.json'
 const FOLLOWING_URL = '/api/friendships/create.json'
 const UNFOLLOWING_URL = '/api/friendships/destroy.json'
@@ -114,8 +115,15 @@ const unfollowUser = ({id, credentials}) => {
   }).then((data) => data.json())
 }
 
-const fetchFriends = ({credentials}) => {
-  return fetch(FRIENDS_URL, { headers: authHeaders(credentials) })
+const fetchFriends = ({id, credentials}) => {
+  let url = `${FRIENDS_URL}?user_id=${id}`
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const fetchFollowers = ({id, credentials}) => {
+  let url = `${FOLLOWERS_URL}?user_id=${id}`
+  return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
 }
 
@@ -169,7 +177,6 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
   if (since) {
     params.push(['since_id', since])
   }
-
   if (until) {
     params.push(['max_id', until])
   }
@@ -261,6 +268,7 @@ const apiService = {
   fetchConversation,
   fetchStatus,
   fetchFriends,
+  fetchFollowers,
   followUser,
   unfollowUser,
   favorite,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -10,8 +10,12 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchConversation({id, credentials})
   }
 
-  const fetchFriends = () => {
-    return apiService.fetchFriends({credentials})
+  const fetchFriends = ({id}) => {
+    return apiService.fetchFriends({id, credentials})
+  }
+
+  const fetchFollowers = ({id}) => {
+    return apiService.fetchFollowers({id, credentials})
   }
 
   const fetchAllFollowing = ({username}) => {
@@ -44,6 +48,7 @@ const backendInteractorService = (credentials) => {
     fetchStatus,
     fetchConversation,
     fetchFriends,
+    fetchFollowers,
     followUser,
     unfollowUser,
     fetchAllFollowing,