From 85d9f61741b81b06384bbaf6023f29b01f3daf0c Mon Sep 17 00:00:00 2001
From: Jason Moon <jason.moon@automattic.com>
Date: Fri, 20 Sep 2019 14:53:11 -0600
Subject: [PATCH 1/2] Use underscores instead of camel case

---
 .../instant-search/components/search-filter-post-types.jsx    | 2 +-
 .../instant-search/components/search-filters-widget.jsx       | 2 +-
 modules/search/instant-search/lib/api.js                      | 4 ++--
 modules/search/instant-search/lib/query-string.js             | 2 +-
 4 files changed, 5 insertions(+), 5 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
index 188edb8cdca91..7a7bdde18f58f 100644
--- 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-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx
index 82907070f09a6..56660b1ca7566 100644
--- a/modules/search/instant-search/components/search-filters-widget.jsx
+++ b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -31,7 +31,7 @@ export default class SearchFiltersWidget extends Component {
 						<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
index 70e523b6210e8..efe3d0fd2a2d7 100644
--- a/modules/search/instant-search/lib/api.js
+++ b/modules/search/instant-search/lib/api.js
@@ -43,8 +43,8 @@ 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 } } );
 		} );
 	}
diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js
index 93e51631a28b1..0a4586d22cdc9 100644
--- a/modules/search/instant-search/lib/query-string.js
+++ b/modules/search/instant-search/lib/query-string.js
@@ -44,7 +44,7 @@ export function getFilterQuery( filterKey ) {
 	}
 
 	return {
-		postTypes: getFilterQueryByKey( 'postTypes' ),
+		post_types: getFilterQueryByKey( 'post_types' ),
 	};
 }
 

From 8cd8f8f86ee6f6ffd927ad184bdacec4cb1036c2 Mon Sep 17 00:00:00 2001
From: Jason Moon <jason.moon@automattic.com>
Date: Fri, 20 Sep 2019 14:53:50 -0600
Subject: [PATCH 2/2] Add support for filtering by tags and categories

---
 .../components/search-filter-taxonomies.jsx   | 53 +++++++++++++------
 .../components/search-filters-widget.jsx      |  9 +++-
 modules/search/instant-search/lib/api.js      |  5 ++
 .../search/instant-search/lib/query-string.js |  2 +
 4 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/modules/search/instant-search/components/search-filter-taxonomies.jsx b/modules/search/instant-search/components/search-filter-taxonomies.jsx
index fbd93a7fcfdba..5afd3d2ac6f96 100644
--- 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
index 56660b1ca7566..8c5a39fa03160 100644
--- a/modules/search/instant-search/components/search-filters-widget.jsx
+++ b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -23,7 +23,14 @@ 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 (
diff --git a/modules/search/instant-search/lib/api.js b/modules/search/instant-search/lib/api.js
index efe3d0fd2a2d7..ec8c5d41f9e33 100644
--- a/modules/search/instant-search/lib/api.js
+++ b/modules/search/instant-search/lib/api.js
@@ -48,6 +48,11 @@ function buildFilterObject( filterQuery ) {
 			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
index 0a4586d22cdc9..be28d96e6d0ff 100644
--- a/modules/search/instant-search/lib/query-string.js
+++ b/modules/search/instant-search/lib/query-string.js
@@ -44,6 +44,8 @@ export function getFilterQuery( filterKey ) {
 	}
 
 	return {
+		category: getFilterQueryByKey( 'category' ),
+		post_tag: getFilterQueryByKey( 'post_tag' ),
 		post_types: getFilterQueryByKey( 'post_types' ),
 	};
 }