Router in a good shape

web/lib/handlers.js

@@ -52,6 +52,8 @@ const viewListingDetails = ({ type, action }, component) => {
   const scrollElem = document.querySelector('.right-content');
   component.savedScrollTop = scrollElem.scrollTop;
 
+  //component.router.listingId = action.id;
+
   component.setState({
     listingDetails: true,
     listingId: action.id,
@@ -59,8 +61,7 @@ const viewListingDetails = ({ type, action }, component) => {
     imageIndex: 0,
     listing: action.listing
   }, () => {
-    //window.history.pushState({}, '', `/listing/${action.id}`);
-    component.router.update();
+    //component.router.update();
     markSeen(action.id);
     const m = component.findMarker(action.id);
     if (m) {
@@ -72,7 +73,6 @@ 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) {
@@ -211,9 +211,10 @@ const onListingMouseOver = ({type, action}, component) => {
 const backToResults = ({type, action}, component) => {
   const prevSelected = component.findMarker(component.state.listingId);
   component.setState({
-    listingId: undefined,
+    listingId: null,
     listingDetails: false
   }, () => {
+    //component.router.update();
 
     if (prevSelected) {
       prevSelected.marker.setIcon(component.visitedMarkerIcon());
@@ -225,8 +226,6 @@ const backToResults = ({type, action}, component) => {
 }
 
 const loadMoreListings = ({type, action}, component) => {
-  console.log('loading more');
-
   const currentPage = component.state.page;
   if (currentPage * 20 < component.state.totalCount) {
     component.setState({
@@ -253,10 +252,15 @@ const sortChange = ({type, action}, component) => {
     sort: action.sort,
     page: 0
   }, () => {
+    //component.router.update();
     component.refreshListings();
   });
 }
 
+const updateRoute = ({type, action}, component) => {
+  component.router.update(action);
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -277,7 +281,8 @@ const handlers = {
   LOAD_MORE_LISTINGS: loadMoreListings,
   MAP_IDLE: mapIdle,
   PINS_LOADED: pinsLoaded,
-  SORT_CHANGE: sortChange
+  SORT_CHANGE: sortChange,
+  UPDATE_ROUTE: updateRoute
 };
 
 export const handleMessage = ({ type, action }, component) => {