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

* Do not debounce emoji search

* Make autosuggestions appear sooner
This commit is contained in:
Eugen Rochko 2017-09-30 05:11:44 +02:00 committed by GitHub
parent ebb8c89207
commit d6fe0954e3
3 changed files with 30 additions and 18 deletions

View file

@ -1,5 +1,6 @@
import api from '../api'; import api from '../api';
import { emojiIndex } from 'emoji-mart'; import { emojiIndex } from 'emoji-mart';
import { throttle } from 'lodash';
import { import {
updateTimeline, 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) { export function fetchComposeSuggestions(token) {
return (dispatch, getState) => { return (dispatch, getState) => {
if (token[0] === ':') { if (token[0] === ':') {
const results = emojiIndex.search(token.replace(':', ''), { maxResults: 3 }); fetchComposeSuggestionsEmojis(dispatch, getState, token);
dispatch(readyComposeSuggestionsEmojis(token, results)); } else {
return; 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));
});
}; };
}; };

View file

@ -17,8 +17,13 @@ export default class AutosuggestEmoji extends React.PureComponent {
if (emoji.custom) { if (emoji.custom) {
url = emoji.imageUrl; url = emoji.imageUrl;
} else { } else {
const [ filename ] = unicodeMapping[emoji.native]; const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
url = `${assetHost}/emoji/${filename}.svg`;
if (!mapping) {
return null;
}
url = `${assetHost}/emoji/${mapping[0]}.svg`;
} }
return ( return (

View file

@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReplyIndicatorContainer from '../containers/reply_indicator_container'; import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea'; import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import { debounce } from 'lodash';
import UploadButtonContainer from '../containers/upload_button_container'; import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import Collapsable from '../../../components/collapsable'; import Collapsable from '../../../components/collapsable';
@ -82,9 +81,9 @@ export default class ComposeForm extends ImmutablePureComponent {
this.props.onClearSuggestions(); this.props.onClearSuggestions();
} }
onSuggestionsFetchRequested = debounce((token) => { onSuggestionsFetchRequested = (token) => {
this.props.onFetchSuggestions(token); this.props.onFetchSuggestions(token);
}, 500, { trailing: true }) }
onSuggestionSelected = (tokenStart, token, value) => { onSuggestionSelected = (tokenStart, token, value) => {
this._restoreCaret = null; this._restoreCaret = null;