Basic pagination working

web/components/Listings.js

@@ -15,12 +15,17 @@ export default class Listings extends React.Component {
       //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.removeScrollListener();
         this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
       }
     }
@@ -46,15 +51,13 @@ 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);
-      }
-    }
+
+    //if (this.props.loadingMore != null) {
+      //if (!this.props.loadingMore && prevProps.loadingMore) {
+        //this.attachScrollListener();
+        //console.log('ATTACHING AGAIN', this);
+      //}
+    //}
   }
 
   renderListings () {
@@ -131,7 +134,7 @@ export default class Listings extends React.Component {
 
   render () {
 
-    const {listings = (new Map())} = this.props;
+    const {listings = (new Map()), totalCount} = this.props;
 
     return (
       <div ref="listings" className="listings">
@@ -145,7 +148,7 @@ export default class Listings extends React.Component {
             </div>
           </div>
           <div className="listings-count">
-            {listings.size} rezultata
+            {totalCount} rezultata
           </div>
         </div>
 

web/components/Main.js

@@ -13,6 +13,7 @@ class Main extends React.Component {
       listingDetails: false,
       listings: (new Map()),
       imageIndex: 0,
+      page: 0,
       filters: {
         rooms: {},
         category: {}
@@ -89,7 +90,8 @@ class Main extends React.Component {
 
     map.addListener('idle', () => {
       console.log('idle');
-      this.refreshListings();
+      this.dispatch({type: 'MAP_IDLE'});
+      //this.refreshListings();
     });
   }
 
@@ -151,7 +153,7 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
-      lastRecordId: this.state.lastRecordId
+      page: this.state.page
     });
 
 
@@ -161,16 +163,14 @@ class Main extends React.Component {
 
     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')
+        totalCount: p.headers.get('X-Total-Count')
       };
     })
-    .then(({body, lastRecordId}) => {
+    .then(({body, totalCount}) => {
       body.then(p => {
-      console.log('results_received: ', body, lastRecordId);
+      console.log('results_received: ', totalCount);
       const data = JSON.parse(p);
 
       const listingExists = (id) => {
@@ -252,8 +252,8 @@ class Main extends React.Component {
         action: {
           listings: data,
           newMarkers,
-          lastRecordId,
-          more
+          more,
+          totalCount
         }
       });
       });
@@ -362,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
+        totalCount={this.state.totalCount}
         loadingMore={this.state.loadingMore}
         listings={this.state.listings}
         dispatch={this.dispatch.bind(this)}