use users state + fetching with delay
This commit is contained in:
parent
dd3c8631bf
commit
0f386ccbc7
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue