158 lines
4.1 KiB
JavaScript
158 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import {formatPrice} from '../lib/helpers';
|
|
|
|
export default class Listings extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleScroll = (e) => {
|
|
const node = e.target;
|
|
const offset = node.scrollHeight - node.scrollTop - node.clientHeight;
|
|
|
|
//console.log('-----------------');
|
|
//console.log('node.scrollHeight', node.scrollHeight);
|
|
//console.log('node.parentNode.scrollTop', node.scrollTop);
|
|
//console.log('node.parentNode.clientHeight', node.clientHeight);
|
|
|
|
|
|
console.log('scrolling', node.scrollTop, node.scrollHeight, offset);
|
|
if (offset < 50) {
|
|
|
|
console.log('load more');
|
|
this.removeScrollListener();
|
|
this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
|
|
}
|
|
}
|
|
}
|
|
|
|
onListingClick(id) {
|
|
this.props.dispatch({
|
|
type: 'VIEW_LISTING_DETAILS',
|
|
action: {
|
|
id
|
|
}
|
|
});
|
|
}
|
|
|
|
onMouseEnter (id) {
|
|
this.props.dispatch({
|
|
type: 'ON_LISTING_MOUSE_OVER',
|
|
action: {
|
|
id
|
|
}
|
|
});
|
|
}
|
|
|
|
componentDidUpdate (prevProps) {
|
|
console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props);
|
|
//setTimeout(() => {
|
|
//this.attachScrollListener();
|
|
//}, 1000);
|
|
if (this.props.loadingMore != null) {
|
|
if (!this.props.loadingMore && prevProps.loadingMore) {
|
|
this.attachScrollListener();
|
|
console.log('ATTACHING AGAIN', this);
|
|
}
|
|
}
|
|
}
|
|
|
|
renderListings () {
|
|
const {listings = (new Map())} = this.props;
|
|
|
|
if (listings.size === 0) {
|
|
return (<div className="listings-no-results">
|
|
<i className="fa fa-frown-o fa-frown-o-custom" aria-hidden="true"></i>
|
|
|
|
<h4>Nema rezultata</h4>
|
|
<h5>
|
|
Nema oglasa koji ispunjavaju vaše uslove pretrage.
|
|
</h5>
|
|
</div>)
|
|
}
|
|
|
|
const rendered = [];
|
|
|
|
for(const l of listings.values()) {
|
|
const {images} = l;
|
|
|
|
rendered.push(
|
|
<div
|
|
key={l._id}
|
|
onMouseEnter={this.onMouseEnter.bind(this, l._id)}
|
|
className="property-list-item"
|
|
onClick={this.onListingClick.bind(this, l._id)}>
|
|
<div className="pli-image">
|
|
<img src={images[0]} alt=""></img>
|
|
</div>
|
|
<div className="pli-details">
|
|
<div className="price">{formatPrice(l.price)}</div>
|
|
<div className="description">{l.rooms ? `${l.rooms} sobe, `: 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;
|
|
}
|
|
|
|
componentDidMount () {
|
|
this.attachScrollListener();
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
this.removeScrollListener();
|
|
}
|
|
|
|
attachScrollListener () {
|
|
const listings = ReactDOM.findDOMNode(this.refs.listings);
|
|
listings.parentNode.addEventListener('scroll', this.handleScroll);
|
|
}
|
|
|
|
removeScrollListener () {
|
|
const listings = ReactDOM.findDOMNode(this.refs.listings);
|
|
listings.parentNode.removeEventListener('scroll', this.handleScroll);
|
|
}
|
|
|
|
//componentDidUpdate() {
|
|
//console.log('componentDidUpdate');
|
|
////this.attachScrollListener();
|
|
//}
|
|
|
|
render () {
|
|
|
|
const {listings = (new Map())} = this.props;
|
|
|
|
return (
|
|
<div ref="listings" className="listings">
|
|
<div className="listings-header">
|
|
<div className="select-container">
|
|
<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">
|
|
{listings.size} rezultata
|
|
</div>
|
|
</div>
|
|
|
|
<div className="listings-items">
|
|
{this.renderListings()}
|
|
</div>
|
|
</div>)
|
|
}
|
|
}
|