trying out

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) => {