From 0f386ccbc7115fd1d74615377beca9982dec00bf Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 18 Nov 2020 18:43:24 +0200 Subject: [PATCH] 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