store failed experiment

src/components/emoji_input/emoji_input.js

@@ -114,7 +114,8 @@ const EmojiInput = {
       showPicker: false,
       temporarilyHideSuggestions: false,
       keepOpen: false,
-      disableClickOutside: false
+      disableClickOutside: false,
+      suggestions: []
     }
   },
   components: {
@@ -124,21 +125,6 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
-    suggestions () {
-      const firstchar = this.textAtCaret.charAt(0)
-      if (this.textAtCaret === firstchar) { return [] }
-      const matchedSuggestions = this.suggest(this.textAtCaret)
-      if (matchedSuggestions.length <= 0) {
-        return []
-      }
-      return take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }, index) => ({
-          ...rest,
-          // eslint-disable-next-line camelcase
-          img: imageUrl || '',
-          highlighted: index === this.highlighted
-        }))
-    },
     showSuggestions () {
       return this.focused &&
         this.suggestions &&
@@ -187,7 +173,25 @@ const EmojiInput = {
   },
   watch: {
     showSuggestions: function (newValue) {
+      console.log('showSuggestions watch', newValue, this.suggestions)
       this.$emit('shown', newValue)
+    },
+    textAtCaret: async function (textAtCaret) {
+      const firstchar = textAtCaret.charAt(0)
+      this.suggestions = []
+      if (textAtCaret === firstchar) return
+      const matchedSuggestions = await this.suggest(textAtCaret)
+      // Async, cancel if textAtCaret has been updated while waiting
+      if (this.textAtCaret !== textAtCaret) return
+      if (matchedSuggestions.length <= 0) return
+      this.suggestions = take(matchedSuggestions, 10)
+        .map(({ imageUrl, ...rest }, index) => ({
+          ...rest,
+          // eslint-disable-next-line camelcase
+          img: imageUrl || '',
+          highlighted: index === this.highlighted
+        }))
+      this.scrollIntoView()
     }
   },
   methods: {
@@ -341,6 +345,7 @@ 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

@@ -1,4 +1,3 @@
-import { debounce } from 'lodash'
 /**
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
@@ -11,19 +10,19 @@ import { debounce } from 'lodash'
  * doesn't support user linking you can just provide only emoji.
  */
 
-const debounceUserSearch = debounce((data, input) => {
+export default data => {
-  data.updateUsersList(input)
+  const emojiCurry = suggestEmoji(data.emoji)
-}, 500)
+  const usersCurry = suggestUsers(data.dispatch)
-
+  return input => {
-export default data => input => {
     const firstChar = input[0]
     if (firstChar === ':' && data.emoji) {
-    return suggestEmoji(data.emoji)(input)
+      return emojiCurry(input)
     }
-  if (firstChar === '@' && data.users) {
+    if (firstChar === '@' && data.dispatch) {
-    return suggestUsers(data)(input)
+      return usersCurry(input)
     }
     return []
+  }
 }
 
 export const suggestEmoji = emojis => input => {
@@ -57,9 +56,28 @@ export const suggestEmoji = emojis => input => {
     })
 }
 
-export const suggestUsers = data => input => {
+export const suggestUsers = (dispatch) => {
+  let suggestions = []
+  let previousQuery = ''
+  let timeout = null
+
+  const userSearch = (query) => dispatch('searchUsers', { query, saveUsers: false })
+  const debounceUserSearch = (query) => {
+    return new Promise((resolve, reject) => {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        userSearch(query).then(resolve).catch(reject)
+      }, 300)
+    })
+  }
+
+  return async input => {
     const noPrefix = input.toLowerCase().substr(1)
-  const users = data.users
+    if (previousQuery === noPrefix) return suggestions
+
+    suggestions = []
+    previousQuery = noPrefix
+    const users = await debounceUserSearch(noPrefix)
 
     const newUsers = users.filter(
       user =>
@@ -97,10 +115,8 @@ export const suggestUsers = data => input => {
       replacement: '@' + screen_name + ' '
     }))
 
-  // BE search users to get more comprehensive results
+    suggestions = newUsers || []
-  if (data.updateUsersList) {
+    return suggestions
-    debounceUserSearch(data, noPrefix)
-  }
-  return newUsers
     /* eslint-enable camelcase */
+  }
 }

src/components/post_status_form/post_status_form.js

@@ -159,8 +159,7 @@ const PostStatusForm = {
           ...this.$store.state.instance.emoji,
           ...this.$store.state.instance.customEmoji
         ],
-        users: this.$store.state.users.users,
+        dispatch: this.$store.dispatch
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {

src/modules/users.js

@@ -440,10 +440,10 @@ const users = {
         store.commit('setUserForNotification', notification)
       })
     },
-    searchUsers ({ rootState, commit }, { query }) {
+    searchUsers ({ rootState, commit }, { query, saveUsers = true }) {
       return rootState.api.backendInteractor.searchUsers({ query })
         .then((users) => {
-          commit('addNewUsers', users)
+          if (saveUsers) commit('addNewUsers', users)
           return users
         })
     },