Router WIP

web/components/Main.js

@@ -5,11 +5,13 @@ import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
 import { loadProperties, loadSeen, loadListing} from '../lib/api'
 import { handleMessage } from '../lib/handlers'
+import Router from '../lib/router';
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
+
+    const state = {
       listingDetails: false,
       listings: (new Map()),
       imageIndex: 0,
@@ -19,7 +21,18 @@ class Main extends React.Component {
         rooms: {},
         category: {}
       }
-    };
+    }
+
+    if (props.initialState) {
+      state.filters.rooms = props.initialState.rooms;
+      state.filters.category = props.initialState.category;
+      state.sort = props.initialState.sort || state.sort;
+      state.listingId = props.initialState.listingId;
+      state.listingDetails = true;
+    }
+
+    this.state = state;
+    this.router = new Router(this);
   }
 
   dispatch ({type, action = {}}) {
@@ -93,6 +106,22 @@ class Main extends React.Component {
       console.log('idle');
       this.dispatch({type: 'MAP_IDLE'});
     });
+
+
+    // TODO: if state contains listingId reload
+    //
+
+    if (this.state.listingId) {
+
+      console.log("IT ISSSSS");
+      loadListing(this.state.listingId).then(l => l.text()).then(l => {
+        console.log('listing loaded', l);
+        this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+          id: this.state.listingId,
+          listing: JSON.parse(l)
+        }});
+      });
+    }
   }
 
   removeAllMarkers () {

web/dist/index.html

@@ -15,10 +15,10 @@
     </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBghY4-1wa7jETxDbyDdcGL731ZtOxpkA&libraries=places">
     </script>
-    <!--<script-->
+    <script
-  <!--src="https://code.jquery.com/jquery-3.1.1.min.js"-->
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
-  <!--integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="-->
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
-  <!--crossorigin="anonymous"></script>-->
+  crossorigin="anonymous"></script>
     <script type="text/javascript" src="app.bundle.js"></script>
     </div>
   </body>

web/index.js

@@ -2,5 +2,48 @@ import React from 'react';
 import {render} from 'react-dom';
 import Main from './components/Main';
 
-render(<Main />, document.getElementById('root'));
+const getInitialState = (url) => {
+  console.log('PARSING URL:', url);
+  const params = window.location.search.substr(1).split("&");
+
+  const initialState = {
+    rooms: {},
+    category: {}
+  }
+
+  for(const param of params) {
+    const [key, value] = param.split("=");
+    if (key === "rooms" && value !== '') {
+      value.split(",").forEach(k => {
+        initialState.rooms[parseInt(k)] = true;
+      });
+    }
+
+    if (key === "category" && value !== '') {
+      value.split(",").forEach(k => {
+        initialState.category[parseInt(k)] = true;
+      });
+    }
+
+    if (key === "sort") {
+      initialState.sort = value;
+    }
+
+    if (key === "bounds") {
+      // TODO: save bounds
+      initialState.bounds = value;
+    }
+
+    if (key === "listingId") {
+      initialState.listingId = value;
+    }
+  }
+
+  console.log('initial state dump', initialState);
+  return initialState;
+}
+
+const main = (<Main initialState={getInitialState(window.location)}/>);
+
+render(main, document.getElementById('root'));
 

web/lib/handlers.js

@@ -59,6 +59,8 @@ const viewListingDetails = ({ type, action }, component) => {
     imageIndex: 0,
     listing: action.listing
   }, () => {
+    //window.history.pushState({}, '', `/listing/${action.id}`);
+    component.router.update();
     markSeen(action.id);
     const m = component.findMarker(action.id);
     if (m) {

web/lib/router.js

@@ -0,0 +1,18 @@
+export default class Router {
+  constructor(comp) {
+    this.component = comp;
+  }
+
+  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("&")}`);
+  }
+}