old-kivi/web/components/Listings.js

import React from 'react';
import ReactDOM from 'react-dom';
import {formatPrice} from '../lib/helpers';
import {loadListing} from '../lib/api';

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

      if (this.props && this.props.loadingMore) {

        console.log('still loading!');
        return;
      }

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

    loadListing(id).then(l => l.text()).then(l => {
      console.log('listing loaded', l);
      this.props.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
        id,
        listing: JSON.parse(l)
      }});
    });


    //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);

    //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()), totalCount} = 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">
            {totalCount} rezultata
          </div>
        </div>

        <div className="listings-items">
          {this.renderListings()}
        </div>
      </div>)
  }
}