Separate blockButton to own component

Add transform object rest spread babel plugin

Author: mattwr18

components/Global/Elements/BlockButton/BlockButton.vue

@@ -1,4 +1,63 @@
 <template>
+  <div v-if="service === 'users'" class="columns is-mobile field has-text-centered">
+    <div v-if="BlockButton">
+      <div class="column control has-text-centered">
+        <hc-button color="button"
+          :disabled="blacklistPending"
+          :isLoading="blacklistPending"
+          @click="toggleBlacklist">
+          <template v-if="isBlacklisted">
+            <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
+          </template>
+          <template v-else>
+            <hc-icon icon="ban" class="icon-left" /> {{ $t('component.blacklist.buttonLabelBlock') }}
+          </template>
+        </hc-button>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+  import {mapGetters} from 'vuex'
+  import blacklistable from '../../../mixins/blacklistable'
+
+  export default {
+    name: 'hc-block-button',
+    mixins: [blacklistable],
+    props: {
+      BlockButton: {
+        type: Boolean,
+        default: false
+      },
+      entity: {
+        type: Object,
+        required: true
+      },
+      service: {
+        type: String, // users, organizations
+        default: 'users'
+      }
+    },
+    data () {
+      return {
+        connected: false,
+        ready: false
+      }
+    },
+    computed: {
+      ...mapGetters({
+        loggedInUser: 'auth/user'
+      })
+    },
+    methods: {
+      author(){
+        return this.entity;
+      },
+    }
+  }
 </script>
+<style lang="scss" scoped>
+  @import "assets/styles/utilities";
+
+
+</style>

components/Global/Elements/Follow/FollowButtons.vue

@@ -19,7 +19,7 @@
         <hc-button color="button is-fullwidth"
                    :class="{'is-primary': !follow.isPending && !follow.isFollowing}"
                    @click="toggleFollow"
-                   :disabled="follow.isPending || isBlacklisted"
+                   :disabled="follow.isPending"
                    :isLoading="follow.isPending">
           <template v-if="follow.isFollowing">
             <hc-icon icon="check" class="icon-left" /> {{ $t('component.follow.buttonLabelUnFollow') }}
@@ -40,31 +40,14 @@
         </hc-button>
       </div>
     </div>
-    <div v-if="service === 'users'" class="columns is-mobile field has-text-centered">
-      <div class="column control has-text-centered">
-        <hc-button color="button"
-                   :disabled="blacklistPending || follow.isFollowing"
-                   :isLoading="blacklistPending"
-                   @click="toggleBlacklist">
-          <template v-if="isBlacklisted">
-            <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
-          </template>
-          <template v-else>
-            <hc-icon icon="ban" class="icon-left" /> {{ $t('component.blacklist.buttonLabelBlock') }}
-          </template>
-            </hc-button>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
   import { mapGetters } from 'vuex'
-  import blacklistable from '~/components/mixins/blacklistable'
 
   export default {
     name: 'hc-follow-buttons',
-    mixins: [blacklistable],
     props: {
       showButtons: {
         type: Boolean,

package.json

@@ -51,6 +51,7 @@
     "@nuxtjs/pwa": "~2.0.5",
     "axios": "^0.18.0",
     "babel-eslint": "~8.2.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-vue-app": "~2.0.0",
     "body-parser": "~1.18.3",
     "body-scroll-lock": "^2.4.6",

pages/profile/_slug.vue

@@ -41,6 +41,10 @@
           <hc-follow-buttons v-if="user"
                              :showButtons="!isOwner"
                              :entity="user" />
+        
+          <hc-block-button v-if="user"
+                           :BlockButton="!isOwner"
+                           :entity="user" />
           <div v-if="false" class="hc-shortcuts level under-construction">
             <!-- TODO: replace the cdn images with local hc icons -->
             <div class="level-item has-text-centered">
@@ -140,6 +144,7 @@
   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'
@@ -150,6 +155,7 @@
     components: {
       'hc-follower-item': FollowerItem,
       'hc-follow-buttons': FollowButtons,
+      'hc-block-button': BlockButton,
       'hc-profile-badges': Badges,
       'hc-map': Map,
       'hc-timeline': Timeline

test/helpers/setup.js

@@ -6,4 +6,4 @@ require('browser-env')()
 // Setup vue files to be processed by `require-extension-hooks-vue`
 hooks('vue').plugin('vue').push()
 // Setup vue and js files to be processed by `require-extension-hooks-babel`
-hooks(['vue', 'js']).plugin('babel').push()
+hooks(['vue', 'js']).plugin('babel', { plugins: ['transform-object-rest-spread'] }).push()