refs #120 Add follow/unfollow action

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

@@ -2,14 +2,18 @@
 <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="follow-follower" v-if="relationship !== null && relationship !== ''">
         <div class="follower-status">
           <span class="status" v-if="relationship.followed_by">Follows you</span>
           <span class="status" v-else>Doesn't follow you</span>
         </div>
         <div class="follow-status">
-          <icon name="user-times" scale="1.5" class="unfollow" v-if="relationship.following"></icon>
+          <div v-if="relationship.following" class="unfollow" @click="unfollow(account)">
-          <icon name="user-plus" scale="1.5" class="follow" v-else></icon>
+            <icon name="user-times" scale="1.5"></icon>
+          </div>
+          <div v-else class="follow" @click="follow(account)">
+            <icon name="user-plus" scale="1.5"></icon>
+          </div>
         </div>
         <div class="clearfix"></div>
       </div>
@@ -70,6 +74,24 @@ export default {
       if (link !== null) {
         shell.openExternal(link)
       }
+    },
+    follow (account) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/follow', account)
+        .catch(() => {
+          this.$message({
+            message: 'Could not follow this user',
+            type: 'error'
+          })
+        })
+    },
+    unfollow (account) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unfollow', account)
+        .catch(() => {
+          this.$message({
+            message: 'Could not unfollow this user',
+            type: 'error'
+          })
+        })
     }
   }
 }
@@ -115,8 +137,13 @@ function findLink (target) {
     .follow-status {
       float: right;
 
+      .follow {
+        cursor: pointer;
+      }
+
       .unfollow {
         color: #409eff;
+        cursor: pointer;
       }
     }
   }

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

@@ -33,6 +33,34 @@ const AccountProfile = {
           resolve(res)
         })
       })
+    },
+    follow ({ state, commit, rootState }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.post(`/accounts/${account.id}/follow`, {}, (err, data, res) => {
+          if (err) return reject(err)
+          commit('changeRelationship', data)
+          resolve(res)
+        })
+      })
+    },
+    unfollow ({ state, commit, rootState }, account) {
+      return new Promise((resolve, reject) => {
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.post(`/accounts/${account.id}/unfollow`, {}, (err, data, res) => {
+          if (err) return reject(err)
+          commit('changeRelationship', data)
+          resolve(res)
+        })
+      })
     }
   }
 }