From 017e3d5d8d6d8018f366f25b91a077567bb4bd95 Mon Sep 17 00:00:00 2001
From: Jason Moon <jason.moon@automattic.com>
Date: Wed, 4 Sep 2019 17:20:53 -0600
Subject: [PATCH] Add rudimentary support for filtering on post types

---
 .../components/search-filter-post-types.jsx   | 27 +++++++++++++++----
 .../components/search-filters-widget.jsx      | 20 +++++++++-----
 .../components/search-widget.jsx              | 25 ++++++++++-------
 modules/search/instant-search/index.jsx       |  9 ++++---
 modules/search/instant-search/lib/api.js      | 18 +++++++++++--
 modules/search/instant-search/lib/dom.js      |  6 +++++
 .../search/instant-search/lib/query-string.js | 27 +++++++++++++++++++
 7 files changed, 105 insertions(+), 27 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 3ff2751426221..188edb8cdca91 100644
--- a/modules/search/instant-search/components/search-filter-post-types.jsx
+++ b/modules/search/instant-search/components/search-filter-post-types.jsx
@@ -3,18 +3,33 @@
 /**
  * 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 SearchFilterPostTypes 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( 'postTypes', selected );
+		} );
+	};
+
 	renderPostType = ( { key, doc_count: count } ) => {
-		const name = this.props.postTypes[ key ];
+		const name = key in this.props.postTypes ? this.props.postTypes[ key ] : key;
 		return (
 			<div>
 				<input
-					disabled
+					checked={ this.state.selected.includes( key ) }
 					id={ `jp-instant-search-filter-post-types-${ key }` }
 					name={ key }
+					onChange={ this.toggleFilter }
 					type="checkbox"
 				/>
 				<label htmlFor={ `jp-instant-search-filter-post-types-${ key }` }>
@@ -26,8 +41,10 @@ export default class SearchFilterPostTypes extends Component {
 	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( this.renderPostType ) }
diff --git a/modules/search/instant-search/components/search-filters-widget.jsx b/modules/search/instant-search/components/search-filters-widget.jsx
index efbefd835cb9a..82907070f09a6 100644
--- a/modules/search/instant-search/components/search-filters-widget.jsx
+++ b/modules/search/instant-search/components/search-filters-widget.jsx
@@ -17,18 +17,22 @@ import SearchFilterTaxonomies from './search-filter-taxonomies';
 import SearchFilterPostTypes from './search-filter-post-types';
 
 export default class SearchFiltersWidget extends Component {
-	renderFilterComponent = ( { filter, results } ) => {
-		switch ( filter.type ) {
+	renderFilterComponent = ( { configuration, results } ) => {
+		switch ( configuration.type ) {
 			case 'date_histogram':
-				return results && <SearchFilterDates aggregation={ results } filter={ filter } />;
+				return results && <SearchFilterDates aggregation={ results } filter={ configuration } />;
 			case 'taxonomy':
-				return results && <SearchFilterTaxonomies aggregation={ results } filter={ filter } />;
+				return (
+					results && <SearchFilterTaxonomies aggregation={ results } filter={ configuration } />
+				);
 			case 'post_type':
 				return (
 					results && (
 						<SearchFilterPostTypes
 							aggregation={ results }
-							filter={ filter }
+							configuration={ configuration }
+							initialValue={ this.props.initialValues.postTypes }
+							onChange={ this.props.onChange }
 							postTypes={ this.props.postTypes }
 						/>
 					)
@@ -41,8 +45,10 @@ export default class SearchFiltersWidget extends Component {
 		return (
 			<div className="jetpack-instant-search__filters-widget">
 				{ get( this.props.widget, 'filters' )
-					.map( filter =>
-						aggregations ? { filter, results: aggregations[ filter.filter_id ] } : null
+					.map( configuration =>
+						aggregations
+							? { configuration, results: aggregations[ configuration.filter_id ] }
+							: null
 					)
 					.filter( data => !! data )
 					.filter(
diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx
index 4fb965c6d6dd0..e2412e335ed9d 100644
--- a/modules/search/instant-search/components/search-widget.jsx
+++ b/modules/search/instant-search/components/search-widget.jsx
@@ -16,7 +16,7 @@ import debounce from 'lodash/debounce';
 import SearchResults from './search-results';
 import SearchFiltersWidget from './search-filters-widget';
 import { search, buildFilterAggregations } from '../lib/api';
-import { setSearchQuery } from '../lib/query-string';
+import { setSearchQuery, setFilterQuery, getFilterQuery } from '../lib/query-string';
 import { removeChildren, hideSearchHeader } from '../lib/dom';
 
 class SearchApp extends Component {
@@ -32,7 +32,7 @@ class SearchApp extends Component {
 			results: {},
 		};
 		this.getResults = debounce( this.getResults, 500 );
-		this.getResults( this.props.initialValue );
+		this.getResults( this.state.query, getFilterQuery() );
 	}
 
 	componentDidMount() {
@@ -54,18 +54,23 @@ class SearchApp extends Component {
 		this.getResults( query );
 	};
 
-	getResults = query => {
+	onChangeFilter = ( filterName, filterValue ) => {
+		setFilterQuery( filterName, filterValue );
+		this.getResults( this.state.query, getFilterQuery() );
+	};
+
+	getResults = ( query, filter ) => {
 		if ( query ) {
 			this.requestId++;
 			const requestId = this.requestId;
 
-			search(
-				this.props.options.siteId,
+			search( {
+				aggregations: this.props.aggregations,
+				filter,
 				query,
-				this.props.aggregations,
-				{},
-				this.props.options.resultFormat
-			)
+				resultFormat: this.props.options.resultFormat,
+				siteId: this.props.options.siteId,
+			} )
 				.then( response => response.json() )
 				.then( json => {
 					if ( this.requestId === requestId ) {
@@ -102,6 +107,8 @@ class SearchApp extends Component {
 							</div>
 							<div className="jetpack-search-sort-wrapper" />
 							<SearchFiltersWidget
+								initialValues={ this.props.initialFilters }
+								onChange={ this.onChangeFilter }
 								postTypes={ this.props.options.postTypes }
 								results={ this.state.results }
 								widget={ widget }
diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx
index 7a12766b734b6..182131e7293bf 100644
--- a/modules/search/instant-search/index.jsx
+++ b/modules/search/instant-search/index.jsx
@@ -9,13 +9,14 @@ import { h, render } from 'preact';
  * Internal dependencies
  */
 import SearchWidget from './components/search-widget';
