senaduka/old-kivi
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Router in a good shape

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-04-09 19:34:08 +02:00
parent 562bbc638f
commit 1fdcc24827
7 changed files with 160 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/Filters.js
View File

@@ -43,6 +43,9 @@ export default class Filters extends React.Component {
}
onRoomsClick(rooms) {
this.props.dispatch({type: 'UPDATE_ROUTE', action: {
params: {rooms}
}});
this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
}

2
web/components/Gallery.js
View File

@@ -56,7 +56,7 @@ export default class Gallery extends React.Component {
cls += ' selected'
}
return <div onClick={this.onImageDotClick.bind(this, index)} className={cls}></div>
return <div key={img} onClick={this.onImageDotClick.bind(this, index)} className={cls}></div>
})}
</div>
</div>)

8
web/components/ListingDetails.js
View File

@@ -9,6 +9,14 @@ export default class ListingDetails extends React.Component {
}
onBackClick() {
this.props.dispatch({type: 'UPDATE_ROUTE', action: {
toDispatch: {
type: 'BACK_TO_RESULTS'
},
params: {
listingId: null
}
}});
this.props.dispatch({type: 'BACK_TO_RESULTS'});
}

22
web/components/Listings.js
View File

@@ -22,8 +22,22 @@ export default class Listings extends React.Component {
}
onListingClick(id) {
loadListing(id).then(l => l.text()).then(l => {
console.log('listing loaded', l);
console.log('lising clicked');
this.props.dispatch({type: 'UPDATE_ROUTE', action: {
toDispatch: {
type: 'VIEW_LISTING_DETAILS', action: {
id,
listing: JSON.parse(l)
}
},
params: {
listingId: id
}
}});
this.props.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
id,
listing: JSON.parse(l)
@@ -108,6 +122,12 @@ export default class Listings extends React.Component {
}
onSortChange (e) {
this.props.dispatch({type: 'UPDATE_ROUTE', action: {
params: {
sort: e.target.value
}
}});
this.props.dispatch({type: 'SORT_CHANGE', action: {
sort: e.target.value
}});

58
web/components/Main.js
View File

@@ -24,15 +24,18 @@ class Main extends React.Component {
}
if (props.initialState) {
props.initialState.sort = props.initialState.sort || state.sort;
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;
if (state.listingId) {
state.listingDetails = true;
}
}
this.state = state;
this.router = new Router(this);
this.router = new Router(this, props.initialState);
}
dispatch ({type, action = {}}) {
@@ -81,7 +84,6 @@ class Main extends React.Component {
map.setCenter(place.geometry.location);
map.setZoom(18);
}
console.log(map.getBounds());
this.dispatch({type: 'SEARCH_PLACE_CHANGED'});
});
@@ -97,13 +99,15 @@ class Main extends React.Component {
this.map = map;
map.addListener('zoom_changed', () => {
console.log('zoom_changed');
this.removeAllMarkers();
this.markers = [];
});
map.addListener('idle', () => {
console.log('idle');
this.dispatch({type: 'UPDATE_ROUTE', action: {params: {
bounds: map.getBounds().toUrlValue()
}}});
this.dispatch({type: 'MAP_IDLE'});
});
@@ -113,9 +117,7 @@ class Main extends React.Component {
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)
@@ -126,7 +128,6 @@ class Main extends React.Component {
removeAllMarkers () {
if (this.markers) {
console.log('removeAllMarkers');
this.markers.forEach((m) => m.marker.setMap(null));
}
}
@@ -195,7 +196,6 @@ class Main extends React.Component {
})
.then(({body, totalCount}) => {
body.then(p => {
console.log('results_received: ', totalCount);
const data = JSON.parse(p);
const listingExists = (id) => {
@@ -213,7 +213,6 @@ class Main extends React.Component {
newMarkers.push(m);
}
});
console.log('markers_removed');
}
for(const [index, prop] of data.entries()) {
@@ -250,19 +249,36 @@ class Main extends React.Component {
});
marker.addListener('click', () => {
console.log('clicking...', prop._id);
// Maybe move out and call when popping state
if (this.state.listingId) {
const prevSelected = this.findMarker(this.state.listingId);
if (prevSelected) {
console.log('prevselected', prevSelected);
prevSelected.marker.setIcon(this.visitedMarkerIcon());
}
}
marker.setIcon(this.selectedMarkerIcon());
loadListing(prop._id).then(l => l.text()).then(l => {
console.log('listing loaded', l);
this.dispatch({type: 'UPDATE_ROUTE', action: {
toDispatch: {
type: 'VIEW_LISTING_DETAILS', action: {
id: prop._id,
listing: JSON.parse(l)
}
},
params: {
listingId: prop._id
}
}});
//this.dispatch({type: 'UPDATE_ROUTE', action: {type: 'VIEW_LISTING_DETAILS', action: {
//id: prop._id,
//listing: JSON.parse(l)
//}}});
this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
id: prop._id,
listing: JSON.parse(l)
@@ -293,7 +309,18 @@ class Main extends React.Component {
* Refreshes search
*/
refreshListings(more = false) {
console.log('refreshListings');
// TODO: move somewhere else
if (!more && this.state.listingId) {
loadListing(this.state.listingId).then(l => l.text()).then(l => {
this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
id: this.state.listingId,
listing: JSON.parse(l)
}});
});
}
if (!more) {
this.loadPins();
@@ -332,7 +359,6 @@ class Main extends React.Component {
})
.then(({body, totalCount}) => {
body.then(p => {
console.log('results_received: ', totalCount);
const data = JSON.parse(p);
this.dispatch({
@@ -437,9 +463,7 @@ class Main extends React.Component {
const children = [];
if (this.state.listingDetails) {
console.log('CURRENT LISTINGS', this.state.listings);
const listing = this.state.listing; //this.state.listings.get(this.state.listingId);
console.log(this.state);
children.push(<ListingDetails
listing={listing}
imageIndex={this.state.imageIndex}

19
web/lib/handlers.js
View File

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

88
web/lib/router.js
View File

@@ -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("&")}`);
}
}
}
}