3 files changed, 29 insertions, 5 deletions
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 8788fb62..11fa27b4 100644
--- a/src/components/block_card/block_card.js
+++ b/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
+      })
     }
   }
 }
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 06fc67fc..ed7fe30b 100644
--- a/src/components/block_card/block_card.vue
+++ b/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>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 3bcecdf4..621dcd4b 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,7 +9,7 @@ import BlockCard from '../block_card/block_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, entry => ({ user: entry }))
+const BlockList = withList(BlockCard, entry => ({ userId: entry.id }))
 const BlockListWithLoadMore = withLoadMore(
   BlockList,
   (props, $store) => $store.dispatch('fetchBlocks'),