Make price filtering work

web/components/Filters.js

@@ -8,6 +8,10 @@ export default class Filters extends React.Component {
     }
   }
 
+  onMaxPriceChange (e) {
+    this.props.dispatch({type: 'SET_MAX_PRICE', action: {maxPrice: e.target.value}})
+  }
+
   onMinPriceChange (e) {
     this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
   }
@@ -17,6 +21,10 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
   }
 
+  onRefreshClick () {
+    this.props.dispatch({type: 'UPDATE_SEARCH'});
+  }
+
   render() {
 
     const {filters} = this.props;
@@ -38,7 +46,8 @@ export default class Filters extends React.Component {
           </div>
 
           <div className="filter-content value-between-box">
-            izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input></input>
+            izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input onChange={this.onMaxPriceChange.bind(this)}></input>
+            {this.props.filters.dirty? <button onClick={this.onRefreshClick.bind(this)}>Refresh</button>: null}
           </div>
 
         </div>

web/components/Main.js

@@ -82,37 +82,7 @@ class Main extends React.Component {
     this.map = map;
 
     map.addListener('idle', () => {
-      const properties = loadProperties({
-        bounds: map.getBounds().toUrlValue(),
-        minPrice: this.state.filters.minPrice});
-
-        properties.then(p=> p.text()).then(p => {
-          const data = JSON.parse(p);
-          console.log('props', data)
-          for(const [index, prop] of data.entries()) {
-            const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
-
-            const marker = new google.maps.Marker({
-              position: myLatLng,
-              map: map,
-              title: prop.title
-            });
-
-            marker.addListener('click', () => {
-              console.log('clicking...')
-              this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
-                id: prop.url
-              }})
-            });
-          }
-
-          this.dispatch({
-            type: 'LISTINGS_LOADED',
-            action: {
-              listings: data
-            }
-          });
-        })
+      this.refreshListings();
     });
   }
 
@@ -128,6 +98,44 @@ class Main extends React.Component {
     });
   }
 
+  refreshListings() {
+    const map = this.map;
+    const properties = loadProperties({
+      bounds: map.getBounds().toUrlValue(),
+      minPrice: this.state.filters.minPrice,
+      maxPrice: this.state.filters.maxPrice,
+      rooms: this.state.filters.rooms
+    });
+
+      properties.then(p=> p.text()).then(p => {
+        const data = JSON.parse(p);
+        console.log('props', data)
+        for(const [index, prop] of data.entries()) {
+          const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
+
+          const marker = new google.maps.Marker({
+            position: myLatLng,
+            map: map,
+            title: prop.title
+          });
+
+          marker.addListener('click', () => {
+            console.log('clicking...')
+            this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+              id: prop.url
+            }})
+          });
+        }
+
+        this.dispatch({
+          type: 'LISTINGS_LOADED',
+          action: {
+            listings: data
+          }
+        });
+      })
+  }
+
   onListingClick() {
     this.setState({
       listingDetails: true

web/lib/api.js

@@ -1,9 +1,19 @@
 import fetch from 'isomorphic-fetch';
 
-export const loadProperties = ({bounds, minPrice = 0}) => {
+export const loadProperties = ({
+  bounds,
+  minPrice = '',
+  maxPrice = '',
+  rooms
+}) => {
+  const allRooms = Object
+    .keys(rooms)
+    .filter((v) => rooms[v])
+    .join(',');
+
   // TODO: handle errors
   //return fetch(process.env.API_URL + '/api/search', {
-  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}`, {
+  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}`, {
     //credentials: 'include'
   });
 

web/lib/handlers.js

@@ -1,8 +1,19 @@
+const setMaxPrice = ({type, action}, component) => {
+  component.setState({
+    filters: {
+      ...component.state.filters,
+      maxPrice: parseFloat(action.maxPrice),
+      dirty: true
+    }
+  })
+}
+
 const setMinPrice = ({type, action}, component) => {
   component.setState({
     filters: {
       ...component.state.filters,
-      minPrice: parseFloat(action.minPrice) || 0
+      minPrice: parseFloat(action.minPrice),
+      dirty: true
     }
   })
 }
@@ -73,11 +84,26 @@ const setRooms = ({type, action}, component) => {
         [action.rooms]: !prevRooms[action.rooms]
       }
     }
+  }, () => {
+    component.refreshListings();
+  });
+}
+
+const updateSearch = ({type, action}, component) => {
+  console.log('updating search');
+  component.setState({
+    filters: {
+      ...component.state.filters,
+      dirty: false
+    }
+  }, () => {
+    component.refreshListings();
   });
 }
 
 const handlers = {
   'SET_MIN_PRICE': setMinPrice,
+  'SET_MAX_PRICE': setMaxPrice,
   'LISTINGS_LOADED': listingsLoaded,
   'EXPAND_DESCRIPTION': expandDescription,
   'PREV_IMAGE': prevImage,
@@ -85,7 +111,8 @@ const handlers = {
   'VIEW_IMAGE': viewImage,
   'SEARCH_PLACE_CHANGED': searchPlaceChanged,
   'SET_ROOMS': setRooms,
-  'VIEW_LISTING_DETAILS': viewListingDetails
+  'VIEW_LISTING_DETAILS': viewListingDetails,
+  'UPDATE_SEARCH': updateSearch
 }
 
 export const handleMessage = ({type, action}, component) => {