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