Add support for filtering on categories and tags (#13505)

* Use underscores instead of camel case * Add support for filtering by tags and categories
Automattic · Sep 23, 2019 · 25c4981 · 25c4981
1 parent 9208e5a
commit 25c4981
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 22 deletions.
diff --git a/modules/search/instant-search/components/search-filter-post-types.jsx b/modules/search/instant-search/components/search-filter-post-types.jsx
@@ -17,7 +17,7 @@ export default class SearchFilterPostTypes extends Component {
 	toggleFilter = () => {
 		const selected = getCheckedInputNames( this.filtersList.current );
 		this.setState( { selected }, () => {
-			this.props.onChange( 'postTypes', selected );
+			this.props.onChange( 'post_types', selected );
 		} );
 	};
 

diff --git a/modules/search/instant-search/components/search-filter-taxonomies.jsx b/modules/search/instant-search/components/search-filter-taxonomies.jsx
@@ -3,30 +3,51 @@
 /**
  * External dependencies
  */
-import { h, Component } from 'preact';
+import { h, createRef, Component } from 'preact';
 import strip from 'strip';
+import { getCheckedInputNames } from '../lib/dom';
 
 export default class SearchFilterTaxonomies extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = { selected: this.props.initialValue };
+		this.filtersList = createRef();
+	}
+
+	toggleFilter = () => {
+		const selected = getCheckedInputNames( this.filtersList.current );
+		this.setState( { selected }, () => {
+			this.props.onChange( this.props.configuration.taxonomy, selected );
+		} );
+	};
+
+	renderTaxonomy = ( { key, doc_count: count } ) => {
+		return (
+			<div>
+				<input
+					checked={ this.state.selected && this.state.selected.includes( key ) }
+					id={ `jp-instant-search-filter-taxonomies-${ key }` }
+					name={ key }
+					onChange={ this.toggleFilter }
+					type="checkbox"
+				/>
+				<label htmlFor={ `jp-instant-search-filter-taxonomies-${ key }` }>
+					{ strip( key ) } ({ count })
+				</label>
+			</div>
+		);
+	};
+
 	render() {
 		return (
 			<div>
-				<h4 className="jetpack-search-filters-widget__sub-heading">{ this.props.filter.name }</h4>
-				<ul className="jetpack-search-filters-widget__filter-list">
+				<h4 className="jetpack-search-filters-widget__sub-heading">
+					{ this.props.configuration.name }
+				</h4>
+				<ul className="jetpack-search-filters-widget__filter-list" ref={ this.filtersList }>
 					{ this.props.aggregation &&
 						'buckets' in this.props.aggregation &&
-						this.props.aggregation.buckets.map( bucket => (
-							<div>
-								<input
-									disabled
-									id={ `jp-instant-search-filter-taxonomies-${ bucket.key }` }
-									name={ bucket.key }
-									type="checkbox"
-								/>
-								<label htmlFor={ `jp-instant-search-filter-taxonomies-${ bucket.key }` }>
-									{ strip( bucket.key ) } ({ bucket.doc_count })
-								</label>
-							</div>
-						) ) }
+						this.props.aggregation.buckets.map( this.renderTaxonomy ) }
 				</ul>
 			</div>
 		);

diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -23,15 +23,22 @@ export default class SearchFiltersWidget extends Component {
 				return results && <SearchFilterDates aggregation={ results } filter={ configuration } />;
 			case 'taxonomy':
 				return (
-					results && <SearchFilterTaxonomies aggregation={ results } filter={ configuration } />
+					results && (
+						<SearchFilterTaxonomies
+							aggregation={ results }
+							configuration={ configuration }
+							initialValue={ this.props.initialValues[ configuration.taxonomy ] }
+							onChange={ this.props.onChange }
+						/>
+					)
 				);
 			case 'post_type':
 				return (
 					results && (
 						<SearchFilterPostTypes
 							aggregation={ results }
 							configuration={ configuration }
-							initialValue={ this.props.initialValues.postTypes }
+							initialValue={ this.props.initialValues.post_types }
 							onChange={ this.props.onChange }
 							postTypes={ this.props.postTypes }
 						/>

diff --git a/modules/search/instant-search/lib/api.js b/modules/search/instant-search/lib/api.js
@@ -43,11 +43,16 @@ function buildFilterObject( filterQuery ) {
 	}
 
 	const filter = { bool: { must: [] } };
-	if ( Array.isArray( filterQuery.postTypes ) && filterQuery.postTypes.length > 0 ) {
-		filterQuery.postTypes.forEach( postType => {
+	if ( Array.isArray( filterQuery.post_types ) && filterQuery.post_types.length > 0 ) {
+		filterQuery.post_types.forEach( postType => {
 			filter.bool.must.push( { term: { post_type: postType } } );
 		} );
 	}
+	if ( Array.isArray( filterQuery.post_tag ) && filterQuery.post_tag.length > 0 ) {
+		filterQuery.post_tag.forEach( tag => {
+			filter.bool.must.push( { term: { 'tag.slug': tag } } );
+		} );
+	}
 	return filter;
 }
 

diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js
@@ -44,7 +44,9 @@ export function getFilterQuery( filterKey ) {
 	}
 
 	return {
-		postTypes: getFilterQueryByKey( 'postTypes' ),
+		category: getFilterQueryByKey( 'category' ),
+		post_tag: getFilterQueryByKey( 'post_tag' ),
+		post_types: getFilterQueryByKey( 'post_types' ),
 	};
 }