Chrome: Load more than 10 tags/categories

WordPress · Jun 27, 2017 · 6301959 · 6301959
1 parent 7e743f6
commit 6301959
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 23 deletions.
diff --git a/components/form-token-field/README.md b/components/form-token-field/README.md
@@ -41,6 +41,7 @@ The `value` property is handled in a manner similar to controlled form component
   Otherwise the REST API won't save them.)
 - `onChange` - Function to call when the tokens have changed. An array of new
   tokens is passed to the callback.
+- `onInputChange` - Function to call when the users types in the input field. It can be used to trigger autocomplete requests.
 - `onFocus` - Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.
 - `suggestions` - An array of strings to present to the user as suggested
   tokens.

diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
@@ -187,6 +187,8 @@ class FormTokenField extends Component {
 			selectedSuggestionScroll: false,
 		} );
 
+		this.props.onInputChange( tokenValue );
+
 		const showMessage = tokenValue.trim().length > 1;
 		if ( showMessage ) {
 			const matchingSuggestions = this.getMatchingSuggestions( tokenValue );
@@ -555,6 +557,7 @@ FormTokenField.defaultProps = {
 	displayTransform: identity,
 	saveTransform: ( token ) => token.trim(),
 	onChange: () => {},
+	onInputChange: () => {},
 	isBorderless: false,
 	disabled: false,
 	tokenizeOnSpace: false,

diff --git a/editor/sidebar/post-taxonomies/categories-selector.js b/editor/sidebar/post-taxonomies/categories-selector.js
@@ -17,9 +17,9 @@ import { getEditedPostAttribute } from '../../selectors';
 import { editPost } from '../../actions';
 
 const DEFAULT_CATEGORIES_QUERY = {
-	per_page: -1,
+	per_page: 100,
 	orderby: 'count',
-	order: 'DESC',
+	order: 'desc',
 };
 
 class CategoriesSelector extends Component {
@@ -50,7 +50,8 @@ class CategoriesSelector extends Component {
 	}
 
 	componentDidMount() {
-		this.fetchCategoriesRequest = new wp.api.collections.Categories().fetch( DEFAULT_CATEGORIES_QUERY )
+		this.fetchCategoriesRequest = new wp.api.collections.Categories()
+			.fetch( { data: DEFAULT_CATEGORIES_QUERY } )
 			.done( ( categories ) => {
 				const availableCategories = this.buildCategoriesTree( categories );
 

diff --git a/editor/sidebar/post-taxonomies/tags-selector.js b/editor/sidebar/post-taxonomies/tags-selector.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { unescape, find } from 'lodash';
+import { unescape, find, throttle } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,16 +18,17 @@ import { getEditedPostAttribute } from '../../selectors';
 import { editPost } from '../../actions';
 
 const DEFAULT_TAGS_QUERY = {
-	per_page: -1,
+	per_page: 100,
 	orderby: 'count',
-	order: 'DESC',
+	order: 'desc',
 };
 const MAX_TERMS_SUGGESTIONS = 20;
 
 class TagsSelector extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onTagsChange = this.onTagsChange.bind( this );
+		this.searchTags = throttle( this.searchTags.bind( this ), 500 );
 		this.state = {
 			loading: true,
 			availableTags: [],
@@ -36,27 +37,31 @@ class TagsSelector extends Component {
 	}
 
 	componentDidMount() {
-		this.fetchTagsRequest = new wp.api.collections.Tags().fetch( DEFAULT_TAGS_QUERY )
-			.done( ( tags ) => {
-				this.setState( {
-					loading: false,
-					availableTags: tags,
-				} );
-				this.updateSelectedTags( this.props.tags );
-			} )
-			.fail( ( xhr ) => {
-				if ( xhr.statusText === 'abort' ) {
-					return;
+		if ( this.props.tags ) {
+			this.setState( { loading: false } );
+			this.initRequest = this.fetchTags( { include: this.props.tags } ).then(
+				() => {
+					this.setState( { loading: false } );
+				},
+				( xhr ) => {
+					if ( xhr.statusText === 'abort' ) {
+						return;
+					}
+					this.setState( {
+						loading: false,
+					} );
 				}
-				this.setState( {
-					loading: false,
-				} );
-			} );
+			);
+		}
+		this.searchTags();
 	}
 
 	componentWillUnmount() {
-		if ( this.fetchTagsRequest ) {
-			this.fetchTagsRequest.abort();
+		if ( this.initRequest ) {
+			this.initRequest.abort();
+		}
+		if ( this.searchRequest ) {
+			this.searchRequest.abort();
 		}
 	}
 
@@ -66,6 +71,21 @@ class TagsSelector extends Component {
 		}
 	}
 
+	fetchTags( params = {} ) {
+		const query = { ...DEFAULT_TAGS_QUERY, ...params };
+		const request = new wp.api.collections.Tags().fetch( { data: query } );
+		request.then( ( tags ) => {
+			this.setState( ( state ) => ( {
+				availableTags: state.availableTags.concat(
+					tags.filter( ( tag ) => ! find( state.availableTags, ( availableTag ) => availableTag.id === tag.id ) )
+				),
+			} ) );
+			this.updateSelectedTags( this.props.tags );
+		} );
+
+		return request;
+	}
+
 	updateSelectedTags( tags = [] ) {
 		const selectedTags = tags.map( ( tagId ) => {
 			const tagObject = find( this.state.availableTags, ( tag ) => tag.id === tagId );
@@ -101,6 +121,13 @@ class TagsSelector extends Component {
 			} );
 	}
 
+	searchTags( search = '' ) {
+		if ( this.searchRequest ) {
+			this.searchRequest.abort();
+		}
+		this.searchRequest = this.fetchTags( { search } );
+	}
+
 	render() {
 		const { loading, availableTags, selectedTags } = this.state;
 		const tagNames = availableTags.map( ( tag ) => tag.name );
@@ -113,6 +140,7 @@ class TagsSelector extends Component {
 					displayTransform={ unescape }
 					suggestions={ tagNames }
 					onChange={ this.onTagsChange }
+					onInputChange={ this.searchTags }
 					maxSuggestions={ MAX_TERMS_SUGGESTIONS }
 					disabled={ loading }
 					placeholder={ __( 'Add New Tag' ) }