2 files changed, 48 insertions, 0 deletions
diff --git a/src/components/subscribe_button/subscribe_button.js b/src/components/subscribe_button/subscribe_button.js
new file mode 100644
index 00000000..e3a2842c
--- /dev/null
+++ b/src/components/subscribe_button/subscribe_button.js
@@ -0,0 +1,26 @@
+export default {
+  props: [ 'user' ],
+  data () {
+    return {
+      inProgress: false
+    }
+  },
+  methods: {
+    subscribe () {
+      this.inProgress = true
+      this.$store.state.api.backendInteractor.subscribeUser(this.user.id)
+        .then((updated) => {
+          console.log(updated)
+          this.inProgress = false
+        })
+    },
+    unsubscribe () {
+      this.inProgress = true
+      this.$store.state.api.backendInteractor.unsubscribeUser(this.user.id)
+        .then((updated) => {
+          console.log(updated)
+          this.inProgress = false
+        })
+    }
+  }
+}
diff --git a/src/components/subscribe_button/subscribe_button.vue b/src/components/subscribe_button/subscribe_button.vue
new file mode 100644
index 00000000..f7dd8c61
--- /dev/null
+++ b/src/components/subscribe_button/subscribe_button.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <button
+      @click.prevent="subscribe"
+      class="btn btn-default follow-card-follow-button"
+      :disabled="inProgress"
+      v-if="!user.subscribing"
+    >
+      Subscribe
+    </button>
+    <button
+      @click.prevent="unsubscribe"
+      class="btn btn-default follow-card-follow-button pressed"
+      :disabled="inProgress"
+      v-else
+    >
+      Subscribing!
+    </button>
+  </div>
+</template>
+
+<script src="./subscribe_button.js"></script>