refs #657 Show relationships and follow/unfollow button in follows tab

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

@@ -1,7 +1,12 @@
 <template>
 <div id="follows">
   <template v-for="follow in follows">
-    <user :user="follow"></user>
+    <user :user="follow"
+          :relationship="targetRelation(follow.id)"
+          @followAccount="followAccount"
+          @unfollowAccount="unfollowAccount"
+          >
+    </user>
   </template>
 </div>
 </template>
@@ -15,8 +20,9 @@ export default {
   props: [ 'account' ],
   components: { User },
   computed: {
-    ...mapState({
-      follows: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Follows.follows
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Follows', {
+      follows: state => state.follows,
+      relationships: state => state.relationships
     })
   },
   created () {
@@ -28,14 +34,38 @@ export default {
     }
   },
   methods: {
-    load () {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', this.account)
+    async load () {
+      const follows = await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', this.account)
         .catch(() => {
           this.$message({
             message: this.$t('message.follows_fetch_error'),
             type: 'error'
           })
         })
+      await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', follows)
+    },
+    targetRelation (id) {
+      return this.relationships.find(r => r.id === id)
+    },
+    async followAccount (account) {
+      await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/follow', account)
+        .catch(() => {
+          this.$message({
+            message: this.$t('message.follow_error'),
+            type: 'error'
+          })
+        })
+      await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
+    },
+    async unfollowAccount (account) {
+      await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unfollow', account)
+        .catch(() => {
+          this.$message({
+            message: this.$t('message.unfollow_error'),
+            type: 'error'
+          })
+        })
+      await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
     }
   }
 }

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

@@ -3,11 +3,15 @@ import Mastodon from 'megalodon'
 const Follows = {
   namespaced: true,
   state: {
-    follows: []
+    follows: [],
+    relationships: []
   },
   mutations: {
     updateFollows (state, users) {
       state.follows = users
+    },
+    updateRelationships (state, relations) {
+      state.relationships = relations
     }
   },
   actions: {
@@ -23,6 +27,20 @@ const Follows = {
           commit('updateFollows', res.data)
           return res.data
         })
+    },
+    fetchRelationships ({ commit, rootState }, accounts) {
+      const ids = accounts.map(a => a.id)
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.get(`/accounts/relationships`, {
+        id: ids
+      })
+        .then(res => {
+          commit('updateRelationships', res.data)
+          return res.data
+        })
     }
   }
 }