Only show listings that are visible in the current view

web/components/ListingDetails.js

@@ -60,7 +60,7 @@ export default class ListingDetails extends React.Component {
           <div className="ld-features">
             <div className="ld-feature-box">
               <i className="fa fa-bed"></i>
-              4 sobe
+              {listing.rooms}
             </div>
             <div className="ld-feature-box">
               <i className="fa fa-home"></i>

web/components/Listings.js

@@ -1,13 +1,53 @@
 import React from 'react';
 
 export default class Listings extends React.Component {
-  onListingClick() {
-    if (this.props.onListingClick) {
-      this.props.onListingClick();
-    }
+  onListingClick(id) {
+    this.props.dispatch({
+      type: 'VIEW_LISTING_DETAILS',
+      action: {
+        id
+      }
+    });
   }
+
+  renderListings () {
+    const {listings = (new Map())} = this.props;
+
+    const rendered = [];
+
+    for(const l of listings.values()) {
+      const {images} = l;
+
+      rendered.push(
+        <div className="property-list-item" onClick={this.onListingClick.bind(this, l.url)}>
+          <div className="pli-image">
+            <img src={images[0]} alt=""></img>
+          </div>
+          <div className="pli-details">
+            <div className="price">{l.price}</div>
+            <div className="description">{l.rooms ? `${l.rooms}, `: null}{l.size ? `${l.size}m2`: null}</div>
+            <div className="address">
+              <div className="street">
+                {l.address}
+              </div>
+              <div className="location">
+                {l.location}
+              </div>
+            </div>
+            <div className="hours-ago">Prije 2 sata</div>
+          </div>
+        </div>
+
+      );
+    }
+
+    return rendered;
+  }
+
   render() {
 
+    const {listings = (new Map())} = this.props;
+
     return (
       <div className="listings">
         <div className="listings-header">
@@ -15,51 +55,17 @@ export default class Listings extends React.Component {
             <div className="select-group">
               <select name="listings-type" id="listings-type">
                 <option value="cijena">Cijena: od najmanje</option>
+                <option value="cijena">Cijena: od najvece</option>
               </select>
             </div>
           </div>
           <div className="listings-count">
-            322 rezultata
+            {listings.size} rezultata
           </div>
         </div>
 
         <div className="listings-items">
-          <div className="property-list-item" onClick={this.onListingClick.bind(this)}>
-            <div className="pli-image">
-              <img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
-              </div>
-              <div className="pli-details">
-                <div className="price">12 000 KM</div>
-                <div className="description">4 sobe, 111m2</div>
-                <div className="address">
-                  <div className="street">
-                    Hakije Turajlica 2/2
-                  </div>
-                  <div className="location">
-                    Sarajevo, Novi Grad
-                  </div>
-                </div>
-                <div className="hours-ago">Prije 2 sata</div>
-              </div>
-            </div>
-            <div className="property-list-item">
-              <div className="pli-image">
-                <img src="https://d37lj287rvypnj.cloudfront.net/151086207/medium" alt=""></img>
-                </div>
-                <div className="pli-details">
-                  <div className="price">12 000 KM</div>
-                  <div className="description">4 sobe, 111m2</div>
-                  <div className="address">
-                    <div className="street">
-                      Hakije Turajlica 2/2
-                    </div>
-                    <div className="location">
-                      Sarajevo, Novi Grad
-                    </div>
-                  </div>
-                  <div className="hours-ago">Prije 2 sata</div>
-                </div>
-              </div>
+          {this.renderListings()}
         </div>
       </div>)
   }

web/components/Main.js

@@ -51,7 +51,7 @@ class Main extends React.Component {
     };
     var searchBox = new google.maps.places.Autocomplete(input, options);
 
-    searchBox.addListener('place_changed', function() {
+    searchBox.addListener('place_changed', () => {
       var place = searchBox.getPlace();
 
       if (!place.geometry) {
@@ -66,6 +66,7 @@ class Main extends React.Component {
         map.setZoom(18);
       }
       console.log(map.getBounds());
+      this.dispatch({type: 'SEARCH_PLACE_CHANGED'});
     });
 
     control.addEventListener('click', (e) => {
@@ -154,7 +155,10 @@ class Main extends React.Component {
         onBackClick={this.onBackClick.bind(this)}/>);
     } else {
       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)}/>);
+      children.push(<Listings
+        listings={this.state.listings}
+        dispatch={this.dispatch.bind(this)}
+        onListingClick={this.onListingClick.bind(this)}/>);
     }
     const content = (
       <div className="right-content">

web/lib/handlers.js

@@ -16,7 +16,7 @@ const viewListingDetails= ({type, action}, component) => {
 }
 
 const listingsLoaded = ({type, action}, component) => {
-  const currentListings = component.state.listings;
+  const currentListings = new Map(); //component.state.listings;
 
   for(const listing of action.listings) {
     currentListings.set(listing.url, listing)
@@ -55,6 +55,12 @@ const viewImage = ({type, action}, component) => {
   });
 }
 
+const searchPlaceChanged = ({type, action}, component) => {
+  component.setState({
+    listingDetails: false
+  });
+}
+
 const handlers = {
   'SET_MIN_PRICE': setMinPrice,
   'LISTINGS_LOADED': listingsLoaded,
@@ -62,6 +68,7 @@ const handlers = {
   'PREV_IMAGE': prevImage,
   'NEXT_IMAGE': nextImage,
   'VIEW_IMAGE': viewImage,
+  'SEARCH_PLACE_CHANGED': searchPlaceChanged,
   'VIEW_LISTING_DETAILS': viewListingDetails
 }