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

web/components/Main.js

@@ -129,7 +129,7 @@ class Main extends React.Component {
   /*
    * Refreshes search
    */
-  refreshListings() {
+  refreshListings(more = false) {
     console.log('refreshListings');
 
     const map = this.map;
@@ -150,7 +150,8 @@ class Main extends React.Component {
       maxSize,
       minPrice,
       maxPrice,
-      category
+      category,
+      lastRecordId: this.state.lastRecordId
     });
 
 
@@ -158,10 +159,19 @@ class Main extends React.Component {
       return this.findMarker(id) != null;
     }
 
-    properties.then(p => p.text()).then(p => {
-
+    properties
+    .then(p => {
+      const lastRecordId = p.headers.get('X-Last-Record-Id');
+      console.log('lastRecordId', lastRecordId, p.headers);
+      return {
+        body: p.text(),
+        lastRecordId: p.headers.get('X-Last-Record-Id')
+      };
+    })
+    .then(({body, lastRecordId}) => {
+      body.then(p => {
+      console.log('results_received: ', body, lastRecordId);
       const data = JSON.parse(p);
-      console.log('results_received');
 
       const listingExists = (id) => {
         return data.findIndex(l => l._id === id) !== -1
@@ -241,9 +251,12 @@ class Main extends React.Component {
         type: 'LISTINGS_LOADED',
         action: {
           listings: data,
-          newMarkers
+          newMarkers,
+          lastRecordId,
+          more
         }
       });
+      });
     })
   }
 
@@ -349,6 +362,7 @@ class Main extends React.Component {
     } else {
       children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
       children.push(<Listings
+        loadingMore={this.state.loadingMore}
         listings={this.state.listings}
         dispatch={this.dispatch.bind(this)}
         />);