From 4df688ac60c21838a7ca033ed3a8760df89085be Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Sun, 9 Apr 2017 23:39:38 +0200 Subject: [PATCH] Router done --- web/components/Filters.js | 6 ++++ web/components/Listings.js | 1 - web/components/Main.js | 66 ++++++++++++++++++++++++++------------ web/index.js | 10 +++++- web/lib/router.js | 46 +++++++++----------------- web/package.json | 2 ++ web/yarn.lock | 8 +++++ 7 files changed, 86 insertions(+), 53 deletions(-) diff --git a/web/components/Filters.js b/web/components/Filters.js index 00491b6..1cb0653 100644 --- a/web/components/Filters.js +++ b/web/components/Filters.js @@ -46,10 +46,16 @@ export default class Filters extends React.Component { this.props.dispatch({type: 'UPDATE_ROUTE', action: { params: {rooms} }}); + this.props.dispatch({type: 'SET_ROOMS', action: {rooms}}); } onCategoryClick(category) { + + this.props.dispatch({type: 'UPDATE_ROUTE', action: { + params: {category} + }}); + this.props.dispatch({type: 'SET_CATEGORY', action: {category}}); } diff --git a/web/components/Listings.js b/web/components/Listings.js index 70a04b1..0fe8f75 100644 --- a/web/components/Listings.js +++ b/web/components/Listings.js @@ -25,7 +25,6 @@ export default class Listings extends React.Component { loadListing(id).then(l => l.text()).then(l => { - console.log('lising clicked'); this.props.dispatch({type: 'UPDATE_ROUTE', action: { toDispatch: { type: 'VIEW_LISTING_DETAILS', action: { diff --git a/web/components/Main.js b/web/components/Main.js index f396426..b47eb5f 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -29,6 +29,8 @@ class Main extends React.Component { state.filters.category = props.initialState.category; state.sort = props.initialState.sort || state.sort; state.listingId = props.initialState.listingId; + state.bounds = props.initialState.bounds; + state.zoom = props.initialState.zoom; if (state.listingId) { state.listingDetails = true; } @@ -44,12 +46,20 @@ class Main extends React.Component { componentDidMount() { const uluru = {lat: 43.845031, lng: 18.4019262}; - const map = new google.maps.Map(this.refs.map, { - zoom: 13, - center: uluru, + const opts = { + //zoom: 13, + //center: uluru, streetViewControl: false, mapTypeControl: false - }); + }; + + if (!this.state.bounds) { + opts.zoom = 13; + opts.center= uluru; + }; + + const map = new google.maps.Map(this.refs.map, opts); + window.gmap = map; //const marker = new google.maps.Marker({ //position: uluru, @@ -68,6 +78,37 @@ class Main extends React.Component { var options = { componentRestrictions: {country: "BA"} }; + + const regularIdle = () => { + this.dispatch({type: 'UPDATE_ROUTE', action: {params: { + bounds: map.getBounds().toUrlValue(), + zoom: map.getZoom() + }}}); + + this.dispatch({type: 'MAP_IDLE'}); + }; + + // Check if initial bounds are passed-in + + google.maps.event.addListenerOnce(map, 'idle', () => { + + if (this.state.bounds) { + const [ lat1, lng1, lat2, lng2 ] = this.state.bounds.split(","); + const sw = new google.maps.LatLng({lat: parseFloat(lat1), lng: parseFloat(lng1)}); + const ne = new google.maps.LatLng({lat: parseFloat(lat2), lng: parseFloat(lng2)}); + + const initialBounds = new google.maps.LatLngBounds(sw, ne); + //map.fitBounds(initialBounds); + + const originalMaxZoom = map.maxZoom; + const originalMinZoom = map.minZoom; + map.setOptions({maxZoom: parseInt(this.state.zoom), minZoom: parseInt(this.state.zoom)}); + map.fitBounds(initialBounds); + map.setOptions({maxZoom: originalMaxZoom, minZoom: originalMinZoom}); + } + + }); + map.addListener('idle', regularIdle); var searchBox = new google.maps.places.Autocomplete(input, options); searchBox.addListener('place_changed', () => { @@ -98,25 +139,8 @@ class Main extends React.Component { map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); this.map = map; - map.addListener('zoom_changed', () => { - this.removeAllMarkers(); - this.markers = []; - }); - - map.addListener('idle', () => { - this.dispatch({type: 'UPDATE_ROUTE', action: {params: { - bounds: map.getBounds().toUrlValue() - }}}); - - this.dispatch({type: 'MAP_IDLE'}); - }); - - // TODO: if state contains listingId reload - // - if (this.state.listingId) { - loadListing(this.state.listingId).then(l => l.text()).then(l => { this.dispatch({type: 'VIEW_LISTING_DETAILS', action: { id: this.state.listingId, diff --git a/web/index.js b/web/index.js index 4730073..ecc4f26 100644 --- a/web/index.js +++ b/web/index.js @@ -13,8 +13,12 @@ const getInitialState = (url) => { for(const param of params) { const [key, value] = param.split("="); + console.log('analyzing param ', key, value); if (key === "rooms" && value !== '') { + + console.log("IT's ROOMS"); value.split(",").forEach(k => { + console.log("IT's ROOMS", k); initialState.rooms[parseInt(k)] = true; }); } @@ -30,16 +34,20 @@ const getInitialState = (url) => { } if (key === "bounds") { - // TODO: save bounds initialState.bounds = value; } if (key === "listingId") { initialState.listingId = value; } + + if (key === "zoom") { + initialState.zoom = parseInt(value); + } } console.log('initial state dump', initialState); + console.log('initial state ROOMS', initialState.rooms); return initialState; } diff --git a/web/lib/router.js b/web/lib/router.js index 73035b9..d0bedcd 100644 --- a/web/lib/router.js +++ b/web/lib/router.js @@ -1,31 +1,13 @@ -class ToggleHash { - constructor(data, key) { - this.data = data; - this.key = key; - this.data[key] = {}; - } - - toggle (field) { - if (!field) { - return; - } - - const val = this.data[this.key][field]; - this.data[this.key][field] = !val; - } -} +import clone from 'lodash.clonedeep'; export default class Router { constructor(comp, initialState) { this.component = comp; - this.state = initialState || {}; + this.state = clone(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); @@ -38,16 +20,22 @@ export default class Router { const params = []; if (state.params) { - this.roomsToggler.toggle(state.params.rooms); - this.categoryToggler.toggle(state.params.category); + let cloned = clone(state); - delete state.params['rooms']; - delete state.params['category']; + if (cloned.params.rooms != null) { + this.state.rooms[cloned.params.rooms] = !this.state.rooms[cloned.params.rooms]; + } - this.state = Object.assign(this.state, state.params); + if (cloned.params.category != null) { + this.state.category[cloned.params.category] = !this.state.category[cloned.params.category]; + } - console.log('router state is: ', this.state); - const {listingId, bounds, sort, rooms = {}, category = {}} = this.state; + delete cloned.params['rooms']; + delete cloned.params['category']; + + this.state = Object.assign(this.state, cloned.params); + + const {listingId, bounds, sort, rooms = {}, category = {}, zoom} = this.state; if (listingId) { params.push(`listingId=${listingId}`); @@ -55,22 +43,20 @@ export default class Router { params.push(`sort=${sort}`); params.push(`bounds=${bounds}`); + params.push(`zoom=${zoom}`); 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("&")}`); } } diff --git a/web/package.json b/web/package.json index b406aed..62f2c47 100644 --- a/web/package.json +++ b/web/package.json @@ -11,6 +11,8 @@ "license": "ISC", "dependencies": { "babel-preset-stage-3": "^6.22.0", + "lodash.clonedeep": "^4.5.0", + "lodash.merge": "^4.6.0", "react": "^15.3.2", "react-dom": "^15.3.2" }, diff --git a/web/yarn.lock b/web/yarn.lock index 17a1e6d..13300be 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1673,6 +1673,14 @@ loader-utils@^0.2.11, loader-utils@^0.2.16: json5 "^0.5.0" object-assign "^4.0.1" +lodash.clonedeep: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" + +lodash.merge: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5" + lodash@^4.17.2, lodash@^4.2.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"