-import { getSearchQuery } from './lib/query-string';
+import { getSearchQuery, getFilterQuery } from './lib/query-string';
 
-const injectSearchWidget = ( initialValue, grabFocus ) => {
+const injectSearchWidget = grabFocus => {
 	render(
 		<SearchWidget
 			grabFocus={ grabFocus }
-			initialValue={ initialValue }
+			initialFilters={ getFilterQuery() }
+			initialValue={ getSearchQuery() }
 			options={ window.JetpackInstantSearchOptions }
 		/>,
 		document.body
@@ -24,6 +25,6 @@ const injectSearchWidget = ( initialValue, grabFocus ) => {
 
 document.addEventListener( 'DOMContentLoaded', function() {
 	if ( !! window.JetpackInstantSearchOptions && 'siteId' in window.JetpackInstantSearchOptions ) {
-		injectSearchWidget( getSearchQuery() );
+		injectSearchWidget();
 	}
 } );
diff --git a/modules/search/instant-search/lib/api.js b/modules/search/instant-search/lib/api.js
index 0cef521b28608..f1938cd75f075 100644
--- a/modules/search/instant-search/lib/api.js
+++ b/modules/search/instant-search/lib/api.js
@@ -37,7 +37,21 @@ export function buildFilterAggregations( widgets = [] ) {
 	return aggregation;
 }
 
-export function search( siteId, query, aggregations, filter, resultFormat ) {
+function buildFilterObject( filterQuery ) {
+	if ( ! filterQuery ) {
+		return {};
+	}
+
+	const filter = { bool: { must: [] } };
+	if ( Array.isArray( filterQuery.postTypes ) && filterQuery.postTypes.length > 0 ) {
+		filterQuery.postTypes.forEach( postType => {
+			filter.bool.must.push( { term: { post_type: postType } } );
+		} );
+	}
+	return filter;
+}
+
+export function search( { aggregations, filter, query, resultFormat, siteId } ) {
 	let fields = [];
 	let highlight_fields = [];
 	switch ( resultFormat ) {
@@ -54,7 +68,7 @@ export function search( siteId, query, aggregations, filter, resultFormat ) {
 			aggregations,
 			fields,
 			highlight_fields,
-			filter,
+			filter: buildFilterObject( filter ),
 			query: encodeURIComponent( query ),
 		} )
 	);
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index 707f88d241c56..5008236a771df 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -10,3 +10,9 @@ export function hideSearchHeader() {
 		title.style.display = 'none';
 	}
 }
+
+export function getCheckedInputNames( parentDom ) {
+	return [ ...parentDom.querySelectorAll( 'input[type="checkbox"]' ).values() ]
+		.filter( input => input.checked )
+		.map( input => input.name );
+}
diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js
index 8b7156e6213e4..93e51631a28b1 100644
--- a/modules/search/instant-search/lib/query-string.js
+++ b/modules/search/instant-search/lib/query-string.js
@@ -26,3 +26,30 @@ export function setSearchQuery( searchValue ) {
 	query.s = searchValue;
 	pushQueryString( encode( query ) );
 }
+
+function getFilterQueryByKey( filterKey ) {
+	const query = getQuery();
+	if ( ! ( filterKey in query ) ) {
+		return [];
+	}
+	if ( typeof query[ filterKey ] === 'string' ) {
+		return [ query[ filterKey ] ];
+	}
+	return query[ filterKey ];
+}
+
+export function getFilterQuery( filterKey ) {
+	if ( filterKey ) {
+		return getFilterQueryByKey( filterKey );
+	}
+
+	return {
+		postTypes: getFilterQueryByKey( 'postTypes' ),
+	};
+}
+
+export function setFilterQuery( filterKey, filterValue ) {
+	const query = getQuery();
+	query[ filterKey ] = filterValue;
+	pushQueryString( encode( query ) );
+}