trying out

backend/build/server.js

@@ -58,9 +58,13 @@
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 	function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
 
 	var MongoClient = __webpack_require__(3).MongoClient;
+	var ObjectID = __webpack_require__(3).ObjectID;
+
 	var url = 'mongodb://localhost:27017/kivi';
 
 	__webpack_require__(4);
@@ -72,9 +76,9 @@
 
 	var db = void 0;
 
-	router.get('/search', function () {
+	router.get('/search/listings', function () {
 	  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) {
-	    var bounds, minPrice, maxPrice, minSize, maxSize, rooms, adType, category, sort, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, price, and, allRooms, or, size, allCategories, _or, all;
+	    var bounds, minPrice, maxPrice, minSize, maxSize, rooms, adType, category, sort, lastRecordId, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, price, and, allRooms, or, size, allCategories, _or, cnt, all;
 
 	    return regeneratorRuntime.wrap(function _callee$(_context) {
 	      while (1) {
@@ -90,6 +94,7 @@
 	            adType = req.query.adType;
 	            category = req.query.category;
 	            sort = req.query.sort;
+	            lastRecordId = req.query.lastRecordId;
 	            properties = db.collection('listings');
 	            query = {};
 
@@ -149,9 +154,6 @@
 
 
 	              and.push({ "$or": or });
-	              //query = Object.assign(query, {
-	              //rooms:
-	              //});
 	            }
 
 	            if (minSize || maxSize) {
@@ -180,9 +182,6 @@
 
 
 	              and.push({ "$or": _or });
-	              //query = Object.assign(query, {
-	              //{"$or" : or }
-	              //});
 	            }
 
 	            if (and.length > 0) {
@@ -191,35 +190,60 @@
 	              });
 	            }
 
+	            //query = Object.assign(query, {
+	            //"_id": 1
+	            //});
+
 	            console.log('QUERY: ', query);
-	            _context.next = 23;
+	            _context.next = 24;
+	            return properties.find(query).count();
+
+	          case 24:
+	            cnt = _context.sent;
+
+
+	            res.header('X-Total-Count', cnt);
+
+	            if (lastRecordId) {
+	              query = Object.assign(query, {
+	                "_id": {
+	                  "$gt": new ObjectID(lastRecordId)
+	                }
+	              });
+	            }
+
+	            _context.next = 29;
 	            return properties.find(query, {
 	              //"sort": [['field1','asc'], ['field2','desc']]
 	              "sort": [['price', 'asc']]
-	            }).toArray();
+	            }).limit(20).toArray();
 
-	          case 23:
+	          case 29:
 	            all = _context.sent;
 
 
+	            if (all.length > 0) {
+	              res.header('X-Last-Record-Id', [].concat(_toConsumableArray(all)).pop()._id);
+	            }
+
 	            res.json(all);
 	            res.end();
-	            _context.next = 32;
+	            _context.next = 39;
 	            break;
 
-	          case 28:
+	          case 35:
-	            _context.prev = 28;
+	            _context.prev = 35;
 	            _context.t0 = _context['catch'](0);
 
 	            console.log('error:', _context.t0);
 	            next(_context.t0);
 
-	          case 32:
+	          case 39:
 	          case 'end':
 	            return _context.stop();
 	        }
 	      }
-	    }, _callee, undefined, [[0, 28]]);
+	    }, _callee, undefined, [[0, 35]]);
 	  }));
 
 	  return function (_x, _x2, _x3) {
@@ -232,7 +256,8 @@
 
 	app.use(function (req, res, next) {
 	  res.header("Access-Control-Allow-Origin", "*");
-	  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+	  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id");
+	  res.header("Access-Control-Expose-Headers", "X-Last-Record-Id");
 	  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
 	  res.header('Access-Control-Allow-Credentials', 'true');
 	  next();

backend/server.js

@@ -1,6 +1,8 @@
 import express from 'express'
 import bodyParser from 'body-parser';
 var MongoClient = require('mongodb').MongoClient;
+var ObjectID = require('mongodb').ObjectID;
+
 var url = 'mongodb://localhost:27017/kivi';
 
 require("babel-polyfill");
@@ -12,17 +14,18 @@ const AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
 
 let db;
 
-router.get('/search', async (req, res, next) => {
+router.get('/search/listings', async (req, res, next) => {
   try {
-    const bounds     = req.query.bounds || '';
+    const bounds       = req.query.bounds || '';
-    const minPrice   = req.query.minPrice;
+    const minPrice     = req.query.minPrice;
-    const maxPrice   = req.query.maxPrice;
+    const maxPrice     = req.query.maxPrice;
-    const minSize    = req.query.minSize;
+    const minSize      = req.query.minSize;
-    const maxSize    = req.query.maxSize;
+    const maxSize      = req.query.maxSize;
-    const rooms      = req.query.rooms;
+    const rooms        = req.query.rooms;
-    const adType     = req.query.adType;
+    const adType       = req.query.adType;
-    const category   = req.query.category;
+    const category     = req.query.category;
-    const sort       = req.query.sort;
+    const sort         = req.query.sort;
+    const lastRecordId = req.query.lastRecordId;
     const properties = db.collection('listings');
     let query        = {};
 
@@ -111,11 +114,31 @@ router.get('/search', async (req, res, next) => {
       });
     }
 
+    //query = Object.assign(query, {
+      //"_id": 1
+    //});
+
     console.log('QUERY: ', query);
+    const cnt = await properties.find(query).count();
+
+    res.header('X-Total-Count', cnt);
+
+    if (lastRecordId) {
+      query = Object.assign(query, {
+        "_id": {
+          "$gt": new ObjectID(lastRecordId)
+        }
+      });
+    }
+
     const all = await properties.find(query, {
       //"sort": [['field1','asc'], ['field2','desc']]
       "sort": [['price','asc']]
-    }).toArray();
+    }).limit(20).toArray();
+
+    if (all.length > 0) {
+      res.header('X-Last-Record-Id', [...all].pop()._id);
+    }
 
     res.json(all);
     res.end();
@@ -131,7 +154,8 @@ app.use(bodyParser.json());
 
 app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
-  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id");
+  res.header("Access-Control-Expose-Headers", "X-Last-Record-Id");
   res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
   res.header('Access-Control-Allow-Credentials', 'true');
   next();

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

web/lib/api.js

@@ -7,7 +7,8 @@ export const loadProperties = ({
   minSize  = '',
   maxSize  = '',
   rooms    = {},
-  category = {}
+  category = {},
+  lastRecordId
 }) => {
   const allRooms = Object
     .keys(rooms)
@@ -21,7 +22,13 @@ export const loadProperties = ({
 
   // TODO: handle errors
   //return fetch(process.env.API_URL + '/api/search', {
-  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`, {
+    let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`
+
+    if (lastRecordId) {
+      url += `&lastRecordId=${lastRecordId}`;
+    }
+
+    return fetch(url, {
     //credentials: 'include'
   });
 

web/lib/handlers.js

@@ -3,6 +3,7 @@ import { markSeen } from './api';
 const setMaxPrice = ({ type, action }, component) => {
   const maxPrice = parseFloat(action.maxPrice);
   component.setState({
+    lastRecordId: null,
     filters: {
       ...component.state.filters,
       maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
@@ -14,6 +15,7 @@ const setMaxPrice = ({ type, action }, component) => {
 const setMinPrice = ({ type, action }, component) => {
   const minPrice = parseFloat(action.minPrice);
   component.setState({
+    lastRecordId: null,
     filters: {
       ...component.state.filters,
       minPrice: isNaN(minPrice) ? undefined : minPrice,
@@ -25,6 +27,7 @@ const setMinPrice = ({ type, action }, component) => {
 const setMinSize = ({ type, action }, component) => {
   const minSize = parseFloat(action.minSize);
   component.setState({
+    lastRecordId: null,
     filters: {
       ...component.state.filters,
       minSize: isNaN(minSize) ? undefined : minSize,
@@ -36,6 +39,7 @@ const setMinSize = ({ type, action }, component) => {
 const setMaxSize = ({ type, action }, component) => {
   const maxSize = parseFloat(action.maxSize);
   component.setState({
+    lastRecordId: null,
     filters: {
       ...component.state.filters,
       maxSize: isNaN(maxSize) ? undefined : maxSize,
@@ -65,6 +69,7 @@ const viewListingDetails = ({ type, action }, component) => {
 };
 
 const listingsLoaded = ({ type, action }, component) => {
+  console.log('listings_loaded', action.more);
   const currentListings = new Map();
 
   for (const listing of action.listings) {
@@ -72,9 +77,12 @@ const listingsLoaded = ({ type, action }, component) => {
   }
 
   component.setState({
-    listings: currentListings
+    listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings,
+    lastRecordId: !action.more ? null : action.lastRecordId,
+    loadingMore: false
   }, () => {
     component.markers = action.newMarkers;
+    console.log('ALL LOADED', component.state.listings);
   });
 };
 
@@ -108,7 +116,8 @@ const viewImage = ({ type, action }, component) => {
 
 const searchPlaceChanged = ({ type, action }, component) => {
   component.setState({
-    listingDetails: false
+    listingDetails: false,
+    lastRecordId: null
   });
 };
 
@@ -117,6 +126,7 @@ const setRooms = ({ type, action }, component) => {
 
   component.setState(
     {
+      lastRecordId: null,
       filters: {
         ...component.state.filters,
         rooms: {
@@ -152,6 +162,7 @@ const setCategory = ({type, action}, component) => {
 
   component.setState(
     {
+      lastRecordId: null,
       filters: {
         ...component.state.filters,
         category: {
@@ -206,6 +217,31 @@ const backToResults = ({type, action}, component) => {
   });
 }
 
+const loadMoreListings = ({type, action}, component) => {
+  console.log('loading more');
+
+  component.setState({
+    loadingMore: true
+  }, () => {
+    component.refreshListings(true);
+  });
+}
+
+//const loadMoreListingsLoaded = ({type, action}, component) => {
+  //const currentListings = new Map();
+
+  //for (const listing of action.listings) {
+    //currentListings.set(listing._id, listing);
+  //}
+
+  //component.setState({
+    //listings: new Map([...component.state.listings, ...currentListings]),
+    //lastRecordId: action.lastRecordId
+  //}, () => {
+    //component.markers = action.newMarkers;
+  //});
+//}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -222,7 +258,8 @@ const handlers = {
   UPDATE_SEARCH: updateSearch,
   SET_CATEGORY: setCategory,
   ON_LISTING_MOUSE_OVER: onListingMouseOver,
-  BACK_TO_RESULTS: backToResults
+  BACK_TO_RESULTS: backToResults,
+  LOAD_MORE_LISTINGS: loadMoreListings
 };
 
 export const handleMessage = ({ type, action }, component) => {