1 files changed, 26 insertions, 3 deletions
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index ecc36a4d..28e22f09 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,16 +1,20 @@
 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',
+    'noFollowsYou',
     'showApproval'
   ],
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      followRequestInProgress: false,
+      followRequestSent: false,
+      updated: false
     }
   },
   components: {
@@ -18,7 +22,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.showApproval && (!this.following || this.updated && !this.updated.following)
+    }
   },
   methods: {
     toggleUserExpanded () {
@@ -34,6 +42,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
+      })
     }
   }
 }