From 0f386ccbc7115fd1d74615377beca9982dec00bf Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
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