#332 - add follow/not follow button to follow list

src/components/user_card/user_card.js

@@ -1,16 +1,21 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 
 const UserCard = {
   props: [
     'user',
     'showFollows',
-    'showApproval'
+    'showApproval',
+    'showActions'
   ],
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      followRequestInProgress: false,
+      followRequestSent: false,
+      updated: false
     }
   },
   components: {
@@ -18,7 +23,11 @@ const UserCard = {
     UserAvatar
   },
   computed: {
-    currentUser () { return this.$store.state.users.currentUser }
+    currentUser () { return this.$store.state.users.currentUser },
+    following () { return this.updated ? this.updated.following : this.user.following },
+    showFollow () {
+      return this.showActions && (!this.showFollows && !this.following || this.updated && !this.updated.following)
+    }
   },
   methods: {
     toggleUserExpanded () {
@@ -34,6 +43,21 @@ const UserCard = {
     },
     userProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    },
+    followUser () {
+      this.followRequestInProgress = true
+      requestFollow(this.user, this.$store).then(({ sent, updated }) => {
+        this.followRequestInProgress = false
+        this.followRequestSent = sent
+        this.updated = updated
+      })
+    },
+    unfollowUser () {
+      this.followRequestInProgress = true
+      requestUnfollow(this.user, this.$store).then(({ updated }) => {
+        this.followRequestInProgress = false
+        this.updated = updated
+      })
     }
   }
 }