use users state + fetching with delay

This commit is contained in:
Shpuld Shpuldson 2020-11-18 18:43:24 +02:00
parent dd3c8631bf
commit 0f386ccbc7
4 changed files with 28 additions and 20 deletions

View file

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

View file

@ -12,13 +12,13 @@
export default data => { export default data => {
const emojiCurry = suggestEmoji(data.emoji) const emojiCurry = suggestEmoji(data.emoji)
const usersCurry = suggestUsers(data.dispatch) const usersCurry = data.store && suggestUsers(data.store)
return input => { return input => {
const firstChar = input[0] const firstChar = input[0]
if (firstChar === ':' && data.emoji) { if (firstChar === ':' && data.emoji) {
return emojiCurry(input) return emojiCurry(input)
} }
if (firstChar === '@' && data.dispatch) { if (firstChar === '@' && usersCurry) {
return usersCurry(input) return usersCurry(input)
} }
return [] return []
@ -56,18 +56,24 @@ export const suggestEmoji = emojis => input => {
}) })
} }
export const suggestUsers = (dispatch) => { export const suggestUsers = ({ dispatch, state }) => {
let suggestions = [] let suggestions = []
let previousQuery = '' let previousQuery = ''
let timeout = null let timeout = null
let cancelUserSearch = null
const userSearch = (query) => dispatch('searchUsers', { query, saveUsers: false }) const userSearch = (query) => dispatch('searchUsers', { query })
const debounceUserSearch = (query) => { const debounceUserSearch = (query) => {
cancelUserSearch && cancelUserSearch()
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
clearTimeout(timeout) clearTimeout(timeout)
timeout = setTimeout(() => { timeout = setTimeout(() => {
userSearch(query).then(resolve).catch(reject) userSearch(query).then(resolve).catch(reject)
}, 300) }, 300)
cancelUserSearch = () => {
clearTimeout(timeout)
resolve([])
}
}) })
} }
@ -77,9 +83,15 @@ export const suggestUsers = (dispatch) => {
suggestions = [] suggestions = []
previousQuery = noPrefix 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 =>
user.screen_name.toLowerCase().startsWith(noPrefix) || user.screen_name.toLowerCase().startsWith(noPrefix) ||
user.name.toLowerCase().startsWith(noPrefix) user.name.toLowerCase().startsWith(noPrefix)
@ -114,9 +126,9 @@ export const suggestUsers = (dispatch) => {
imageUrl: profile_image_url_original, imageUrl: profile_image_url_original,
replacement: '@' + screen_name + ' ' replacement: '@' + screen_name + ' '
})) }))
suggestions = newUsers || []
return suggestions
/* eslint-enable camelcase */ /* eslint-enable camelcase */
suggestions = newSuggestions || []
return suggestions
} }
} }

View file

@ -159,7 +159,7 @@ const PostStatusForm = {
...this.$store.state.instance.emoji, ...this.$store.state.instance.emoji,
...this.$store.state.instance.customEmoji ...this.$store.state.instance.customEmoji
], ],
dispatch: this.$store.dispatch store: this.$store
}) })
}, },
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