refs #120 Add follow/unfollow icon and update following status

src/renderer/App.vue

@@ -10,6 +10,10 @@
   }
 </script>
 
-<style>
-  /* CSS */
+<style lang="scss">
+.clearfix:after {
+  content:" ";
+  display:block;
+  clear:both;
+}
 </style>

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -2,6 +2,15 @@
 <div id="account_profile">
   <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
+      <div class="follow-follower" v-if="relationship !== null">
+        <div class="follower-status">
+        </div>
+        <div class="follow-status">
+          <icon name="user-times" scale="1.5" class="unfollow" v-if="relationship.following"></icon>
+          <icon name="user-plus" scale="1.5" class="follow" v-else></icon>
+        </div>
+        <div class="clearfix"></div>
+      </div>
       <div class="icon">
         <img :src="account.avatar" />
       </div>
@@ -42,7 +51,8 @@ export default {
   name: 'account-profile',
   computed: {
     ...mapState({
-      account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account
+      account: state => state.TimelineSpace.Contents.SideBar.AccountProfile.account,
+      relationship: state => state.TimelineSpace.Contents.SideBar.AccountProfile.relationship
     })
   },
   methods: {
@@ -90,6 +100,19 @@ function findLink (target) {
   word-wrap: break-word;
   font-size: 14px;
 
+  .follow-follower {
+    .follower-status {
+      float: left;
+    }
+    .follow-status {
+      float: right;
+
+      .unfollow {
+        color: #409eff;
+      }
+    }
+  }
+
   .icon {
     padding: 12px;
 

src/renderer/store/TimelineSpace/Contents/Favourites.js

@@ -67,6 +67,7 @@ const Favourites = {
           if (err) return reject(err)
           commit('insertFavourites', data)
           commit('changeLazyLoading', false)
+          resolve(res)
         })
       })
     }

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.js

@@ -1,16 +1,38 @@
+import Mastodon from 'mastodon-api'
+
 const AccountProfile = {
   namespaced: true,
   state: {
-    account: null
+    account: null,
+    relationship: null
   },
   mutations: {
     changeAccount (state, account) {
       state.account = account
+    },
+    changeRelationship (state, relationship) {
+      state.relationship = relationship
     }
   },
   actions: {
-    changeAccount ({ commit }, account) {
+    changeAccount ({ commit, dispatch }, account) {
+      dispatch('fetchRelationship', account)
       commit('changeAccount', account)
+    },
+    fetchRelationship ({ state, commit, rootState }, account) {
+      return new Promise((resolve, reject) => {
+        commit('changeRelationship', null)
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get('/accounts/relationships', { id: [account.id] }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('changeRelationship', data[0])
+          resolve(res)
+        })
+      })
     }
   }
 }