From 03fa29c8200ef2dabd239a0f30268020d8986c31 Mon Sep 17 00:00:00 2001
From: bluefuton <chris@bluefuton.com>
Date: Wed, 2 Oct 2019 15:11:26 +1300
Subject: [PATCH] Display list of sort options

---
 .../components/search-sort-widget.jsx         | 20 ++++++++++++++-----
 .../components/search-sort-widget.scss        |  3 +++
 .../components/search-widget.jsx              |  2 +-
 .../search/instant-search/instant-search.scss |  1 +
 modules/search/instant-search/lib/sort.js     | 17 ++++++++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 modules/search/instant-search/components/search-sort-widget.scss
 create mode 100644 modules/search/instant-search/lib/sort.js

diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx
index 18497fc80a84f..d5aea531131a7 100644
--- a/modules/search/instant-search/components/search-sort-widget.jsx
+++ b/modules/search/instant-search/components/search-sort-widget.jsx
@@ -4,15 +4,25 @@
  * External dependencies
  */
 import { h, Component } from 'preact';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getSortOptions } from '../lib/sort';
 
 export default class SearchSortWidget extends Component {
 	render() {
+		const sortOptions = getSortOptions();
 		return (
-			<select className="jetpack-instant-search__sort-widget">
-				<option>one</option>
-				<option>two</option>
-				<option>three</option>
-			</select>
+			<label>
+				{ __( 'Sort by' ) }
+				<select className="jetpack-instant-search__sort-widget-select">
+					{ sortOptions.map( option => (
+						<option key={ option.name }>{ option.label }</option>
+					) ) }
+				</select>
+			</label>
 		);
 	}
 }
diff --git a/modules/search/instant-search/components/search-sort-widget.scss b/modules/search/instant-search/components/search-sort-widget.scss
new file mode 100644
index 0000000000000..996035d471d6a
--- /dev/null
+++ b/modules/search/instant-search/components/search-sort-widget.scss
@@ -0,0 +1,3 @@
+.jetpack-instant-search__sort-widget-select {
+	margin-left: 4px;
+}
diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx
index 3bce22a4b599f..e56869d542eea 100644
--- 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 />
+								<SearchSortWidget widget={ widget } />
 							</div>
 							<SearchFiltersWidget
 								initialValues={ this.props.initialFilters }
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
index 8bbacfb1c1b23..081299e0fda13 100644
--- a/modules/search/instant-search/instant-search.scss
+++ b/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';
diff --git a/modules/search/instant-search/lib/sort.js b/modules/search/instant-search/lib/sort.js
new file mode 100644
index 0000000000000..981e7888945ee
--- /dev/null
+++ b/modules/search/instant-search/lib/sort.js
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getSortOptions() {
+	return [
+		{ name: 'date', label: __( 'Date' ) },
+		{ 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' ) },
+	];
+}