old-kivi/web/src/components/Listings.js

import React from 'react'
import {findDOMNode} from 'react-dom'
import {formatPrice, listingImageUrl} 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

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

      if (offset < 50) {
        this.props.dispatch({type: 'LOAD_MORE_LISTINGS'})
      }
    }
  }

  onListingClick (id) {
    loadListing(id).then(l => l.text()).then(l => {
      this.props.dispatch({
        type: 'UPDATE_ROUTE',
        action: {
          toDispatch: {
            type: 'VIEW_LISTING_DETAILS',
            action: {
              id,
              listing: JSON.parse(l)
            }
          },
          params: {
            listingId: id
          }
        }
      })

      this.props.dispatch({
        type: 'VIEW_LISTING_DETAILS',
        action: {
          id,
          listing: JSON.parse(l)
        }
      })
    })
  }

  onMouseEnter (id) {
    this.props.dispatch({
      type: 'ON_LISTING_MOUSE_OVER',
      action: {
        id
      }
    })
  }

  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" />

          <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={listingImageUrl(images[0])} alt="" />
          </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 {l.time}</div>
          </div>
        </div>
      )
    }

    return rendered
  }

  componentDidMount () {
    this.attachScrollListener()
  }

  componentWillUnmount () {
    this.removeScrollListener()
  }

  attachScrollListener () {
    const listings = findDOMNode(this.refs.listings)
    listings.parentNode.addEventListener('scroll', this.handleScroll)
  }

  removeScrollListener () {
    const listings = findDOMNode(this.refs.listings)
    listings.parentNode.removeEventListener('scroll', this.handleScroll)
  }

  onSortChange (e) {
    this.props.dispatch({
      type: 'UPDATE_ROUTE',
      action: {
        params: {
          sort: e.target.value
        }
      }
    })

    this.props.dispatch({
      type: 'SORT_CHANGE',
      action: {
        sort: e.target.value
      }
    })
  }

  render () {
    const {listings = new Map(), totalCount, sort} = this.props

    return (
      <div ref="listings" className="listings">
        <div className="listings-header">
          <div className="select-container">
            <div className="select-group">
              <select
                value={sort}
                onChange={this.onSortChange.bind(this)}
                name="listings-type"
                id="listings-type"
              >
                <option value="relevance">Relevantno</option>
                <option value="newest">Najnovije</option>
                <option value="price-min">Cijena: od najmanje</option>
                <option value="price-max">Cijena: od najvece</option>
              </select>
            </div>
          </div>
          <div className="listings-count">
            {totalCount} rezultata
          </div>
        </div>

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