97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import Gallery from './gallery';
|
|
|
|
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;
|
|
if (!listing) {
|
|
return null;
|
|
}
|
|
const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
|
|
const images = listing.images.map((image) => ({original: image, thumbnail: image}))
|
|
|
|
return (
|
|
<div className="ld-container">
|
|
<div className="ld-header">
|
|
<div className="back-to-results">
|
|
<button className="back-to-results-btn"
|
|
onClick={this.onBackClick.bind(this)}>
|
|
<i className="fa fa-arrow-left" aria-hidden="true"></i>
|
|
<span>
|
|
Nazad na rezultate
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<button className="hide-listing">
|
|
<i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
|
|
<span>
|
|
Sakrij
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="ld-details">
|
|
<Gallery
|
|
dispatch={this.props.dispatch}
|
|
images={listing.images}
|
|
imageIndex={this.props.imageIndex} />
|
|
<div className="ld-price-address-box">
|
|
<div className="ld-price">
|
|
{listing.price}
|
|
</div>
|
|
|
|
<div className="ld-address">
|
|
<div className="">{listing.address}</div>
|
|
<div className="">{listing.location}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ld-features">
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-bed"></i>
|
|
{listing.rooms}
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home"></i>
|
|
{listing.size}m2
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home"></i>
|
|
1. sprat
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home"></i>
|
|
Balkon
|
|
</div>
|
|
</div>
|
|
<div className="ld-check-availability">
|
|
<button>Kontaktiraj</button>
|
|
</div>
|
|
<div className={descriptionClasses}>
|
|
{listing.longDescription}
|
|
</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>
|
|
</div>);
|
|
}
|
|
}
|
|
|