use users state + fetching with delay

src/components/emoji_input/emoji_input.js

@@ -173,7 +173,6 @@ const EmojiInput = {
   },
   watch: {
     showSuggestions: function (newValue) {
-      console.log('showSuggestions watch', newValue, this.suggestions)
       this.$emit('shown', newValue)
     },
     textAtCaret: async function (textAtCaret) {
@@ -184,14 +183,16 @@ const EmojiInput = {
       // Async, cancel if textAtCaret has been updated while waiting
       if (this.textAtCaret !== textAtCaret) return
       if (matchedSuggestions.length <= 0) return
-      this.suggestions = take(matchedSuggestions, 10)
+      this.suggestions = take(matchedSuggestions, 5)
         .map(({ imageUrl, ...rest }, index) => ({
           ...rest,
           // eslint-disable-next-line camelcase
           img: imageUrl || '',
           highlighted: index === this.highlighted
         }))
-      this.scrollIntoView()
+    },
+    suggestions (newValue) {
+      this.$nextTick(this.resize)
     }
   },
   methods: {
@@ -345,7 +346,6 @@ const EmojiInput = {
         const { offsetHeight } = this.input.elm
         const { picker } = this.$refs
         const pickerBottom = picker.$el.getBoundingClientRect().bottom
-        console.log('setting bottom', pickerBottom > window.innerHeight)
         if (pickerBottom > window.innerHeight) {
           picker.$el.style.top = 'auto'
           picker.$el.style.bottom = offsetHeight + 'px'

src/components/emoji_input/suggestor.js

@@ -12,13 +12,13 @@
 
 export default data => {
   const emojiCurry = suggestEmoji(data.emoji)
-  const usersCurry = suggestUsers(data.dispatch)
+  const usersCurry = data.store && suggestUsers(data.store)
   return input => {
     const firstChar = input[0]
     if (firstChar === ':' && data.emoji) {
       return emojiCurry(input)
     }
-    if (firstChar === '@' && data.dispatch) {
+    if (firstChar === '@' && usersCurry) {
       return usersCurry(input)
     }
     return []
@@ -56,18 +56,24 @@ export const suggestEmoji = emojis => input => {
     })
 }
 
-export const suggestUsers = (dispatch) => {
+export const suggestUsers = ({ dispatch, state }) => {
   let suggestions = []
   let previousQuery = ''
   let timeout = null
+  let cancelUserSearch = null
 
-  const userSearch = (query) => dispatch('searchUsers', { query, saveUsers: false })
+  const userSearch = (query) => dispatch('searchUsers', { query })
   const debounceUserSearch = (query) => {
+    cancelUserSearch && cancelUserSearch()
     return new Promise((resolve, reject) => {
       clearTimeout(timeout)
       timeout = setTimeout(() => {
         userSearch(query).then(resolve).catch(reject)
       }, 300)
+      cancelUserSearch = () => {
+        clearTimeout(timeout)
+        resolve([])
+      }
     })
   }
 
@@ -77,9 +83,15 @@ export const suggestUsers = (dispatch) => {
 
     suggestions = []
     previousQuery = noPrefix
-    const users = await debounceUserSearch(noPrefix)
+    // Fetch more and wait, don't fetch if there's the 2nd @ because
+    // the backend user search can't deal with it.
+    // Reference semantics make it so that we get the updated data after
+    // the await.
+    if (!noPrefix.includes('@')) {
+      await debounceUserSearch(noPrefix)
+    }
 
-    const newUsers = users.filter(
+    const newSuggestions = state.users.users.filter(
       user =>
         user.screen_name.toLowerCase().startsWith(noPrefix) ||
         user.name.toLowerCase().startsWith(noPrefix)
@@ -114,9 +126,9 @@ export const suggestUsers = (dispatch) => {
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '
     }))
-
-    suggestions = newUsers || []
-    return suggestions
     /* eslint-enable camelcase */
+
+    suggestions = newSuggestions || []
+    return suggestions
   }
 }

src/components/post_status_form/post_status_form.js

@@ -159,7 +159,7 @@ const PostStatusForm = {
           ...this.$store.state.instance.emoji,
           ...this.$store.state.instance.customEmoji
         ],
-        dispatch: this.$store.dispatch
+        store: this.$store
       })
     },
     emojiSuggestor () {

src/components/settings_modal/tabs/profile_tab.js

@@ -68,8 +68,7 @@ const ProfileTab = {
           ...this.$store.state.instance.emoji,
           ...this.$store.state.instance.customEmoji
         ],
-        users: this.$store.state.users.users,
+        store: this.$store
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {
@@ -79,10 +78,7 @@ const ProfileTab = {
       ] })
     },
     userSuggestor () {
-      return suggestor({
+      return suggestor({ store: this.$store })
-        users: this.$store.state.users.users,
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
-      })
     },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits