logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: d6fe0954e319b271f3cfbb85df22aba9102746ac
parent: ebb8c8920795a31a3188d39b926a5074bb8b69cf
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sat, 30 Sep 2017 05:11:44 +0200

Make emoji autosuggestions immediate, usernames appear sooner (#5149)

* Do not debounce emoji search

* Make autosuggestions appear sooner

Diffstat:

Mapp/javascript/mastodon/actions/compose.js34+++++++++++++++++++++-------------
Mapp/javascript/mastodon/components/autosuggest_emoji.js9+++++++--
Mapp/javascript/mastodon/features/compose/components/compose_form.js5++---
3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js @@ -1,5 +1,6 @@ import api from '../api'; import { emojiIndex } from 'emoji-mart'; +import { throttle } from 'lodash'; import { updateTimeline, @@ -247,23 +248,30 @@ export function clearComposeSuggestions() { }; }; +const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) => { + api(getState).get('/api/v1/accounts/search', { + params: { + q: token.slice(1), + resolve: false, + limit: 4, + }, + }).then(response => { + dispatch(readyComposeSuggestionsAccounts(token, response.data)); + }); +}, 200, { leading: true, trailing: true }); + +const fetchComposeSuggestionsEmojis = (dispatch, getState, token) => { + const results = emojiIndex.search(token.replace(':', ''), { maxResults: 5 }); + dispatch(readyComposeSuggestionsEmojis(token, results)); +}; + export function fetchComposeSuggestions(token) { return (dispatch, getState) => { if (token[0] === ':') { - const results = emojiIndex.search(token.replace(':', ''), { maxResults: 3 }); - dispatch(readyComposeSuggestionsEmojis(token, results)); - return; + fetchComposeSuggestionsEmojis(dispatch, getState, token); + } else { + fetchComposeSuggestionsAccounts(dispatch, getState, token); } - - api(getState).get('/api/v1/accounts/search', { - params: { - q: token.slice(1), - resolve: false, - limit: 4, - }, - }).then(response => { - dispatch(readyComposeSuggestionsAccounts(token, response.data)); - }); }; }; diff --git a/app/javascript/mastodon/components/autosuggest_emoji.js b/app/javascript/mastodon/components/autosuggest_emoji.js @@ -17,8 +17,13 @@ export default class AutosuggestEmoji extends React.PureComponent { if (emoji.custom) { url = emoji.imageUrl; } else { - const [ filename ] = unicodeMapping[emoji.native]; - url = `${assetHost}/emoji/${filename}.svg`; + const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')]; + + if (!mapping) { + return null; + } + + url = `${assetHost}/emoji/${mapping[0]}.svg`; } return ( diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import ReplyIndicatorContainer from '../containers/reply_indicator_container'; import AutosuggestTextarea from '../../../components/autosuggest_textarea'; -import { debounce } from 'lodash'; import UploadButtonContainer from '../containers/upload_button_container'; import { defineMessages, injectIntl } from 'react-intl'; import Collapsable from '../../../components/collapsable'; @@ -82,9 +81,9 @@ export default class ComposeForm extends ImmutablePureComponent { this.props.onClearSuggestions(); } - onSuggestionsFetchRequested = debounce((token) => { + onSuggestionsFetchRequested = (token) => { this.props.onFetchSuggestions(token); - }, 500, { trailing: true }) + } onSuggestionSelected = (tokenStart, token, value) => { this._restoreCaret = null;