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

trying out

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-04-07 04:02:01 +02:00
parent 6716dd3076
commit 5515774d17
6 changed files with 209 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
web/components/Listings.js
View File

@@ -1,7 +1,31 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {formatPrice} from '../lib/helpers';
export default class Listings extends React.Component {
constructor(props) {
super(props);
this.handleScroll = (e) => {
const node = e.target;
const offset = node.scrollHeight - node.scrollTop - node.clientHeight;
//console.log('-----------------');
//console.log('node.scrollHeight', node.scrollHeight);
//console.log('node.parentNode.scrollTop', node.scrollTop);
//console.log('node.parentNode.clientHeight', node.clientHeight);
console.log('scrolling', node.scrollTop, node.scrollHeight, offset);
if (offset < 50) {
console.log('load more');
this.removeScrollListener();
this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
}
}
}
onListingClick(id) {
this.props.dispatch({
type: 'VIEW_LISTING_DETAILS',
@@ -20,6 +44,19 @@ export default class Listings extends React.Component {
});
}
componentDidUpdate (prevProps) {
console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props);
//setTimeout(() => {
//this.attachScrollListener();
//}, 1000);
if (this.props.loadingMore != null) {
if (!this.props.loadingMore && prevProps.loadingMore) {
this.attachScrollListener();
console.log('ATTACHING AGAIN', this);
}
}
}
renderListings () {
const {listings = (new Map())} = this.props;
@@ -69,12 +106,35 @@ export default class Listings extends React.Component {
return rendered;
}
render() {
componentDidMount () {
this.attachScrollListener();
}
componentWillUnmount () {
this.removeScrollListener();
}
attachScrollListener () {
const listings = ReactDOM.findDOMNode(this.refs.listings);
listings.parentNode.addEventListener('scroll', this.handleScroll);
}
removeScrollListener () {
const listings = ReactDOM.findDOMNode(this.refs.listings);
listings.parentNode.removeEventListener('scroll', this.handleScroll);
}
//componentDidUpdate() {
//console.log('componentDidUpdate');
////this.attachScrollListener();
//}
render () {
const {listings = (new Map())} = this.props;
return (
<div className="listings">
<div ref="listings" className="listings">
<div className="listings-header">
<div className="select-container">
<div className="select-group">

26
web/components/Main.js
View File

@@ -129,7 +129,7 @@ class Main extends React.Component {
/*
* Refreshes search
*/
refreshListings() {
refreshListings(more = false) {
console.log('refreshListings');
const map = this.map;
@@ -150,7 +150,8 @@ class Main extends React.Component {
maxSize,
minPrice,
maxPrice,
category
category,
lastRecordId: this.state.lastRecordId
});
@@ -158,10 +159,19 @@ class Main extends React.Component {
return this.findMarker(id) != null;
}
properties.then(p => p.text()).then(p => {
properties
.then(p => {
const lastRecordId = p.headers.get('X-Last-Record-Id');
console.log('lastRecordId', lastRecordId, p.headers);
return {
body: p.text(),
lastRecordId: p.headers.get('X-Last-Record-Id')
};
})
.then(({body, lastRecordId}) => {
body.then(p => {
console.log('results_received: ', body, lastRecordId);
const data = JSON.parse(p);
console.log('results_received');
const listingExists = (id) => {
return data.findIndex(l => l._id === id) !== -1
@@ -241,9 +251,12 @@ class Main extends React.Component {
type: 'LISTINGS_LOADED',
action: {
listings: data,
newMarkers
newMarkers,
lastRecordId,
more
}
});
});
})
}
@@ -349,6 +362,7 @@ class Main extends React.Component {
} else {
children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
children.push(<Listings
loadingMore={this.state.loadingMore}
listings={this.state.listings}
dispatch={this.dispatch.bind(this)}
/>);

11
web/lib/api.js
View File

@@ -7,7 +7,8 @@ export const loadProperties = ({
minSize = '',
maxSize = '',
rooms = {},
category = {}
category = {},
lastRecordId
}) => {
const allRooms = Object
.keys(rooms)
@@ -21,7 +22,13 @@ export const loadProperties = ({
// TODO: handle errors
//return fetch(process.env.API_URL + '/api/search', {
return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`, {
let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`
if (lastRecordId) {
url += `&lastRecordId=${lastRecordId}`;
}
return fetch(url, {
//credentials: 'include'
});

43
web/lib/handlers.js
View File

@@ -3,6 +3,7 @@ import { markSeen } from './api';
const setMaxPrice = ({ type, action }, component) => {
const maxPrice = parseFloat(action.maxPrice);
component.setState({
lastRecordId: null,
filters: {
...component.state.filters,
maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
@@ -14,6 +15,7 @@ const setMaxPrice = ({ type, action }, component) => {
const setMinPrice = ({ type, action }, component) => {
const minPrice = parseFloat(action.minPrice);
component.setState({
lastRecordId: null,
filters: {
...component.state.filters,
minPrice: isNaN(minPrice) ? undefined : minPrice,
@@ -25,6 +27,7 @@ const setMinPrice = ({ type, action }, component) => {
const setMinSize = ({ type, action }, component) => {
const minSize = parseFloat(action.minSize);
component.setState({
lastRecordId: null,
filters: {
...component.state.filters,
minSize: isNaN(minSize) ? undefined : minSize,
@@ -36,6 +39,7 @@ const setMinSize = ({ type, action }, component) => {
const setMaxSize = ({ type, action }, component) => {
const maxSize = parseFloat(action.maxSize);
component.setState({
lastRecordId: null,
filters: {
...component.state.filters,
maxSize: isNaN(maxSize) ? undefined : maxSize,
@@ -65,6 +69,7 @@ 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) {
@@ -72,9 +77,12 @@ const listingsLoaded = ({ type, action }, component) => {
}
component.setState({
listings: currentListings
listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings,
lastRecordId: !action.more ? null : action.lastRecordId,
loadingMore: false
}, () => {
component.markers = action.newMarkers;
console.log('ALL LOADED', component.state.listings);
});
};
@@ -108,7 +116,8 @@ const viewImage = ({ type, action }, component) => {
const searchPlaceChanged = ({ type, action }, component) => {
component.setState({
listingDetails: false
listingDetails: false,
lastRecordId: null
});
};
@@ -117,6 +126,7 @@ const setRooms = ({ type, action }, component) => {
component.setState(
{
lastRecordId: null,
filters: {
...component.state.filters,
rooms: {
@@ -152,6 +162,7 @@ const setCategory = ({type, action}, component) => {
component.setState(
{
lastRecordId: null,
filters: {
...component.state.filters,
category: {
@@ -206,6 +217,31 @@ const backToResults = ({type, action}, component) => {
});
}
const loadMoreListings = ({type, action}, component) => {
console.log('loading more');
component.setState({
loadingMore: true
}, () => {
component.refreshListings(true);
});
}
//const loadMoreListingsLoaded = ({type, action}, component) => {
//const currentListings = new Map();
//for (const listing of action.listings) {
//currentListings.set(listing._id, listing);
//}
//component.setState({
//listings: new Map([...component.state.listings, ...currentListings]),
//lastRecordId: action.lastRecordId
//}, () => {
//component.markers = action.newMarkers;
//});
//}
const handlers = {
SET_MIN_PRICE: setMinPrice,
SET_MAX_PRICE: setMaxPrice,
@@ -222,7 +258,8 @@ const handlers = {
UPDATE_SEARCH: updateSearch,
SET_CATEGORY: setCategory,
ON_LISTING_MOUSE_OVER: onListingMouseOver,
BACK_TO_RESULTS: backToResults
BACK_TO_RESULTS: backToResults,
LOAD_MORE_LISTINGS: loadMoreListings
};
export const handleMessage = ({ type, action }, component) => {