Search & show listings

web/components/Main.js

@@ -3,15 +3,25 @@ import Filters from './Filters';
 import Listings from './Listings';
 import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
+import {loadProperties} from '../lib/api'
+import {handleMessage} from '../lib/handlers'
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      listingDetails: false
+      listingDetails: false,
+      filters: {
+        minPrice: 0
+      }
     };
   }
 
+  dispatch ({type, action = {}}) {
+    console.log('DISPATCH', this);
+    handleMessage({type, action}, this);
+  }
+
   componentDidMount() {
     const uluru = {lat: 43.845031, lng: 18.4019262};
     const map = new google.maps.Map(this.refs.map, {
@@ -28,7 +38,8 @@ class Main extends React.Component {
     var control = document.createElement('div');
     control.classList.add('filters-btn-toggle');
     control.innerHTML = '<button>Filters</button>';
-    control.style = "top: 200px;"
+    //control.style = "top: 200px;"
+    control["style"]= "top: 200px;"
 
     var input = document.getElementById('gmaps-places-input');
 
@@ -52,6 +63,7 @@ class Main extends React.Component {
         map.setCenter(place.geometry.location);
         map.setZoom(18);
       }
+      console.log(map.getBounds());
     });
 
     control.addEventListener('click', (e) => {
@@ -59,9 +71,45 @@ class Main extends React.Component {
         mapClicked: true
       });
     });
+
+
     control.index = 1;
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
     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: index
+              }})
+            });
+          }
+
+          this.dispatch({
+            type: 'LISTINGS_LOADED',
+            action: {
+              listings: data
+            }
+          });
+        })
+    });
   }
 
   onCloseClick(e) {
@@ -93,9 +141,15 @@ class Main extends React.Component {
     const children = [];
 
     if (this.state.listingDetails) {
-      children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
+      const listing = this.state.listings[this.state.listingId];
+      console.log(this.state);
+      children.push(<ListingDetails
+        listing={listing}
+        dispatch={this.dispatch.bind(this)}
+        descriptionExpanded={this.state.descriptionExpanded}
+        onBackClick={this.onBackClick.bind(this)}/>);
     } else {
-      children.push(<Filters onClose={this.onCloseClick.bind(this)}/>);
+      children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
       children.push(<Listings onListingClick={this.onListingClick.bind(this)}/>);
     }
     const content = (
@@ -107,8 +161,8 @@ class Main extends React.Component {
   }
 
   render() {
-    const leftStyle  = {};
-    const rightStyle = {};
+    const leftStyle      = {};
+    const rightStyle     = {};
     const listingDetails = true;
 
     let leftClass    = 'left-base';