Add price & size to routes

web/components/Filters.js

@@ -15,16 +15,20 @@ export default class Filters extends React.Component {
   }
 
   onMaxPriceChange(e) {
+    const maxPrice = e.target.value;
+
     this.props.dispatch({
       type: "SET_MAX_PRICE",
-      action: { maxPrice: e.target.value }
+      action: {maxPrice}
     });
   }
 
   onMinPriceChange(e) {
+    const minPrice = e.target.value;
+
     this.props.dispatch({
       type: "SET_MIN_PRICE",
-      action: { minPrice: e.target.value }
+      action: {minPrice}
     });
   }
 
@@ -60,6 +64,7 @@ export default class Filters extends React.Component {
   }
 
   onRefreshClick() {
+
     this.updateSearch();
   }
 
@@ -70,6 +75,19 @@ export default class Filters extends React.Component {
   }
 
   updateSearch () {
+    const {minPrice, maxPrice, minSize, maxSize} = this.props.filters;
+
+    this.props.dispatch({
+      type: 'UPDATE_ROUTE',
+      action: {
+        params: {
+          minPrice,
+          maxPrice,
+          minSize,
+          maxSize
+        }
+      }
+    });
     this.props.dispatch({ type: "UPDATE_SEARCH" });
   }
 

web/components/Main.js

@@ -25,15 +25,19 @@ class Main extends React.Component {
 
     if (props.initialState) {
       props.initialState.sort = props.initialState.sort || state.sort;
-      state.filters.rooms = props.initialState.rooms;
+      state.filters.rooms     = props.initialState.rooms;
-      state.filters.category = props.initialState.category;
+      state.filters.category  = props.initialState.category;
-      state.sort = props.initialState.sort || state.sort;
+      state.sort              = props.initialState.sort || state.sort;
-      state.listingId = props.initialState.listingId;
+      state.listingId         = props.initialState.listingId;
-      state.bounds = props.initialState.bounds;
+      state.bounds            = props.initialState.bounds;
-      state.zoom = props.initialState.zoom;
+      state.zoom              = props.initialState.zoom;
       if (state.listingId) {
         state.listingDetails = true;
       }
+      state.filters.minSize  = props.initialState.minSize;
+      state.filters.maxSize  = props.initialState.maxSize;
+      state.filters.minPrice = props.initialState.minPrice;
+      state.filters.maxPrice = props.initialState.maxPrice;
     }
 
     this.state = state;

web/index.js

@@ -44,10 +44,12 @@ const getInitialState = (url) => {
     if (key === "zoom") {
       initialState.zoom = parseInt(value);
     }
+
+    if (["minSize", "maxSize", "minPrice", "maxPrice"].includes(key)) {
+      initialState[key] = parseFloat(value);
+    }
   }
 
-  console.log('initial state dump', initialState);
-  console.log('initial state ROOMS', initialState.rooms);
   return initialState;
 }
 

web/lib/router.js

@@ -35,7 +35,18 @@ export default class Router {
 
       this.state = Object.assign(this.state, cloned.params);
 
-      const {listingId, bounds, sort, rooms = {}, category = {}, zoom} = this.state;
+      const {
+        listingId,
+        minPrice,
+        maxPrice,
+        minSize,
+        maxSize,
+        bounds,
+        sort,
+        rooms = {},
+        category = {},
+        zoom
+      } = this.state;
 
       if (listingId) {
         params.push(`listingId=${listingId}`);
@@ -44,6 +55,21 @@ export default class Router {
       params.push(`sort=${sort}`);
       params.push(`bounds=${bounds}`);
       params.push(`zoom=${zoom}`);
+      if (maxPrice) {
+        params.push(`maxPrice=${maxPrice}`);
+      }
+
+      if (minPrice) {
+        params.push(`minPrice=${minPrice}`);
+      }
+
+      if (minSize) {
+        params.push(`minSize=${minSize}`);
+      }
+
+      if (maxSize) {
+        params.push(`maxSize=${maxSize}`);
+      }
       params.push(`rooms=${Object.keys(rooms).filter(v => rooms[v]).join(",")}`);
       params.push(`category=${Object.keys(category).filter(v => category[v]).join(",")}`);
     }