115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import Gallery from './gallery'
|
|
import {formatPrice} from '../lib/helpers'
|
|
|
|
export default class ListingDetails extends React.Component {
|
|
onReadMore (e) {
|
|
e.preventDefault()
|
|
this.props.dispatch({type: 'EXPAND_DESCRIPTION'})
|
|
}
|
|
|
|
onBackClick () {
|
|
this.props.dispatch({
|
|
type: 'UPDATE_ROUTE',
|
|
action: {
|
|
toDispatch: {
|
|
type: 'BACK_TO_RESULTS'
|
|
},
|
|
params: {
|
|
listingId: null
|
|
}
|
|
}
|
|
})
|
|
this.props.dispatch({type: 'BACK_TO_RESULTS'})
|
|
}
|
|
|
|
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" />
|
|
<span>
|
|
Nazad na rezultate
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<button className="hide-listing">
|
|
<i className="fa fa-thumbs-o-down" aria-hidden="true" />
|
|
<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">
|
|
{formatPrice(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" />
|
|
{listing.rooms} sobe
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home" />
|
|
{listing.size}m2
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home" />
|
|
{listing.floor}. sprat
|
|
</div>
|
|
<div className="ld-feature-box">
|
|
<i className="fa fa-home" />
|
|
--
|
|
</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>
|
|
)
|
|
}
|
|
}
|