Instant Search: Add filtering display

modules/search/class.jetpack-search.php

@@ -204,10 +204,24 @@ public function load_assets() {
 				$script_version = self::get_asset_version( $script_relative_path );
 				$script_path    = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE );
 				wp_enqueue_script( 'jetpack-instant-search', $script_path, array(), $script_version, true );
-				$_blog_id = Jetpack::get_option( 'id' );
+
+				$filters = Jetpack_Search_Helpers::get_filters_from_widgets();
+				$widgets = array();
+				foreach( $filters as $key => $filter ) {
+					if ( ! isset( $widgets[$filter[ 'widget_id' ]] ) ) {
+						$widgets[$filter[ 'widget_id' ]][ 'filters' ] = array();
+						$widgets[$filter[ 'widget_id' ]][ 'widget_id' ] = $filter[ 'widget_id' ];
+					}
+					$new_filter = $filter;
+					$new_filter[ 'filter_id' ] = $key;
+					$widgets[$filter[ 'widget_id' ]][ 'filters' ][] = $new_filter;
+				}
+
 				// This is probably a temporary filter for testing the prototype.
 				$options = array(
-					'siteId' => $_blog_id,
+					'postTypes' => get_post_types(),
+					'siteId'		=> Jetpack::get_option( 'id' ),
+					'widgets' 	=> array_values( $widgets ),
 				);
 				/**
 				 * Customize Instant Search Options.
@@ -221,9 +235,7 @@ public function load_assets() {
 				$options = apply_filters( 'jetpack_instant_search_options', $options );
 
 				wp_localize_script(
-					'jetpack-instant-search',
-					'jetpack_instant_search_options',
-					$options
+					'jetpack-instant-search', 'JetpackInstantSearchOptions', $options
 				);
 			}
 

modules/search/instant-search/components/search-filter-dates.jsx

@@ -0,0 +1,42 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+import strip from 'strip';
+
+export default class SearchFilterDates 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">
+					{ this.props.aggregation &&
+						'buckets' in this.props.aggregation &&
+						[
+							...this.props.aggregation.buckets
+								// TODO: Remove this filter; API should only be sending buckets with document counts.
+								.filter( bucket => !! bucket && bucket.doc_count > 0 )
+								.map( bucket => (
+									<div>
+										<input
+											disabled
+											id={ `jp-instant-search-filter-dates-${ bucket.key_as_string }` }
+											name={ bucket.key_as_string }
+											type="checkbox"
+										/>
+										<label htmlFor={ `jp-instant-search-filter-dates-${ bucket.key_as_string }` }>
+											{ strip( bucket.key_as_string ) } ({ bucket.doc_count })
+										</label>
+									</div>
+								) ),
+						]
+							// TODO: Remove this reverse & slice when API adds filter count support
+							.reverse()
+							.slice( 0, 5 ) }
+				</ul>
+			</div>
+		);
+	}
+}

modules/search/instant-search/components/search-filter-post-types.jsx

@@ -0,0 +1,38 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+import strip from 'strip';
+
+export default class SearchFilterPostTypes extends Component {
+	renderPostType = ( { key, doc_count: count } ) => {
+		const name = this.props.postTypes[ key ];
+		return (
+			<div>
+				<input
+					disabled
+					id={ `jp-instant-search-filter-post-types-${ key }` }
+					name={ key }
+					type="checkbox"
+				/>
+				<label htmlFor={ `jp-instant-search-filter-post-types-${ key }` }>
+					{ strip( name ) } ({ 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">
+					{ this.props.aggregation &&
+						'buckets' in this.props.aggregation &&
+						this.props.aggregation.buckets.map( this.renderPostType ) }
+				</ul>
+			</div>
+		);
+	}
+}

modules/search/instant-search/components/search-filter-taxonomies.jsx

@@ -0,0 +1,34 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+import strip from 'strip';
+
+export default class SearchFilterTaxonomies 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">
+					{ 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>
+						) ) }
+				</ul>
+			</div>
+		);
+	}
+}

modules/search/instant-search/components/search-filters-widget.jsx

@@ -0,0 +1,56 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+// NOTE: We only import the debounce package here for to reduced bundle size.
+//       Do not import the entire lodash library!
+// eslint-disable-next-line lodash/import-scope
+import get from 'lodash/get';
+
+/**
+ * Internal dependencies
+ */
+import SearchFilterDates from './search-filter-dates';
+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 ) {
+			case 'date_histogram':
+				return results && <SearchFilterDates aggregation={ results } filter={ filter } />;
+			case 'taxonomy':
+				return results && <SearchFilterTaxonomies aggregation={ results } filter={ filter } />;
+			case 'post_type':
+				return (
+					results && (
+						<SearchFilterPostTypes
+							aggregation={ results }
+							filter={ filter }
+							postTypes={ this.props.postTypes }
+						/>
+					)
+				);
+		}
+	};
+
+	render() {
+		const aggregations = get( this.props.results, 'aggregations' );
+		return (
+			<div className="jetpack-instant-search__filters-widget">
+				{ get( this.props.widget, 'filters' )
+					.map( filter =>
+						aggregations ? { filter, results: aggregations[ filter.filter_id ] } : null
+					)
+					.filter( data => !! data )
+					.filter(
+						( { results } ) =>
+							!! results && Array.isArray( results.buckets ) && results.buckets.length > 0
+					)
+					.map( this.renderFilterComponent ) }
+			</div>
+		);
+	}
+}

modules/search/instant-search/components/search-filters-widget.scss

@@ -0,0 +1,5 @@
+.jetpack-search-filters-widget__filter-list {
+	label {
+		display: inline-block;
+	}
+}