Load listing details from the server

web/components/Listings.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {formatPrice} from '../lib/helpers';
+import {loadListing} from '../lib/api';
 
 export default class Listings extends React.Component {
   constructor(props) {
@@ -32,12 +33,22 @@ export default class Listings extends React.Component {
   }
 
   onListingClick(id) {
-    this.props.dispatch({
-      type: 'VIEW_LISTING_DETAILS',
-      action: {
-        id
-      }
+
+    loadListing(id).then(l => l.text()).then(l => {
+      console.log('listing loaded', l);
+      this.props.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+        id,
+        listing: JSON.parse(l)
+      }});
     });
+
+
+    //this.props.dispatch({
+    //type: 'VIEW_LISTING_DETAILS',
+    //action: {
+    //id
+    //}
+    //});
   }
 
   onMouseEnter (id) {

web/components/Main.js

@@ -3,7 +3,7 @@ import Filters from './Filters';
 import Listings from './Listings';
 import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
-import { loadProperties, loadSeen } from '../lib/api'
+import { loadProperties, loadSeen, loadListing} from '../lib/api'
 import { handleMessage } from '../lib/handlers'
 
 class Main extends React.Component {
@@ -195,7 +195,7 @@ class Main extends React.Component {
           const marker = new google.maps.Marker({
             position : myLatLng,
             map      : map,
-            title    : prop.title,
+            //title    : prop.title,
             icon     : this.isSeen(prop._id) ? this.visitedMarkerIcon() : this.defaultMarkerIcon(),
             id       : prop._id
           });
@@ -231,9 +231,15 @@ class Main extends React.Component {
             }
 
             marker.setIcon(this.selectedMarkerIcon());
-            this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
-              id: prop._id
-            }});
+
+            loadListing(prop._id).then(l => l.text()).then(l => {
+              console.log('listing loaded', l);
+              this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+                id: prop._id,
+                listing: JSON.parse(l)
+              }});
+            });
+
           });
 
           newMarkers.push({
@@ -402,7 +408,7 @@ class Main extends React.Component {
 
     if (this.state.listingDetails) {
       console.log('CURRENT LISTINGS', this.state.listings);
-      const listing = this.state.listings.get(this.state.listingId);
+      const listing = this.state.listing; //this.state.listings.get(this.state.listingId);
       console.log(this.state);
       children.push(<ListingDetails
         listing={listing}

web/lib/api.js

@@ -1,5 +1,13 @@
 import fetch from 'isomorphic-fetch';
 
+export const loadListing = (id) => {
+  let url = `http://localhost:3001/api/search/listings/${id}`;
+
+  return fetch(url, {
+    //credentials: 'include'
+  });
+};
+
 export const loadProperties = ({
   bounds,
   minPrice = '',

web/lib/handlers.js

@@ -56,7 +56,8 @@ const viewListingDetails = ({ type, action }, component) => {
     listingDetails: true,
     listingId: action.id,
     descriptionExpanded: false,
-    imageIndex: 0
+    imageIndex: 0,
+    listing: action.listing
   }, () => {
     markSeen(action.id);
     const m = component.findMarker(action.id);