diff --git a/web/components/Listings.js b/web/components/Listings.js index 51c9fc4..f69969f 100644 --- a/web/components/Listings.js +++ b/web/components/Listings.js @@ -20,7 +20,10 @@ export default class Listings extends React.Component { const {images} = l; rendered.push( -
+
diff --git a/web/components/Main.js b/web/components/Main.js index 7551d16..ecf73f5 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -21,7 +21,6 @@ class Main extends React.Component { } dispatch ({type, action = {}}) { - console.log('DISPATCH', this); handleMessage({type, action}, this); } @@ -33,10 +32,11 @@ class Main extends React.Component { streetViewControl: false, mapTypeControl: false }); - const marker = new google.maps.Marker({ - position: uluru, - map: map - }); + + //const marker = new google.maps.Marker({ + //position: uluru, + //map: map + //}); var control = document.createElement('div'); control.classList.add('filters-btn-toggle'); @@ -81,11 +81,25 @@ class Main extends React.Component { map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); this.map = map; + map.addListener('zoom_changed', () => { + console.log('zoom_changed'); + this.removeAllMarkers(); + this.markers = []; + }); + map.addListener('idle', () => { + console.log('idle'); this.refreshListings(); }); } + removeAllMarkers () { + if (this.markers) { + console.log('removeAllMarkers'); + this.markers.forEach((m) => m.marker.setMap(null)); + } + } + onCloseClick(e) { if (this.state.mapClicked) { setTimeout(() => { @@ -98,7 +112,11 @@ class Main extends React.Component { }); } + /* + * Refreshes search + */ refreshListings() { + console.log('refreshListings'); const map = this.map; const { rooms, @@ -109,8 +127,9 @@ class Main extends React.Component { category } = this.state.filters; + const bounds = map.getBounds(); const properties = loadProperties({ - bounds: map.getBounds().toUrlValue(), + bounds: bounds.toUrlValue(), rooms, minSize, maxSize, @@ -119,30 +138,62 @@ class Main extends React.Component { category }); - properties.then(p=> p.text()).then(p => { + const markerExists = (id) => { + return (this.markers || []).findIndex(m => m.id === id) !== -1; + } + + properties.then(p => p.text()).then(p => { + const data = JSON.parse(p); - console.log('props', data) + console.log('results_received'); + + const listingExists = (id) => { + return data.findIndex(l => l._id === id) !== -1 + }; + + + const newMarkers = []; + + if (this.markers) { + this.markers.forEach((m) => { + if (!listingExists(m.id)) { + m.marker.setMap(null); + } else { + newMarkers.push(m); + } + }); + console.log('markers_removed'); + } + 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 - }); + if (!markerExists(p._id)) { + 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 - }}) - }); + marker.addListener('click', () => { + console.log('clicking...') + this.dispatch({type: 'VIEW_LISTING_DETAILS', action: { + id: prop.url + }}) + }); + + newMarkers.push({ + marker, + id: prop._id + }); + } } this.dispatch({ type: 'LISTINGS_LOADED', action: { - listings: data + listings: data, + newMarkers } }); }) diff --git a/web/lib/handlers.js b/web/lib/handlers.js index de3b25a..db6ce87 100644 --- a/web/lib/handlers.js +++ b/web/lib/handlers.js @@ -52,7 +52,7 @@ const viewListingDetails = ({ type, action }, component) => { }; const listingsLoaded = ({ type, action }, component) => { - const currentListings = new Map(); //component.state.listings; + const currentListings = new Map(); for (const listing of action.listings) { currentListings.set(listing.url, listing); @@ -60,6 +60,8 @@ const listingsLoaded = ({ type, action }, component) => { component.setState({ listings: currentListings + }, () => { + component.markers = action.newMarkers; }); };