From dd3c8631bf0ec21735d97c41e9e64d0d05643dbc Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 17 Nov 2020 17:46:26 +0200 Subject: [PATCH 1/6] store failed experiment --- src/components/emoji_input/emoji_input.js | 37 ++--- src/components/emoji_input/suggestor.js | 130 ++++++++++-------- .../post_status_form/post_status_form.js | 3 +- src/modules/users.js | 4 +- 4 files changed, 97 insertions(+), 77 deletions(-) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 87303d08..7fe25ff4 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/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' diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 8330345b..9bf53183 100644 --- a/src/components/emoji_input/suggestor.js +++ b/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) => { - data.updateUsersList(input) -}, 500) - -export default data => input => { - const firstChar = input[0] - if (firstChar === ':' && data.emoji) { - return suggestEmoji(data.emoji)(input) +export default data => { + const emojiCurry = suggestEmoji(data.emoji) + const usersCurry = suggestUsers(data.dispatch) + return input => { + const firstChar = input[0] + if (firstChar === ':' && data.emoji) { + return emojiCurry(input) + } + if (firstChar === '@' && data.dispatch) { + return usersCurry(input) + } + return [] } - if (firstChar === '@' && data.users) { - return suggestUsers(data)(input) - } - return [] } export const suggestEmoji = emojis => input => { @@ -57,50 +56,67 @@ export const suggestEmoji = emojis => input => { }) } -export const suggestUsers = data => input => { - const noPrefix = input.toLowerCase().substr(1) - const users = data.users +export const suggestUsers = (dispatch) => { + let suggestions = [] + let previousQuery = '' + let timeout = null - const newUsers = users.filter( - user => - user.screen_name.toLowerCase().startsWith(noPrefix) || - user.name.toLowerCase().startsWith(noPrefix) - - /* taking only 20 results so that sorting is a bit cheaper, we display - * only 5 anyway. could be inaccurate, but we ideally we should query - * backend anyway - */ - ).slice(0, 20).sort((a, b) => { - let aScore = 0 - let bScore = 0 - - // Matches on screen name (i.e. user@instance) makes a priority - aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 - bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 - - // Matches on name takes second priority - aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 - bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 - - const diff = (bScore - aScore) * 10 - - // Then sort alphabetically - const nameAlphabetically = a.name > b.name ? 1 : -1 - const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1 - - return diff + nameAlphabetically + screenNameAlphabetically - /* eslint-disable camelcase */ - }).map(({ screen_name, name, profile_image_url_original }) => ({ - displayText: screen_name, - detailText: name, - imageUrl: profile_image_url_original, - replacement: '@' + screen_name + ' ' - })) - - // BE search users to get more comprehensive results - if (data.updateUsersList) { - debounceUserSearch(data, noPrefix) + 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) + if (previousQuery === noPrefix) return suggestions + + suggestions = [] + previousQuery = noPrefix + const users = await debounceUserSearch(noPrefix) + + const newUsers = users.filter( + user => + user.screen_name.toLowerCase().startsWith(noPrefix) || + user.name.toLowerCase().startsWith(noPrefix) + + /* taking only 20 results so that sorting is a bit cheaper, we display + * only 5 anyway. could be inaccurate, but we ideally we should query + * backend anyway + */ + ).slice(0, 20).sort((a, b) => { + let aScore = 0 + let bScore = 0 + + // Matches on screen name (i.e. user@instance) makes a priority + aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 + bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 + + // Matches on name takes second priority + aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 + bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 + + const diff = (bScore - aScore) * 10 + + // Then sort alphabetically + const nameAlphabetically = a.name > b.name ? 1 : -1 + const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1 + + return diff + nameAlphabetically + screenNameAlphabetically + /* eslint-disable camelcase */ + }).map(({ screen_name, name, profile_image_url_original }) => ({ + displayText: screen_name, + detailText: name, + imageUrl: profile_image_url_original, + replacement: '@' + screen_name + ' ' + })) + + suggestions = newUsers || [] + return suggestions + /* eslint-enable camelcase */ } - return newUsers - /* 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 3ff4a3c8..e38f1c0c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/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, - updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) + dispatch: this.$store.dispatch }) }, emojiSuggestor () { diff --git a/src/modules/users.js b/src/modules/users.js index 9245db5c..13df9df4 100644 --- a/src/modules/users.js +++ b/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 }) }, From 0f386ccbc7115fd1d74615377beca9982dec00bf Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 18 Nov 2020 18:43:24 +0200 Subject: [PATCH 2/6] use users state + fetching with delay --- src/components/emoji_input/emoji_input.js | 8 ++--- src/components/emoji_input/suggestor.js | 30 +++++++++++++------ .../post_status_form/post_status_form.js | 2 +- .../settings_modal/tabs/profile_tab.js | 8 ++--- 4 files changed, 28 insertions(+), 20 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 + ' ' })) - - suggestions = newUsers || [] - return suggestions /* eslint-enable camelcase */ + + suggestions = newSuggestions || [] + return suggestions } } 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 From 1495db084ae49cc5133678d61e19d90333cbe31d Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 19 Nov 2020 11:37:06 +0200 Subject: [PATCH 3/6] fix keyboard highlight --- src/components/emoji_input/emoji_input.js | 5 ++--- src/components/emoji_input/emoji_input.vue | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 16243a56..d32e19bf 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -184,11 +184,10 @@ const EmojiInput = { if (this.textAtCaret !== textAtCaret) return if (matchedSuggestions.length <= 0) return this.suggestions = take(matchedSuggestions, 5) - .map(({ imageUrl, ...rest }, index) => ({ + .map(({ imageUrl, ...rest }) => ({ ...rest, // eslint-disable-next-line camelcase - img: imageUrl || '', - highlighted: index === this.highlighted + img: imageUrl || '' })) }, suggestions (newValue) { diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 224e72cf..107e16c1 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -37,7 +37,7 @@ v-for="(suggestion, index) in suggestions" :key="index" class="autocomplete-item" - :class="{ highlighted: suggestion.highlighted }" + :class="{ highlighted: index === highlighted }" @click.stop.prevent="onClick($event, suggestion)" > From 1cd222d85ce578fbbefb51f9d0b6df569a33bf4e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 19 Nov 2020 11:42:30 +0200 Subject: [PATCH 4/6] changelog mention --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e4bf822..17fb1de8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Fixed - Fixed the occasional bug where screen would scroll 1px when typing into a reply form - Fixed custom emoji not working in profile field names +- Fixed username autocomplete being jumpy ## [2.2.1] - 2020-11-11 From 419df9d44673bf1abe3cda7ba6cafee9dd6eaba4 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 19 Nov 2020 12:35:21 +0200 Subject: [PATCH 5/6] update some documentation --- src/components/emoji_input/emoji_input.js | 12 ++++++------ src/components/emoji_input/suggestor.js | 8 ++------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index d32e19bf..3deeb6c8 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -175,13 +175,13 @@ const EmojiInput = { showSuggestions: function (newValue) { this.$emit('shown', newValue) }, - textAtCaret: async function (textAtCaret) { - const firstchar = textAtCaret.charAt(0) + textAtCaret: async function (newWord) { + const firstchar = newWord.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 (newWord === firstchar) return + const matchedSuggestions = await this.suggest(newWord) + // Async: cancel if textAtCaret has changed during wait + if (this.textAtCaret !== newWord) return if (matchedSuggestions.length <= 0) return this.suggestions = take(matchedSuggestions, 5) .map(({ imageUrl, ...rest }) => ({ diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 0d268f85..14a2b41e 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -57,6 +57,8 @@ export const suggestEmoji = emojis => input => { } export const suggestUsers = ({ dispatch, state }) => { + // Keep some persistent values in closure, most importantly for the + // custom debounce to work. Lodash debounce does not return a promise. let suggestions = [] let previousQuery = '' let timeout = null @@ -66,7 +68,6 @@ export const suggestUsers = ({ dispatch, state }) => { const debounceUserSearch = (query) => { cancelUserSearch && cancelUserSearch() return new Promise((resolve, reject) => { - clearTimeout(timeout) timeout = setTimeout(() => { userSearch(query).then(resolve).catch(reject) }, 300) @@ -95,11 +96,6 @@ export const suggestUsers = ({ dispatch, state }) => { user => user.screen_name.toLowerCase().startsWith(noPrefix) || user.name.toLowerCase().startsWith(noPrefix) - - /* taking only 20 results so that sorting is a bit cheaper, we display - * only 5 anyway. could be inaccurate, but we ideally we should query - * backend anyway - */ ).slice(0, 20).sort((a, b) => { let aScore = 0 let bScore = 0 From e6e3b752d65fe2038a1b42ef9ddae8c21bf1cad2 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 27 Nov 2020 15:51:58 +0200 Subject: [PATCH 6/6] review fixes --- src/components/emoji_input/emoji_input.js | 1 - src/modules/users.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 3deeb6c8..2068a598 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -186,7 +186,6 @@ const EmojiInput = { this.suggestions = take(matchedSuggestions, 5) .map(({ imageUrl, ...rest }) => ({ ...rest, - // eslint-disable-next-line camelcase img: imageUrl || '' })) }, diff --git a/src/modules/users.js b/src/modules/users.js index 4bdf3360..655db4c7 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -442,10 +442,10 @@ const users = { store.commit('setUserForNotification', notification) }) }, - searchUsers ({ rootState, commit }, { query, saveUsers = true }) { + searchUsers ({ rootState, commit }, { query }) { return rootState.api.backendInteractor.searchUsers({ query }) .then((users) => { - if (saveUsers) commit('addNewUsers', users) + commit('addNewUsers', users) return users }) },