Add new FollowCard component

3 files changed, 88 insertions, 3 deletions

diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
new file mode 100644
index 00000000..85e6a6d2
--- /dev/null
+++ b/src/components/follow_card/follow_card.js
@@ -0,0 +1,45 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+
+const FollowCard = {
+  props: [
+    'user',
+    'noFollowsYou'
+  ],
+  data () {
+    return {
+      progress: false,
+      requestSent: false,
+      updated: false
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  computed: {
+    isMe () { return this.$store.state.users.currentUser.id === this.user.id },
+    following () { return this.updated ? this.updated.following : this.user.following },
+    showFollow () {
+      return !this.following || this.updated && !this.updated.following
+    }
+  },
+  methods: {
+    followUser () {
+      this.progress = true
+      requestFollow(this.user, this.$store).then(({ sent, updated }) => {
+        this.progress = false
+        this.requestSent = sent
+        this.updated = updated
+      })
+    },
+    unfollowUser () {
+      this.progress = true
+      requestUnfollow(this.user, this.$store).then(({ updated }) => {
+        this.progress = false
+        this.updated = updated
+      })
+    }
+  }
+}
+
+export default FollowCard
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
new file mode 100644
index 00000000..dcb85d62
--- /dev/null
+++ b/src/components/follow_card/follow_card.vue
@@ -0,0 +1,40 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <div class="follow-box">
+        <button
+          v-if="showFollow"
+          class="btn btn-default"
+          @click="followUser"
+          :disabled="progress"
+          :title="requestSent ? $t('user_card.follow_again') : ''"
+        >
+          <template v-if="progress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else-if="requestSent">
+            {{ $t('user_card.follow_sent') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow') }}
+          </template>
+        </button>
+        <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="progress">
+          <template v-if="progress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow_unfollow') }}
+          </template>
+        </button>
+      </div>
+    </template>
+    <template slot="third-area">
+      <span class="faint" v-if="!noFollowsYou && user.follows_you">
+        {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
+      </span>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./follow_card.js"></script>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 643727de..7708141c 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,7 +1,7 @@
 import { compose } from 'vue-compose'
 import get from 'lodash/get'
 import UserCardContent from '../user_card_content/user_card_content.vue'
-import UserCard from '../user_card/user_card.vue'
+import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import withList from '../../hocs/with_list/with_list'
@@ -15,7 +15,7 @@ const FollowerList = compose(
     additionalPropNames: ['userId']
   }),
   withList({ getEntryProps: user => ({ user }) })
-)(UserCard)
+)(FollowCard)
 
 const FriendList = compose(
   withLoadMore({
@@ -26,7 +26,7 @@ const FriendList = compose(
     additionalPropNames: ['userId']
   }),
   withList({ getEntryProps: user => ({ user }) })
-)(UserCard)
+)(FollowCard)
 
 const UserProfile = {
   data () {