Separate pins & listings

web/components/Main.js

@@ -128,12 +128,7 @@ class Main extends React.Component {
     return seen.findIndex(s => s === id) !== -1
   }
 
-  /*
-   * Refreshes search
-   */
-  refreshListings(more = false) {
-    console.log('refreshListings');
-
+  loadPins () {
     const map = this.map;
     const {
       rooms,
@@ -153,7 +148,8 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
-      page: this.state.page
+      page: this.state.page,
+      pins: true
     });
 
 
@@ -248,16 +244,69 @@ class Main extends React.Component {
       }
 
       this.dispatch({
-        type: 'LISTINGS_LOADED',
+        type: 'PINS_LOADED',
         action: {
-          listings: data,
-          newMarkers,
-          more,
-          totalCount
+          newMarkers
         }
       });
       });
     })
+
+  }
+
+  /*
+   * Refreshes search
+   */
+  refreshListings(more = false) {
+    console.log('refreshListings');
+
+    this.loadPins();
+
+    const map = this.map;
+    const {
+      rooms,
+      minSize,
+      maxSize,
+      minPrice,
+      maxPrice,
+      category
+    } = this.state.filters;
+
+    const bounds     = map.getBounds();
+    const properties = loadProperties({
+      bounds: bounds.toUrlValue(),
+      rooms,
+      minSize,
+      maxSize,
+      minPrice,
+      maxPrice,
+      category,
+      page: this.state.page
+    });
+
+
+    properties
+    .then(p => {
+      return {
+        body: p.text(),
+        totalCount: p.headers.get('X-Total-Count')
+      };
+    })
+    .then(({body, totalCount}) => {
+      body.then(p => {
+        console.log('results_received: ', totalCount);
+        const data = JSON.parse(p);
+
+        this.dispatch({
+          type: 'LISTINGS_LOADED',
+          action: {
+            listings: data,
+            more,
+            totalCount
+          }
+        });
+      });
+    })
   }
 
   /*

web/lib/api.js

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

web/lib/handlers.js

@@ -86,6 +86,13 @@ const listingsLoaded = ({ type, action }, component) => {
   });
 };
 
+const pinsLoaded = ({ type, action }, component) => {
+  component.setState({
+  }, () => {
+    component.markers = action.newMarkers;
+  });
+};
+
 const expandDescription = ({ type, action }, component) => {
   component.setState({
     descriptionExpanded: true
@@ -259,7 +266,8 @@ const handlers = {
   ON_LISTING_MOUSE_OVER: onListingMouseOver,
   BACK_TO_RESULTS: backToResults,
   LOAD_MORE_LISTINGS: loadMoreListings,
-  MAP_IDLE: mapIdle
+  MAP_IDLE: mapIdle,
+  PINS_LOADED: pinsLoaded
 };
 
 export const handleMessage = ({ type, action }, component) => {