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

web/lib/router.js

@@ -1,18 +1,78 @@
-export default class Router {
-  constructor(comp) {
-    this.component = comp;
+class ToggleHash {
+  constructor(data, key) {
+    this.data = data;
+    this.key = key;
+    this.data[key] = {};
   }
 
-  update () {
-    // Take the state from the component and update the URL
-    const {listingId, sort, minPrice, maxPrice, minSize, maxSize, filters: {rooms, category}} = this.component.state;
-    const bounds = this.component.map.getBounds().toUrlValue();
-    const params      = [];
-    params.push(`listingId=${listingId}`);
-    params.push(`sort=${sort}`);
-    params.push(`bounds=${bounds}`);
-    params.push(`rooms=${Object.keys(rooms).filter(v => rooms[v]).join(",")}`);
-    params.push(`category=${Object.keys(category).filter(v => category[v]).join(",")}`);
-    window.history.pushState({}, '', `/?${params.join("&")}`);
+  toggle (field) {
+    if (!field) {
+      return;
+    }
+
+    const val = this.data[this.key][field];
+    this.data[this.key][field] = !val;
+  }
+}
+
+export default class Router {
+  constructor(comp, initialState) {
+    this.component = comp;
+    this.state = initialState || {};
+
+    this.roomsToggler    = new ToggleHash(this.state, 'rooms');
+    this.categoryToggler = new ToggleHash(this.state, 'category');
+
+    window.onpopstate = (event) => {
+      const state = event.state;
+      console.log('POPING STATE', state);
+      if (state) {
+        if (state.toDispatch) {
+          this.component.dispatch(state.toDispatch);
+        }
+      }
+    }
+  }
+
+  update (state) {
+    const params = [];
+    if (state.params) {
+
+      this.roomsToggler.toggle(state.params.rooms);
+      this.categoryToggler.toggle(state.params.category);
+
+      delete state.params['rooms'];
+      delete state.params['category'];
+
+      this.state = Object.assign(this.state, state.params);
+
+      console.log('router state is: ', this.state);
+      const {listingId, bounds, sort, rooms = {}, category = {}} = this.state;
+
+      if (listingId) {
+        params.push(`listingId=${listingId}`);
+      }
+
+      params.push(`sort=${sort}`);
+      params.push(`bounds=${bounds}`);
+      params.push(`rooms=${Object.keys(rooms).filter(v => rooms[v]).join(",")}`);
+      params.push(`category=${Object.keys(category).filter(v => category[v]).join(",")}`);
+    }
+
+    if (state.toDispatch) {
+      console.log('PUSHING STATE', state);
+      window.history.pushState(state, '', `/?${params.join("&")}`);
+    } else {
+      const oldState = window.history.state;
+      if (oldState) {
+        const newState = Object.assign(oldState, state);
+        console.log('REPLACING STATE', newState);
+        window.history.replaceState(newState, '',`/?${params.join("&")}`);
+      } else {
+
+        console.log('PUSHING STATE', state);
+        window.history.replaceState(state, '',`/?${params.join("&")}`);
+      }
+    }
   }
 }