'Back to results' handled properly

web/components/ListingDetails.js

@@ -9,9 +9,7 @@ export default class ListingDetails extends React.Component {
   }
 
   onBackClick() {
-    if (this.props.onBackClick) {
-      this.props.onBackClick();
-    }
+    this.props.dispatch({type: 'BACK_TO_RESULTS'});
   }
 
   render() {

web/components/Main.js

@@ -132,7 +132,6 @@ class Main extends React.Component {
   refreshListings() {
     console.log('refreshListings');
 
-
     const map = this.map;
     const {
       rooms,
@@ -221,7 +220,6 @@ class Main extends React.Component {
               const prevSelected = this.findMarker(this.state.listingId);
               if (prevSelected) {
                 console.log('prevselected', prevSelected);
-                //prevSelected.marker.setIcon(this.defaultMarkerIcon());
                 prevSelected.marker.setIcon(this.visitedMarkerIcon());
               }
             }
@@ -249,18 +247,6 @@ class Main extends React.Component {
     })
   }
 
-  onListingClick() {
-    this.setState({
-      listingDetails: true
-    })
-  }
-
-  onBackClick() {
-    this.setState({
-      listingDetails: false
-    })
-  }
-
   /*
    * Get default marker icon
    */
@@ -359,13 +345,13 @@ class Main extends React.Component {
         imageIndex={this.state.imageIndex}
         dispatch={this.dispatch.bind(this)}
         descriptionExpanded={this.state.descriptionExpanded}
-        onBackClick={this.onBackClick.bind(this)}/>);
+        />);
     } else {
       children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
       children.push(<Listings
         listings={this.state.listings}
         dispatch={this.dispatch.bind(this)}
-        onListingClick={this.onListingClick.bind(this)}/>);
+        />);
     }
     const content = (
       <div className="right-content">

web/lib/handlers.js

@@ -185,6 +185,19 @@ const onListingMouseOver = ({type, action}, component) => {
 
 };
 
+const backToResults = ({type, action}, component) => {
+  const prevSelected = component.findMarker(component.state.listingId);
+  component.setState({
+    listingId: undefined,
+    listingDetails: false
+  }, () => {
+
+    if (prevSelected) {
+      prevSelected.marker.setIcon(component.visitedMarkerIcon());
+    }
+  });
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -200,7 +213,8 @@ const handlers = {
   VIEW_LISTING_DETAILS: viewListingDetails,
   UPDATE_SEARCH: updateSearch,
   SET_CATEGORY: setCategory,
-  ON_LISTING_MOUSE_OVER: onListingMouseOver
+  ON_LISTING_MOUSE_OVER: onListingMouseOver,
+  BACK_TO_RESULTS: backToResults
 };
 
 export const handleMessage = ({ type, action }, component) => {