diff options
| -rw-r--r-- | src/components/emoji_input/emoji_input.js | 8 | ||||
| -rw-r--r-- | src/components/emoji_input/suggestor.js | 28 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 2 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/profile_tab.js | 8 |
4 files changed, 27 insertions, 19 deletions
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 7fe25ff4..16243a56 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/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' diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 9bf53183..0d268f85 100644 --- a/src/components/emoji_input/suggestor.js +++ b/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 + ' ' })) + /* eslint-enable camelcase */ - suggestions = newUsers || [] + suggestions = newSuggestions || [] return suggestions - /* eslint-enable camelcase */ } } diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index e38f1c0c..4148381c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/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 () { diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index a3e4feaf..a4fed629 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/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, - updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) + store: this.$store }) }, emojiSuggestor () { @@ -79,10 +78,7 @@ const ProfileTab = { ] }) }, userSuggestor () { - return suggestor({ - users: this.$store.state.users.users, - updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) - }) + return suggestor({ store: this.$store }) }, fieldsLimits () { return this.$store.state.instance.fieldsLimits |