Only show listings that are visible in the current view

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>)
   }