Complete functionality of BlockCard

src/components/block_card/block_card.js

@@ -1,11 +1,18 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
-  props: ['user'],
+  props: ['userId'],
   data () {
     return {
-      progress: false,
-      updated: false
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    blocked () {
+      return this.user.statusnet_blocking
     }
   },
   components: {
@@ -14,6 +21,15 @@ const BlockCard = {
   methods: {
     unblockUser () {
       this.progress = true
+      this.$store.dispatch('unblockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    blockUser () {
+      this.progress = true
+      this.$store.dispatch('blockUser', this.user.id).then(() => {
+        this.progress = false
+      })
     }
   }
 }

src/components/block_card/block_card.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-user-card :user="user">
     <template slot="secondary-area">
-      <button class="btn btn-default" @click="unblockUser" :disabled="progress">
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
         <template v-if="progress">
           {{ $t('user_card.unblock_progress') }}
         </template>
@@ -9,6 +9,14 @@
           {{ $t('user_card.unblock') }}
         </template>
       </button>
+      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.block_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.block') }}
+        </template>
+      </button>
     </template>
   </basic-user-card>
 </template>