SearchPage: add price filter

src/containers/SearchPage/SearchPage.helpers.js

@@ -21,10 +21,19 @@ export const validURLParamForExtendedData = (paramName, paramValue, filters) =>
   const valueArray = paramValue ? paramValue.split(',') : [];
 
   if (filterConfig && valueArray.length > 0) {
-    const allowedValues = filterConfig.options.map(o => o.key);
+    const { min, max } = filterConfig.config || {};
 
-    const validValues = intersection(valueArray, allowedValues).join(',');
-    return validValues.length > 0 ? { [paramName]: validValues } : {};
+    if (filterConfig.options) {
+      const allowedValues = filterConfig.options.map(o => o.key);
+
+      const validValues = intersection(valueArray, allowedValues).join(',');
+      return validValues.length > 0 ? { [paramName]: validValues } : {};
+    } else if (filterConfig.config && min != null && max != null) {
+      const validValues = valueArray.map(v => {
+        return v < min ? min : v > max ? max : v;
+      });
+      return validValues.length === 2 ? { [paramName]: validValues.join(',') } : {};
+    }
   }
   return {};
 };

src/containers/SearchPage/SearchPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { array, bool, func, number, oneOf, object, shape, string } from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -52,7 +52,7 @@ export class SearchPageComponent extends Component {
   }
 
   filters() {
-    const { categories, amenities } = this.props;
+    const { categories, amenities, priceFilterConfig } = this.props;
 
     return {
       categoryFilter: {
@@ -63,6 +63,10 @@ export class SearchPageComponent extends Component {
         paramName: 'pub_amenities',
         options: amenities,
       },
+      priceFilter: {
+        paramName: 'price',
+        config: priceFilterConfig,
+      },
     };
   }
 
@@ -205,6 +209,7 @@ export class SearchPageComponent extends Component {
             primaryFilters={{
               categoryFilter: filters.categoryFilter,
               amenitiesFilter: filters.amenitiesFilter,
+              priceFilter: filters.priceFilter,
             }}
           />
           <ModalInMobile
@@ -249,11 +254,10 @@ SearchPageComponent.defaultProps = {
   tab: 'listings',
   categories: config.custom.categories,
   amenities: config.custom.amenities,
+  priceFilterConfig: config.custom.priceFilterConfig,
   activeListingId: null,
 };
 
-const { array, bool, func, oneOf, object, shape, string } = PropTypes;
-
 SearchPageComponent.propTypes = {
   listings: array,
   mapListings: array,
@@ -268,6 +272,11 @@ SearchPageComponent.propTypes = {
   tab: oneOf(['filters', 'listings', 'map']).isRequired,
   categories: array,
   amenities: array,
+  priceFilterConfig: shape({
+    min: number.isRequired,
+    max: number.isRequired,
+    step: number.isRequired,
+  }),
 
   // from withRouter
   history: shape({

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -66,6 +66,14 @@ exports[`SearchPageComponent matches snapshot 1`] = `
             ],
             "paramName": "pub_category",
           },
+          "priceFilter": Object {
+            "config": Object {
+              "max": 1000,
+              "min": 0,
+              "step": 5,
+            },
+            "paramName": "price",
+          },
         }
       }
       resultsCount={0}