updated FollowCard component

src/components/follow_button/follow_button.js

@@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['user'],
+  props: ['user', 'labelFollowing', 'buttonClass'],
   data () {
     return {
       inProgress: false
@@ -23,7 +23,7 @@ export default {
       if (this.inProgress) {
         return this.$t('user_card.follow_progress')
       } else if (this.user.following) {
-        return this.$t('user_card.following')
+        return this.labelFollowing || this.$t('user_card.following')
       } else if (this.user.requested) {
         return this.$t('user_card.follow_sent')
       } else {

src/components/follow_button/follow_button.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn btn-default follow-button"
-    :class="{ pressed: isPressed }"
+    :class="[buttonClass, { pressed: isPressed}]"
     :disabled="inProgress"
     :title="title"
     @click="onClick"

src/components/follow_card/follow_card.js

@@ -1,6 +1,6 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+import FollowButton from '../follow_button/follow_button.vue'
 
 const FollowCard = {
   props: [
@@ -8,13 +8,12 @@ const FollowCard = {
     'noFollowsYou'
   ],
   data () {
-    return {
+    return { }
-      inProgress: false
-    }
   },
   components: {
     BasicUserCard,
-    RemoteFollow
+    RemoteFollow,
+    FollowButton
   },
   computed: {
     isMe () {
@@ -25,18 +24,6 @@ const FollowCard = {
     }
   },
   methods: {
-    followUser () {
-      this.inProgress = true
-      requestFollow(this.user, this.$store).then(() => {
-        this.inProgress = false
-      })
-    },
-    unfollowUser () {
-      this.inProgress = true
-      requestUnfollow(this.user, this.$store).then(() => {
-        this.inProgress = false
-      })
-    }
   }
 }
 

src/components/follow_card/follow_card.vue

@@ -16,36 +16,11 @@
         </div>
       </template>
       <template v-else>
-        <button
+        <FollowButton
-          v-if="!user.following"
+          :user="user"
-          class="btn btn-default follow-card-follow-button"
+          button-class="follow-card-follow-button"
-          :disabled="inProgress"
+          :label-following="$t('user_card.follow_unfollow')"
-          :title="user.requested ? $t('user_card.follow_again') : ''"
+        />
-          @click="followUser"
-        >
-          <template v-if="inProgress">
-            {{ $t('user_card.follow_progress') }}
-          </template>
-          <template v-else-if="user.requested">
-            {{ $t('user_card.follow_sent') }}
-          </template>
-          <template v-else>
-            {{ $t('user_card.follow') }}
-          </template>
-        </button>
-        <button
-          v-else
-          class="btn btn-default follow-card-follow-button pressed"
-          :disabled="inProgress"
-          @click="unfollowUser"
-        >
-          <template v-if="inProgress">
-            {{ $t('user_card.follow_progress') }}
-          </template>
-          <template v-else>
-            {{ $t('user_card.follow_unfollow') }}
-          </template>
-        </button>
       </template>
     </div>
   </basic-user-card>