Merge branch 'fix/make-autocomplete-wait-for-request-to-finish' into 'develop'

Fix #1011 Make autocomplete wait for user search to finish before suggesting

Closes #1011

See merge request pleroma/pleroma-fe!1289
This commit is contained in:
Shpuld Shpludson 2020-11-27 13:57:36 +00:00
commit 32f77cfbd7
6 changed files with 105 additions and 82 deletions

View File

@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Fixed custom emoji not working in profile field names - Fixed custom emoji not working in profile field names
- Fixed pinned statuses not appearing in user profiles - Fixed pinned statuses not appearing in user profiles
- Fixed username autocomplete being jumpy
## [2.2.1] - 2020-11-11 ## [2.2.1] - 2020-11-11

View File

@ -114,7 +114,8 @@ const EmojiInput = {
showPicker: false, showPicker: false,
temporarilyHideSuggestions: false, temporarilyHideSuggestions: false,
keepOpen: false, keepOpen: false,
disableClickOutside: false disableClickOutside: false,
suggestions: []
} }
}, },
components: { components: {
@ -124,21 +125,6 @@ const EmojiInput = {
padEmoji () { padEmoji () {
return this.$store.getters.mergedConfig.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 () { showSuggestions () {
return this.focused && return this.focused &&
this.suggestions && this.suggestions &&
@ -188,6 +174,23 @@ const EmojiInput = {
watch: { watch: {
showSuggestions: function (newValue) { showSuggestions: function (newValue) {
this.$emit('shown', newValue) this.$emit('shown', newValue)
},
textAtCaret: async function (newWord) {
const firstchar = newWord.charAt(0)
this.suggestions = []
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 }) => ({
...rest,
img: imageUrl || ''
}))
},
suggestions (newValue) {
this.$nextTick(this.resize)
} }
}, },
methods: { methods: {

View File

@ -37,7 +37,7 @@
v-for="(suggestion, index) in suggestions" v-for="(suggestion, index) in suggestions"
:key="index" :key="index"
class="autocomplete-item" class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }" :class="{ highlighted: index === highlighted }"
@click.stop.prevent="onClick($event, suggestion)" @click.stop.prevent="onClick($event, suggestion)"
> >
<span class="image"> <span class="image">

View File

@ -1,4 +1,3 @@
import { debounce } from 'lodash'
/** /**
* suggest - generates a suggestor function to be used by emoji-input * suggest - generates a suggestor function to be used by emoji-input
* data: object providing source information for specific types of suggestions: * data: object providing source information for specific types of suggestions:
@ -11,20 +10,20 @@ import { debounce } from 'lodash'
* doesn't support user linking you can just provide only emoji. * 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 = data.store && suggestUsers(data.store)
return input => {
export default data => input => {
const firstChar = input[0] const firstChar = input[0]
if (firstChar === ':' && data.emoji) { if (firstChar === ':' && data.emoji) {
return suggestEmoji(data.emoji)(input) return emojiCurry(input)
} }
if (firstChar === '@' && data.users) { if (firstChar === '@' && usersCurry) {
return suggestUsers(data)(input) return usersCurry(input)
} }
return [] return []
} }
}
export const suggestEmoji = emojis => input => { export const suggestEmoji = emojis => input => {
const noPrefix = input.toLowerCase().substr(1) const noPrefix = input.toLowerCase().substr(1)
@ -57,19 +56,46 @@ export const suggestEmoji = emojis => input => {
}) })
} }
export const suggestUsers = data => input => { export const suggestUsers = ({ dispatch, state }) => {
const noPrefix = input.toLowerCase().substr(1) // Keep some persistent values in closure, most importantly for the
const users = data.users // custom debounce to work. Lodash debounce does not return a promise.
let suggestions = []
let previousQuery = ''
let timeout = null
let cancelUserSearch = null
const newUsers = users.filter( const userSearch = (query) => dispatch('searchUsers', { query })
const debounceUserSearch = (query) => {
cancelUserSearch && cancelUserSearch()
return new Promise((resolve, reject) => {
timeout = setTimeout(() => {
userSearch(query).then(resolve).catch(reject)
}, 300)
cancelUserSearch = () => {
clearTimeout(timeout)
resolve([])
}
})
}
return async input => {
const noPrefix = input.toLowerCase().substr(1)
if (previousQuery === noPrefix) return suggestions
suggestions = []
previousQuery = 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 newSuggestions = state.users.users.filter(
user => user =>
user.screen_name.toLowerCase().startsWith(noPrefix) || user.screen_name.toLowerCase().startsWith(noPrefix) ||
user.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) => { ).slice(0, 20).sort((a, b) => {
let aScore = 0 let aScore = 0
let bScore = 0 let bScore = 0
@ -96,11 +122,9 @@ export const suggestUsers = data => input => {
imageUrl: profile_image_url_original, imageUrl: profile_image_url_original,
replacement: '@' + screen_name + ' ' replacement: '@' + screen_name + ' '
})) }))
// BE search users to get more comprehensive results
if (data.updateUsersList) {
debounceUserSearch(data, noPrefix)
}
return newUsers
/* eslint-enable camelcase */ /* eslint-enable camelcase */
suggestions = newSuggestions || []
return suggestions
}
} }

View File

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

View File

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