Make emoji autosuggestions immediate, usernames appear sooner (#5149)
* Do not debounce emoji search * Make autosuggestions appear sooner
This commit is contained in:
		
							parent
							
								
									ebb8c89207
								
							
						
					
					
						commit
						d6fe0954e3
					
				
					 3 changed files with 30 additions and 18 deletions
				
			
		|  | @ -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)); | ||||
|     }); | ||||
|   }; | ||||
| }; | ||||
| 
 | ||||
|  |  | |||
|  | @ -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 ( | ||||
|  |  | |||
|  | @ -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; | ||||
|  |  | |||
		Reference in a new issue