From 390b2bcfee4842ca10a53e036da7f1a1076042cb Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Feb 2019 23:34:24 -0500
Subject: [PATCH] Add FollowRequestCard component

---
 .../follow_request_card.js                    | 20 ++++++++++++++
 .../follow_request_card.vue                   | 27 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/follow_request_card/follow_request_card.js
 create mode 100644 src/components/follow_request_card/follow_request_card.vue

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
new file mode 100644
index 00000000..1a00a1c1
--- /dev/null
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -0,0 +1,20 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const FollowRequestCard = {
+  props: ['user'],
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    approveUser () {
+      this.$store.state.api.backendInteractor.approveUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
+    },
+    denyUser () {
+      this.$store.state.api.backendInteractor.denyUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
+    }
+  }
+}
+
+export default FollowRequestCard
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
new file mode 100644
index 00000000..945812fc
--- /dev/null
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -0,0 +1,27 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="third-area">
+      <div class="follow-request-card-action-buttons-container">
+        <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
+        <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
+      </div>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./follow_request_card.js"></script>
+
+<style lang="scss">
+.follow-request-card-action-buttons-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  button {
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+    flex: 1 1;
+    max-width: 12em;
+    min-width: 8em;
+  }
+}
+</style>