Make BlockButton a part of FollowButtons

Author: roschaefer

components/Global/Elements/Follow/FollowButtons.vue

@@ -30,17 +30,21 @@
         </hc-button>
       </div>
       <div v-if="service === 'users'" class="column is-mobile field has-text-centered">
-        <slot></slot>
+        <hc-block-button :foreignEntity="entity" :confirmation="confirmUnfollow"/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
   import { mapGetters } from 'vuex'
+  import BlockButton from '~/components/Global/Elements/BlockButton/BlockButton'
 
   export default {
     name: 'hc-follow-buttons',
+    components: {
+      'hc-block-button': BlockButton,
+    },
     props: {
       showButtons: {
         type: Boolean,
@@ -76,6 +80,20 @@
       })
     },
     methods: {
+      confirmUnfollow(next){
+        const message = this.$t('component.blacklist.confirmUnfollowMessage', {
+          name: this.entity.name || this.$t('component.contribution.creatorUnknown')
+        })
+        this.$dialog.confirm({
+          title: this.$t('component.blacklist.confirmUnfollowTitle'),
+          message,
+          confirmText: this.$t('button.yes'),
+          cancelText: this.$t('button.cancel'),
+          type: 'is-danger',
+          hasIcon: true,
+          onConfirm: () => { next() }
+        })
+      },
       async toggleFollow () {
         if (this.follow._id) {
           await this.$store.dispatch('connections/unfollow', {

pages/profile/_slug.vue

@@ -41,7 +41,6 @@
           <hc-follow-buttons v-if="user"
                              :showButtons="!isOwner"
                              :entity="user">
-            <hc-block-button v-if="user && !isOwner" :foreignEntity="user" :confirmation="confirmUnfollow"/>
           </hc-follow-buttons>
 
           <div v-if="false" class="hc-shortcuts level under-construction">
@@ -143,7 +142,6 @@
   import {mapGetters} from 'vuex'
   import FollowerItem from '~/components/Profile/FollowerItem/FollowerItem.vue'
   import FollowButtons from '~/components/Global/Elements/Follow/FollowButtons.vue'
-  import BlockButton from '~/components/Global/Elements/BlockButton/BlockButton'
   import Map from '~/components/Map/Map.vue'
   import Timeline from '~/components/layout/Timeline'
   import Badges from '~/components/Profile/Badges/Badges'
@@ -154,7 +152,6 @@
     components: {
       'hc-follower-item': FollowerItem,
       'hc-follow-buttons': FollowButtons,
-      'hc-block-button': BlockButton,
       'hc-profile-badges': Badges,
       'hc-map': Map,
       'hc-timeline': Timeline
@@ -266,20 +263,6 @@
       }
     },
     methods: {
-      confirmUnfollow(next){
-        const message = this.$t('component.blacklist.confirmUnfollowMessage', {
-          name: this.user.name || this.$t('component.contribution.creatorUnknown')
-        })
-        this.$dialog.confirm({
-          title: this.$t('component.blacklist.confirmUnfollowTitle'),
-          message,
-          confirmText: this.$t('button.yes'),
-          cancelText: this.$t('button.cancel'),
-          type: 'is-danger',
-          hasIcon: true,
-          onConfirm: () => { next() }
-        })
-      },
       async onCoverUploadCompleted (value) {
         this.form.coverImg = value
         const user = await this.$store.dispatch('auth/patch', {