make UserAutoSuggest component more generic

src/components/user_autosuggest/user_autosuggest.js

@@ -1,46 +1,45 @@
-import reject from 'lodash/reject'
-import map from 'lodash/map'
 import BlockCard from '../block_card/block_card.vue'
-import userSearchApi from '../../services/new_api/user_search.js'
 
 const debounceMilliseconds = 500
 
 export default {
+  props: {
+    query: {    // function to query results and return a promise
+      type: Function,
+      required: true
+    },
+    filter: {   // function to filter results in real time
+      type: Function
+    }
+  },
   components: {
     BlockCard
   },
   data () {
     return {
-      query: '',
+      term: '',
-      results: [],
       timeout: null,
+      results: [],
       resultsVisible: false
     }
   },
   computed: {
     filtered () {
-      return reject(this.results, (userId) => {
+      return this.filter ? this.filter(this.results) : this.results
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
-      })
     }
   },
   watch: {
-    query (val) {
+    term (val) {
       this.fetchResults(val)
     }
   },
   methods: {
-    fetchResults (query) {
+    fetchResults (term) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
         this.results = []
-        if (query) {
+        if (term) {
-          userSearchApi.search({query, store: this.$store})
+          this.query(term).then((results) => { this.results = results })
-            .then((users) => {
-              this.$store.dispatch('addNewUsers', users)
-              this.results = map(users, 'id')
-            })
         }
       }, debounceMilliseconds)
     },

src/components/user_autosuggest/user_autosuggest.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
-    <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
+    <input v-model="term" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
     <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
       <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
     </div>

src/components/user_settings/user_settings.js

@@ -1,6 +1,8 @@
 import { compose } from 'vue-compose'
 import unescape from 'lodash/unescape'
 import get from 'lodash/get'
+import map from 'lodash/map'
+import reject from 'lodash/reject'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
@@ -12,6 +14,7 @@ import EmojiInput from '../emoji-input/emoji-input.vue'
 import UserAutoSuggest from '../user_autosuggest/user_autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
+import userSearchApi from '../../services/new_api/user_search.js'
 
 const BlockList = compose(
   withSubscription({
@@ -336,6 +339,19 @@ const UserSettings = {
       if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
         this.$store.dispatch('revokeToken', id)
       }
+    },
+    filterUnblockedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    queryUserIds (query) {
+      return userSearchApi.search({query, store: this.$store})
+        .then((users) => {
+          this.$store.dispatch('addNewUsers', users)
+          return map(users, 'id')
+        })
     }
   }
 }

src/components/user_settings/user_settings.vue

@@ -196,7 +196,7 @@
 
         <div :label="$t('settings.blocks_tab')">
           <div class="profile-edit-usersearch-wrapper">
-            <UserAutoSuggest />
+            <UserAutoSuggest :filter="filterUnblockedUsers" :query="queryUserIds" />
           </div>
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>