Drop the confirmation just disable the button

Much easier

Author: roschaefer

components/Global/Elements/BlockButton/BlockButton.test.js

@@ -10,7 +10,8 @@ const propsData = {
   foreignEntity: {
     _id: 4711,
     name: 'author'
-  }
+  },
+  isFollowing: false
 }
 
 const mocks = { $t: () => {} }
@@ -23,6 +24,7 @@ describe('BlockButton.vue', () => {
 
   beforeEach(() => {
     getters = {
+      'feathers-vuex-usersettings/isBlacklisted': () => () => false,
       'feathers-vuex-usersettings/isPending': () => false,
       'feathers-vuex-usersettings/current': () => { return { blacklist: [] } }
     }
@@ -70,11 +72,7 @@ describe('BlockButton.vue', () => {
 
     describe('is blacklisted', () => {
       beforeEach(() => {
-        getters['feathers-vuex-usersettings/current'] = () => {
-          return {
-            blacklist: [4711]
-          }
-        }
+        getters['feathers-vuex-usersettings/isBlacklisted'] = () => () => true
         store = new Vuex.Store({state: {}, getters, actions})
         wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
       })
@@ -100,39 +98,29 @@ describe('BlockButton.vue', () => {
       expect(actions['feathers-vuex-usersettings/toggleBlacklist']).toHaveBeenCalled()
     })
 
-    describe('given a confirmation callback', () => {
-      let props
-      const testCaseAction = () => {
-        props = Object.assign({}, propsData, {
-          confirmation: jest.fn()
-        })
-        wrapper = mount(BlockButton, { store,
-          localVue,
-          mocks: { $t: () => {}, $snackbar: { open () { } } },
-          propsData: props
+    describe('isFollowed === true', () => {
+      beforeEach(() => {
+        const props = Object.assign({}, propsData, {
+          isFollowing: true
         })
-        wrapper.find('button').trigger('click')
-      }
+        wrapper = shallowMount(BlockButton, { store, localVue, propsData: props, mocks })
+      })
 
-      describe('not blacklisted', () => {
-        test('click just unblocks without confirmation', () => {
-          testCaseAction()
-          expect(props.confirmation).toHaveBeenCalledTimes(1)
-        })
+      test('is disabled', () => {
+        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual('true')
       })
+    })
 
-      describe('is blacklisted', () => {
-        beforeEach(() => {
-          getters['feathers-vuex-usersettings/current'] = () => { return { blacklist: [4711] } }
-          store = new Vuex.Store({
-            state: {}, getters, actions
-          })
+    describe('isFollowed === false', () => {
+      beforeEach(() => {
+        const props = Object.assign({}, propsData, {
+          isFollowing: false
         })
+        wrapper = shallowMount(BlockButton, { store, localVue, propsData: props, mocks })
+      })
 
-        test('click confirms before blocking', () => {
-          testCaseAction()
-          expect(props.confirmation).not.toHaveBeenCalled()
-        })
+      test('is disabled', () => {
+        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual(undefined)
       })
     })
   })

components/Global/Elements/BlockButton/BlockButton.vue

@@ -1,8 +1,8 @@
 <template>
   <hc-button color="button"
-             :disabled="isPending"
+             :disabled="isPending || isFollowing"
              :isLoading="isPending"
-             @click="click">
+             @click="toggleBlacklist">
     <template v-if="isBlacklisted()">
       <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
     </template>
@@ -28,25 +28,18 @@ export default {
       type: Object,
       required: true
     },
-    confirmation: {
-      type: Function
+    isFollowing: {
+      required: true
     }
   },
   computed: {
     ...mapGetters({
       isPending: 'feathers-vuex-usersettings/isPending',
-      currentUserSettings: 'feathers-vuex-usersettings/current'
     })
   },
   methods: {
     isBlacklisted () {
-      let { blacklist } = this.currentUserSettings || {}
-      return blacklist && blacklist.includes(this.foreignEntity._id)
-    },
-    async click(){
-      if (this.confirmation && !this.isBlacklisted()) {
-        return await this.confirmation(this.toggleBlacklist)
-      } else return await this.toggleBlacklist()
+      return this.$store.getters['feathers-vuex-usersettings/isBlacklisted'](this.foreignEntity)
     },
     async toggleBlacklist() {
       let message

components/Global/Elements/Follow/FollowButtons.test.js

@@ -1,4 +1,4 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import FollowButtons from './FollowButtons'
 
@@ -33,7 +33,7 @@ describe('FollowButtons.vue', () => {
       },
       'feathers-vuex-usersettings/current': () => { return {} },
       'feathers-vuex-usersettings/isPending': () => false,
-      'auth/user': () => { return currentUser },
+      'auth/user': () => { return currentUser }
     }
     actions = {
       'connections/syncFollow': () => {
@@ -54,14 +54,31 @@ describe('FollowButtons.vue', () => {
       propsData.showButtons = true
     })
 
-    describe('click', () => {
-      test('calls `click` method', () => {
-        const methods = {
-          click: jest.fn()
-        }
-        wrapper = mount(FollowButtons, { store, localVue, propsData, mocks, methods })
-        wrapper.find('button').trigger('click')
-        expect(methods.click).toHaveBeenCalled()
+    describe('entity is not blacklisted', () => {
+      beforeEach(() => {
+        getters['feathers-vuex-usersettings/isBlacklisted'] = () => () => false
+        store = new Vuex.Store({
+          state: {}, getters, actions
+        })
+      })
+
+      test('follow button is enabled', () => {
+        wrapper = shallowMount(FollowButtons, { store, localVue, propsData, mocks })
+        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual(undefined)
+      })
+    })
+
+    describe('entity is blacklisted', () => {
+      beforeEach(() => {
+        getters['feathers-vuex-usersettings/isBlacklisted'] = () => () => true
+        store = new Vuex.Store({
+          state: {}, getters, actions
+        })
+      })
+
+      test('follow button is disabled', () => {
+        wrapper = shallowMount(FollowButtons, { store, localVue, propsData, mocks })
+        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual('true')
       })
     })
   })

components/Global/Elements/Follow/FollowButtons.vue

@@ -18,8 +18,8 @@
       <div class="column control has-text-centered">
         <hc-button color="button is-fullwidth"
                    :class="{'is-primary': !follow.isPending && !follow.isFollowing}"
-                   @click="click"
-                   :disabled="follow.isPending"
+                   @click="toggleFollow"
+                   :disabled="follow.isPending || this.isBlacklisted()"
                    :isLoading="follow.isPending">
           <template v-if="follow.isFollowing">
             <hc-icon icon="check" class="icon-left" /> {{ $t('component.follow.buttonLabelUnFollow') }}
@@ -30,7 +30,7 @@
         </hc-button>
       </div>
       <div v-if="service === 'users'" class="column is-mobile field has-text-centered">
-        <hc-block-button :foreignEntity="entity" :confirmation="confirmUnfollow"/>
+        <hc-block-button :foreignEntity="entity" :isFollowing="follow.isFollowing"/>
       </div>
     </div>
   </div>
@@ -84,22 +84,8 @@
       })
     },
     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 click(){
-        return this.toggleFollow();
+      isBlacklisted(){
+        return this.$store.getters['feathers-vuex-usersettings/isBlacklisted'](this.entity)
       },
       async toggleFollow () {
         if (this.follow._id) {

store/services/usersettings.js

@@ -9,6 +9,11 @@ let servicePlugin = (feathersClient) => {
       blacklist: []
     },
     getters: {
+      isBlacklisted: (state) => (entity) => {
+        let current = state.copy
+        let { blacklist } = current || {}
+        return blacklist && blacklist.includes(entity._id)
+      },
       isPending: (state) => {
         return (
           state.current ||