Instant Search: add sort widget

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

@@ -0,0 +1,49 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h, Component } from 'preact';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getSortOptions } from '../lib/sort';
+
+export default class SearchSortWidget extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = { selected: this.props.initialValue };
+	}
+
+	handleChange = event => {
+		if ( this.state.selected === event.target.value ) {
+			return;
+		}
+
+		this.setState( { selected: event.target.value }, () => {
+			this.props.onChange( event.target.value );
+		} );
+	};
+
+	render() {
+		const sortOptions = getSortOptions();
+		return (
+			<label>
+				{ __( 'Sort by', 'jetpack' ) }
+				<select
+					className="jetpack-instant-search__sort-widget-select"
+					onBlur={ this.handleChange }
+					onChange={ this.handleChange }
+				>
+					{ Object.keys( sortOptions ).map( sortKey => (
+						<option value={ sortKey } selected={ this.state.selected === sortKey }>
+							{ sortOptions[ sortKey ].label }
+						</option>
+					) ) }
+				</select>
+			</label>
+		);
+	}
+}

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

@@ -0,0 +1,3 @@
+.jetpack-instant-search__sort-widget-select {
+	margin-left: 4px;
+}

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

@@ -15,8 +15,15 @@ import debounce from 'lodash/debounce';
  */
 import SearchResults from './search-results';
 import SearchFiltersWidget from './search-filters-widget';
+import SearchSortWidget from './search-sort-widget';
 import { search, buildFilterAggregations } from '../lib/api';
-import { setSearchQuery, setFilterQuery, getFilterQuery } from '../lib/query-string';
+import {
+	setSearchQuery,
+	setFilterQuery,
+	getFilterQuery,
+	setSortQuery,
+	getSortQuery,
+} from '../lib/query-string';
 import { removeChildren, hideSearchHeader } from '../lib/dom';
 
 class SearchApp extends Component {
@@ -52,12 +59,17 @@ class SearchApp extends Component {
 		const query = event.target.value;
 		this.setState( { query } );
 		setSearchQuery( query );
-		this.getResults( query, this.state.sort );
+		this.getResults( query, getFilterQuery(), getSortQuery() );
 	};
 
 	onChangeFilter = ( filterName, filterValue ) => {
 		setFilterQuery( filterName, filterValue );
-		this.getResults( this.state.query, getFilterQuery() );
+		this.getResults( this.state.query, getFilterQuery(), getSortQuery() );
+	};
+
+	onChangeSort = sort => {
+		setSortQuery( sort );
+		this.getResults( this.state.query, getFilterQuery(), getSortQuery() );
 	};
 
 	getResults = ( query, filter, sort ) => {
@@ -105,7 +117,12 @@ class SearchApp extends Component {
 									<span className="screen-reader-text">Search</span>
 								</button>
 							</div>
-							<div className="jetpack-search-sort-wrapper" />
+							<div className="jetpack-search-sort-wrapper">
+								<SearchSortWidget
+									initialValue={ this.props.initialSort }
+									onChange={ this.onChangeSort }
+								/>
+							</div>
 							<SearchFiltersWidget
 								initialValues={ this.props.initialFilters }
 								onChange={ this.onChangeFilter }

modules/search/instant-search/index.jsx

@@ -9,15 +9,15 @@ import { h, render } from 'preact';
  * Internal dependencies
  */
 import SearchWidget from './components/search-widget';
-import { getSearchQuery, getFilterQuery, getSearchSort } from './lib/query-string';
+import { getSearchQuery, getFilterQuery, getSortQuery } from './lib/query-string';
 import { SERVER_OBJECT_NAME } from './lib/constants';
 
 const injectSearchWidget = grabFocus => {
 	render(
 		<SearchWidget
 			grabFocus={ grabFocus }
 			initialFilters={ getFilterQuery() }
-			initialSort={ getSearchSort() }
+			initialSort={ getSortQuery() }
 			initialValue={ getSearchQuery() }
 			options={ window[ SERVER_OBJECT_NAME ] }
 		/>,

modules/search/instant-search/instant-search.scss

@@ -1,5 +1,6 @@
 @import './components/search-results.scss';
 @import './components/search-filters-widget.scss';
+@import './components/search-sort-widget.scss';
 @import './components/search-result-minimal.scss';
 //@import './components/search-result-engagement.scss';
 //@import './components/search-result-product.scss';

modules/search/instant-search/lib/constants.js

@@ -1 +1,3 @@
 export const SERVER_OBJECT_NAME = 'JetpackInstantSearchOptions';
+export const SORT_DIRECTION_ASC = 'ASC';
+export const SORT_DIRECTION_DESC = 'DESC';

modules/search/instant-search/lib/query-string.js

@@ -10,7 +10,8 @@ import get from 'lodash/get';
 /**
  * Internal dependencies
  */
-import { SERVER_OBJECT_NAME } from './constants';
+import { SERVER_OBJECT_NAME, SORT_DIRECTION_ASC } from './constants';
+import { getSortOption } from './sort';
 
 function getQuery() {
 	return decode( window.location.search.substring( 1 ) );
@@ -36,28 +37,28 @@ export function setSearchQuery( searchValue ) {
 	pushQueryString( encode( query ) );
 }
 
-export function getSearchSort() {
+export function getSortQuery() {
 	const query = getQuery();
 	const order = 'order' in query ? query.order : 'DESC';
 	const orderby = 'orderby' in query ? query.orderby : 'relevance';
 	let sort;
 	switch ( orderby ) {
 		case 'date':
-			if ( order === 'ASC' ) {
+			if ( order === SORT_DIRECTION_ASC ) {
 				sort = 'date_asc';
 			} else {
 				sort = 'date_desc';
 			}
 			break;
 		case 'price':
-			if ( order === 'ASC' ) {
+			if ( order === SORT_DIRECTION_ASC ) {
 				sort = 'price_asc';
 			} else {
 				sort = 'price_desc';
 			}
 			break;
 		case 'rating':
-			if ( order === 'ASC' ) {
+			if ( order === SORT_DIRECTION_ASC ) {
 				sort = 'rating_asc';
 			} else {
 				sort = 'rating_desc';
@@ -81,6 +82,19 @@ export function getSearchSort() {
 	return sort;
 }
 
+export function setSortQuery( sortKey ) {
+	const query = getQuery();
+	const sortOption = getSortOption( sortKey );
+
+	if ( ! sortOption ) {
+		return false;
+	}
+
+	query.orderby = sortOption.field;
+	query.order = sortOption.direction;
+	pushQueryString( encode( query ) );
+}
+
 function getFilterQueryByKey( filterKey ) {
 	const query = getQuery();
 	if ( ! ( filterKey in query ) ) {

modules/search/instant-search/lib/sort.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { SORT_DIRECTION_ASC, SORT_DIRECTION_DESC } from './constants';
+
+const sortOptions = {
+	date_asc: {
+		label: __( 'Oldest', 'jetpack' ),
+		field: 'date',
+		direction: SORT_DIRECTION_ASC,
+	},
+	date_desc: {
+		label: __( 'Newest', 'jetpack' ),
+		field: 'date',
+		direction: SORT_DIRECTION_DESC,
+	},
+	score_default: {
+		label: __( 'Relevance', 'jetpack' ),
+		field: 'relevance',
+		direction: SORT_DIRECTION_DESC,
+	},
+};
+
+export function getSortOptions() {
+	return sortOptions;
+}
+
+export function getSortOption( sortKey ) {
+	return sortOptions[ sortKey ];
+}