merge to Fix: sort did reset itself after filter update

sharetribe · Jun 3, 2020 · b2f10f0 · b2f10f0
1 parent c615565
commit b2f10f0
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git a/src/components/SortBy/SortBy.js b/src/components/SortBy/SortBy.js
@@ -10,7 +10,7 @@ import SortByPopup from './SortByPopup';
 const SortBy = props => {
   const { sort, showAsPopup, isConflictingFilterActive, intl, ...rest } = props;
 
-  const { relevanceKey } = config.custom.sortConfig;
+  const { relevanceKey, queryParamName } = config.custom.sortConfig;
 
   const options = config.custom.sortConfig.options.map(option => {
     const isRelevance = option.key === relevanceKey;
@@ -22,7 +22,7 @@ const SortBy = props => {
   });
   const defaultValue = 'createdAt';
   const componentProps = {
-    urlParam: 'sort',
+    urlParam: queryParamName,
     label: intl.formatMessage({ id: 'SortBy.heading' }),
     options,
     initialValue: isConflictingFilterActive ? relevanceKey : sort || defaultValue,

diff --git a/src/containers/SearchPage/MainPanel.js b/src/containers/SearchPage/MainPanel.js
@@ -34,7 +34,9 @@ const cleanSearchFromConflictingParams = (searchParams, sortConfig, filterConfig
     searchParams,
     filterConfig
   );
-  return sortingFiltersActive ? { ...searchParams, sort: null } : searchParams;
+  return sortingFiltersActive
+    ? { ...searchParams, [sortConfig.queryParamName]: null }
+    : searchParams;
 };
 
 /**
@@ -207,7 +209,7 @@ class MainPanel extends Component {
       return sortConfig.active ? (
         <SortBy
           {...mobileClassesMaybe}
-          sort={urlQueryParams.sort}
+          sort={urlQueryParams[sortConfig.queryParamName]}
           isConflictingFilterActive={!!conflictingFilterActive}
           onSelect={this.handleSortBy}
           showAsPopup

diff --git a/src/containers/SearchPage/SearchPage.helpers.js b/src/containers/SearchPage/SearchPage.helpers.js
@@ -102,11 +102,12 @@ export const validURLParamsForExtendedData = (params, filters) => {
 
 // extract search parameters, including a custom URL params
 // which are validated by mapping the values to marketplace custom config.
-export const pickSearchParamsOnly = (params, filters) => {
-  const { address, origin, bounds, sort, ...rest } = params || {};
+export const pickSearchParamsOnly = (params, filters, sortConfig) => {
+  const { address, origin, bounds, ...rest } = params || {};
   const boundsMaybe = bounds ? { bounds } : {};
   const originMaybe = config.sortSearchByDistance && origin ? { origin } : {};
   const filterParams = validFilterParams(rest, filters);
+  const sort = rest[sortConfig.queryParamName];
   const sortMaybe = sort ? { sort } : {};
 
   return {

diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js
@@ -108,6 +108,7 @@ export class SearchPageComponent extends Component {
       intl,
       listings,
       filterConfig,
+      sortConfig,
       history,
       location,
       mapListings,
@@ -128,11 +129,11 @@ export class SearchPageComponent extends Component {
 
     // urlQueryParams doesn't contain page specific url params
     // like mapSearch, page or origin (origin depends on config.sortSearchByDistance)
-    const urlQueryParams = pickSearchParamsOnly(searchInURL, filterConfig);
+    const urlQueryParams = pickSearchParamsOnly(searchInURL, filterConfig, sortConfig);
 
     // Page transition might initially use values from previous search
     const urlQueryString = stringify(urlQueryParams);
-    const paramsQueryString = stringify(pickSearchParamsOnly(searchParams, filterConfig));
+    const paramsQueryString = stringify(pickSearchParamsOnly(searchParams, filterConfig, sortConfig));
     const searchParamsAreInSync = urlQueryString === paramsQueryString;
 
     const validQueryParams = validURLParamsForExtendedData(searchInURL, filterConfig);
@@ -230,6 +231,7 @@ SearchPageComponent.defaultProps = {
   searchParams: {},
   tab: 'listings',
   filterConfig: config.custom.filters,
+  sortConfig: config.custom.sortConfig,
   activeListingId: null,
 };
 
@@ -246,6 +248,7 @@ SearchPageComponent.propTypes = {
   searchParams: object,
   tab: oneOf(['filters', 'listings', 'map']).isRequired,
   filterConfig: propTypes.filterConfig,
+  sortConfig: propTypes.sortConfig,
 
   // from withRouter
   history: shape({

diff --git a/src/marketplace-custom-config.js b/src/marketplace-custom-config.js
@@ -149,6 +149,10 @@ export const sortConfig = {
   // Enable/disable the sorting control in the SearchPage
   active: true,
 
+  // Note: queryParamName 'sort' is fixed,
+  // you can't change it since Flex API expects it to be named as 'sort'
+  queryParamName: 'sort',
+
   // Internal key for the relevance option, see notes below.
   relevanceKey: 'relevance',
 

diff --git a/src/util/types.js b/src/util/types.js
@@ -420,6 +420,7 @@ propTypes.filterConfig = arrayOf(
 
 propTypes.sortConfig = shape({
   active: bool,
+  queryParamName: oneOf(['sort']).isRequired,
   relevanceKey: string.isRequired,
   conflictingFilters: arrayOf(string),
   options: arrayOf(