From 94bf10ad1212a1f414c8ba58cef563e108f0c3a6 Mon Sep 17 00:00:00 2001 From: bluefuton Date: Wed, 2 Oct 2019 11:08:30 +1300 Subject: [PATCH 01/10] Add sort widget --- .../components/search-sort-widget.jsx | 18 ++++++++++++++++++ .../components/search-widget.jsx | 5 ++++- 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 modules/search/instant-search/components/search-sort-widget.jsx diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx new file mode 100644 index 0000000000000..18497fc80a84f --- /dev/null +++ b/modules/search/instant-search/components/search-sort-widget.jsx @@ -0,0 +1,18 @@ +/** @jsx h */ + +/** + * External dependencies + */ +import { h, Component } from 'preact'; + +export default class SearchSortWidget extends Component { + render() { + return ( + + ); + } +} diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index dd33d0b4e1c39..3bce22a4b599f 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -15,6 +15,7 @@ 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 { removeChildren, hideSearchHeader } from '../lib/dom'; @@ -105,7 +106,9 @@ class SearchApp extends Component { Search -
+
+ +
Date: Wed, 2 Oct 2019 15:11:26 +1300 Subject: [PATCH 02/10] 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 ( - + ); } } 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 {
- +
Date: Wed, 2 Oct 2019 15:45:39 +1300 Subject: [PATCH 03/10] Pre-select current sort from query string --- .../instant-search/components/search-sort-widget.jsx | 12 +++++++++++- .../instant-search/components/search-widget.jsx | 2 +- modules/search/instant-search/lib/query-string.js | 1 + modules/search/instant-search/lib/sort.js | 8 ++++---- 4 files changed, 17 insertions(+), 6 deletions(-) diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx index d5aea531131a7..68d093976b730 100644 --- a/modules/search/instant-search/components/search-sort-widget.jsx +++ b/modules/search/instant-search/components/search-sort-widget.jsx @@ -12,6 +12,11 @@ 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 ( @@ -19,7 +24,12 @@ export default class SearchSortWidget extends Component { { __( 'Sort by' ) } diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index e56869d542eea..cfc56107f0861 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 {
- +
Date: Thu, 3 Oct 2019 11:24:06 +1300 Subject: [PATCH 04/10] Update sort options --- modules/search/instant-search/lib/sort.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/modules/search/instant-search/lib/sort.js b/modules/search/instant-search/lib/sort.js index 29fd24be8d14f..46d1c43e122ed 100644 --- a/modules/search/instant-search/lib/sort.js +++ b/modules/search/instant-search/lib/sort.js @@ -5,13 +5,8 @@ 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: 'score_keyword', label: __( 'Keyword' ) }, - { name: 'score_popularity', label: __( 'Popularity' ) }, - { name: 'score_relevance', label: __( 'Relevance' ) }, - { name: 'score_default', label: __( 'Score' ) }, + { name: 'date_asc', label: __( 'Oldest' ) }, + { name: 'date_desc', label: __( 'Newest' ) }, + { name: 'score_default', label: __( 'Relevance' ) }, ]; } From 1218c770944b1b64a19641c194d53f2ea3e6c429 Mon Sep 17 00:00:00 2001 From: bluefuton Date: Thu, 3 Oct 2019 14:25:37 +1300 Subject: [PATCH 05/10] Reflect sort selection in query string --- .../components/search-sort-widget.jsx | 23 +++++++++++++------ .../components/search-widget.jsx | 12 ++++++++-- .../search/instant-search/lib/constants.js | 2 ++ .../search/instant-search/lib/query-string.js | 17 ++++++++++++++ modules/search/instant-search/lib/sort.js | 19 +++++++++++---- 5 files changed, 59 insertions(+), 14 deletions(-) diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx index 68d093976b730..e668b4ea65f57 100644 --- a/modules/search/instant-search/components/search-sort-widget.jsx +++ b/modules/search/instant-search/components/search-sort-widget.jsx @@ -15,24 +15,33 @@ export default class SearchSortWidget extends Component { constructor( props ) { super( props ); this.state = { selected: this.props.initialValue }; + this.handleChange = this.handleChange.bind( this ); + } + + handleChange( event ) { + this.setState( { selected: event.target.value }, () => { + this.props.onChange( event.target.value ); + } ); } render() { const sortOptions = getSortOptions(); + /* eslint-disable jsx-a11y/no-onchange */ return ( ); + /* eslint-enable jsx-a11y/no-onchange */ } } diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index cfc56107f0861..1b2caaf3bb393 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -17,7 +17,7 @@ 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 } from '../lib/query-string'; import { removeChildren, hideSearchHeader } from '../lib/dom'; class SearchApp extends Component { @@ -61,6 +61,11 @@ class SearchApp extends Component { this.getResults( this.state.query, getFilterQuery() ); }; + onChangeSort = sort => { + setSortQuery( sort ); + this.getResults( this.state.query, sort ); + }; + getResults = ( query, filter, sort ) => { if ( query ) { this.requestId++; @@ -107,7 +112,10 @@ class SearchApp extends Component {
- +
Date: Thu, 3 Oct 2019 14:34:16 +1300 Subject: [PATCH 06/10] Sorting works! Renamed getSearchSort to getSortQuery for consistency --- .../instant-search/components/search-widget.jsx | 14 ++++++++++---- modules/search/instant-search/index.jsx | 4 ++-- modules/search/instant-search/lib/query-string.js | 2 +- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/modules/search/instant-search/components/search-widget.jsx b/modules/search/instant-search/components/search-widget.jsx index 1b2caaf3bb393..7c591fd0bc8f1 100644 --- a/modules/search/instant-search/components/search-widget.jsx +++ b/modules/search/instant-search/components/search-widget.jsx @@ -17,7 +17,13 @@ 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, setSortQuery } from '../lib/query-string'; +import { + setSearchQuery, + setFilterQuery, + getFilterQuery, + setSortQuery, + getSortQuery, +} from '../lib/query-string'; import { removeChildren, hideSearchHeader } from '../lib/dom'; class SearchApp extends Component { @@ -53,17 +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, sort ); + this.getResults( this.state.query, getFilterQuery(), getSortQuery() ); }; getResults = ( query, filter, sort ) => { diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index f545761b7fc7e..501d9b782be3a 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -9,7 +9,7 @@ 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 => { @@ -17,7 +17,7 @@ const injectSearchWidget = grabFocus => { , diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index e53434a1f07f0..ee1801a0619ce 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -38,7 +38,7 @@ export function setSearchQuery( searchValue ) { } // @todo separate sort field and sort direction? -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'; From 2417864a998e5bcdc10fff5e9874ab583a7bec32 Mon Sep 17 00:00:00 2001 From: bluefuton Date: Thu, 3 Oct 2019 14:56:05 +1300 Subject: [PATCH 07/10] Tidying --- .../components/search-sort-widget.jsx | 12 +++--- .../search/instant-search/lib/query-string.js | 40 +++++++++---------- modules/search/instant-search/lib/sort.js | 9 +++++ 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx index e668b4ea65f57..67761de75bb44 100644 --- a/modules/search/instant-search/components/search-sort-widget.jsx +++ b/modules/search/instant-search/components/search-sort-widget.jsx @@ -26,22 +26,24 @@ export default class SearchSortWidget extends Component { render() { const sortOptions = getSortOptions(); - /* eslint-disable jsx-a11y/no-onchange */ return ( ); - /* eslint-enable jsx-a11y/no-onchange */ } } diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index ee1801a0619ce..5533fa5124fcd 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -10,8 +10,8 @@ import get from 'lodash/get'; /** * Internal dependencies */ -import { SERVER_OBJECT_NAME } from './constants'; -import { getSortOptions } from './sort'; +import { SERVER_OBJECT_NAME, SORT_DIRECTION_ASC } from './constants'; +import { getSortOption } from './sort'; function getQuery() { return decode( window.location.search.substring( 1 ) ); @@ -37,7 +37,6 @@ export function setSearchQuery( searchValue ) { pushQueryString( encode( query ) ); } -// @todo separate sort field and sort direction? export function getSortQuery() { const query = getQuery(); const order = 'order' in query ? query.order : 'DESC'; @@ -45,21 +44,21 @@ export function getSortQuery() { 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'; @@ -83,6 +82,19 @@ export function getSortQuery() { 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 ) ) { @@ -140,19 +152,3 @@ export function setFilterQuery( filterKey, filterValue ) { query[ filterKey ] = filterValue; pushQueryString( encode( query ) ); } - -export function setSortQuery( sort ) { - //console.log( 'new sort: ' + sort ); - - const query = getQuery(); - const sortOptions = getSortOptions(); - const sortOption = sortOptions[ sort ]; - - if ( ! sortOption ) { - return false; - } - - query.orderby = sortOption.field; - query.order = sortOption.direction; - pushQueryString( encode( query ) ); -} diff --git a/modules/search/instant-search/lib/sort.js b/modules/search/instant-search/lib/sort.js index cfb87c2414015..45ff9475a800e 100644 --- a/modules/search/instant-search/lib/sort.js +++ b/modules/search/instant-search/lib/sort.js @@ -2,6 +2,10 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ import { SORT_DIRECTION_ASC, SORT_DIRECTION_DESC } from './constants'; export function getSortOptions() { @@ -19,3 +23,8 @@ export function getSortOptions() { score_default: { label: __( 'Relevance' ), field: 'relevance', direction: SORT_DIRECTION_DESC }, }; } + +export function getSortOption( sortKey ) { + const sortOptions = getSortOptions(); + return sortOptions[ sortKey ]; +} From 374a9a87245434c6f100d41f77806e9c601b97fd Mon Sep 17 00:00:00 2001 From: Chris R Date: Fri, 4 Oct 2019 09:12:55 +1300 Subject: [PATCH 08/10] Add translation context Co-Authored-By: Greg Ichneumon Brown --- modules/search/instant-search/components/search-sort-widget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/search/instant-search/components/search-sort-widget.jsx b/modules/search/instant-search/components/search-sort-widget.jsx index 67761de75bb44..76ee00192a459 100644 --- a/modules/search/instant-search/components/search-sort-widget.jsx +++ b/modules/search/instant-search/components/search-sort-widget.jsx @@ -28,7 +28,7 @@ export default class SearchSortWidget extends Component { const sortOptions = getSortOptions(); return (