Pre-select current sort from query string

Automattic · Oct 2, 2019 · 5541f7c · 5541f7c
1 parent 03fa29c
commit 5541f7c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx
@@ -12,14 +12,24 @@ import { __ } from '@wordpress/i18n';
 import { getSortOptions } from '../lib/sort';
 
 export default class SearchSortWidget extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = { selected: this.props.initialValue };
+	}
+
 	render() {
 		const sortOptions = getSortOptions();
 		return (
 			<label>
 				{ __( 'Sort by' ) }
 				<select className="jetpack-instant-search__sort-widget-select">
 					{ sortOptions.map( option => (
-						<option key={ option.name }>{ option.label }</option>
+						<option
+							key={ option.name }
+							selected={ this.state.selected && this.state.selected === option.name }
+						>
+							{ option.label }
+						</option>
 					) ) }
 				</select>
 			</label>

diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx
@@ -107,7 +107,7 @@ class SearchApp extends Component {
 								</button>
 							</div>
 							<div className="jetpack-search-sort-wrapper">
-								<SearchSortWidget widget={ widget } />
+								<SearchSortWidget initialValue={ this.props.initialSort } />
 							</div>
 							<SearchFiltersWidget
 								initialValues={ this.props.initialFilters }

diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js
@@ -36,6 +36,7 @@ export function setSearchQuery( searchValue ) {
 	pushQueryString( encode( query ) );
 }
 
+// @todo separate sort field and sort direction?
 export function getSearchSort() {
 	const query = getQuery();
 	const order = 'order' in query ? query.order : 'DESC';

diff --git a/modules/search/instant-search/lib/sort.js b/modules/search/instant-search/lib/sort.js
@@ -9,9 +9,9 @@ export function getSortOptions() {
 		{ name: 'price', label: __( 'Price' ) },
 		{ name: 'rating', label: __( 'Rating' ) },
 		{ name: 'recency', label: __( 'Recency' ) },
-		{ name: 'keyword', label: __( 'Keyword' ) },
-		{ name: 'popularity', label: __( 'Popularity' ) },
-		{ name: 'relevance', label: __( 'Relevance' ) },
-		{ name: 'score', label: __( 'Score' ) },
+		{ name: 'score_keyword', label: __( 'Keyword' ) },
+		{ name: 'score_popularity', label: __( 'Popularity' ) },
+		{ name: 'score_relevance', label: __( 'Relevance' ) },
+		{ name: 'score_default', label: __( 'Score' ) },
 	];
 }