Search & show listings

web/components/ListingDetails.js

@@ -1,12 +1,21 @@
 import React from 'react';
 
 export default class ListingDetails extends React.Component {
+  onReadMore (e) {
+    e.preventDefault();
+    this.props.dispatch({type: 'EXPAND_DESCRIPTION'});
+  }
+
   onBackClick() {
     if (this.props.onBackClick) {
       this.props.onBackClick();
     }
   }
+
   render() {
+    const {listing, descriptionExpanded} = this.props;
+
+    const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
     return (
       <div className="ld-container">
         <div className="ld-header">
@@ -21,7 +30,6 @@ export default class ListingDetails extends React.Component {
           </div>
           <button className="hide-listing">
             <i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
-
             <span>
               Sakrij
             </span>
@@ -30,16 +38,16 @@ export default class ListingDetails extends React.Component {
 
         <div className="ld-details">
           <div className="ld-image-container">
-            <img src="https://d1qwdw9cs0do74.cloudfront.net/150698038/640x480"></img>
+            <img src={listing.images[0]}></img>
           </div>
           <div className="ld-price-address-box">
             <div className="ld-price">
-              120 000 KM
+              {listing.price}
             </div>
 
             <div className="ld-address">
-              <div className="">Hakije Turajlica 4</div>
-              <div className="">Novi Grad, Sarajevo</div>
+              <div className="">{listing.address}</div>
+              <div className="">{listing.location}</div>
             </div>
           </div>
 
@@ -50,7 +58,7 @@ export default class ListingDetails extends React.Component {
             </div>
             <div className="ld-feature-box">
               <i className="fa fa-home"></i>
-              88m2
+              {listing.size}m2
             </div>
             <div className="ld-feature-box">
               <i className="fa fa-home"></i>
@@ -64,17 +72,15 @@ export default class ListingDetails extends React.Component {
           <div className="ld-check-availability">
             <button>Kontaktiraj</button>
           </div>
-          <div className="ld-description">
-            Agencija "Nekretnina", (www.nekretnina.ba), prodaje komforan trosoban stan, 67m2, na veoma lijepoj lokaciji, Dobrinja 3. Stan se nalazi na visokom prizemlju stambene zgrade od samo četiri etaže. 
-            Sastoji se od: Ulaznog hodnika, dnevnog boravka, kuhinje, trpezarije, iz koje se izlazi na balkon, dvije spavaće sobe i kupatila. Stan je dvostran a posjeduje i podrumsku prostoriju. Veoma miran kvart sa odličnim komšilukom, okružen šetalištima i parkovima za djecu, sa javnim i privatnim parkingom. Stan zahtjeva dodatna ulaganja po vlastitom izboru i odlična je ponuda za višečlanu porodicu. 
-            Stan je trenutno bez namještaja i kuhinje, spreman za obnovu i useljenje.
-              U neposrednoj blizini se nalaze sve važnije ustanove, osnovna i srednja škola, Peta gimnazija, vrtići, uslužne djelatnosti te gradski saobraćaj. Molimo sve ozbiljno zainteresovane osobe da se jave za dodatne informacije.
-                Želite kvalitetno investirati u nekretnine? Nazovite nas!
+          <div className={descriptionClasses}>
+            {listing.longDescription}
           </div>
-          <div className="ld-read-more">
-            <a href="">Procitajte vise</a>
-          </div>
-
+          {!descriptionExpanded
+            ?
+              <div className="ld-read-more">
+                <a href="" onClick={this.onReadMore.bind(this)}>Pročitajte više</a>
+              </div>
+              : null}
           <div className="ld-footer">
           </div>
         </div>