trying out

web/components/Listings.js

@@ -1,7 +1,31 @@
 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',
@@ -20,6 +44,19 @@ export default class Listings extends React.Component {
     });
   }
 
+  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;
 
@@ -69,12 +106,35 @@ export default class Listings extends React.Component {
     return rendered;
   }
 
-  render() {
+  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 className="listings">
+      <div ref="listings" className="listings">
         <div className="listings-header">
           <div className="select-container">
             <div className="select-group">