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

Basic pagination working

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-04-07 04:50:46 +02:00
parent 5515774d17
commit 0fcee4a741
6 changed files with 90 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
backend/build/server.js
View File

@@ -78,7 +78,7 @@
router.get('/search/listings', function () { router.get('/search/listings', function () {
var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) { var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) {
var bounds, minPrice, maxPrice, minSize, maxSize, rooms, adType, category, sort, lastRecordId, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, price, and, allRooms, or, size, allCategories, _or, cnt, all; var bounds, minPrice, maxPrice, minSize, maxSize, rooms, adType, category, sort, page, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, price, and, allRooms, or, size, allCategories, _or, cnt, all;
return regeneratorRuntime.wrap(function _callee$(_context) { return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) { while (1) {
@@ -94,7 +94,7 @@
adType = req.query.adType; adType = req.query.adType;
category = req.query.category; category = req.query.category;
sort = req.query.sort; sort = req.query.sort;
lastRecordId = req.query.lastRecordId; page = req.query.page || 0;
properties = db.collection('listings'); properties = db.collection('listings');
query = {}; query = {};
@@ -204,21 +204,21 @@
res.header('X-Total-Count', cnt); res.header('X-Total-Count', cnt);
if (lastRecordId) { //if (lastRecordId) {
query = Object.assign(query, { //query = Object.assign(query, {
"_id": { //"_id": {
"$gt": new ObjectID(lastRecordId) //"$gt": new ObjectID(lastRecordId)
} //}
}); //});
} //}
_context.next = 29; _context.next = 28;
return properties.find(query, { return properties.find(query, {
//"sort": [['field1','asc'], ['field2','desc']] //"sort": [['field1','asc'], ['field2','desc']]
"sort": [['price', 'asc']] "sort": [['price', 'asc']]
}).limit(20).toArray(); }).skip(20 * page).limit(20).toArray();
case 29: case 28:
all = _context.sent; all = _context.sent;
@@ -228,22 +228,22 @@
res.json(all); res.json(all);
res.end(); res.end();
_context.next = 39; _context.next = 38;
break; break;
case 35: case 34:
_context.prev = 35; _context.prev = 34;
_context.t0 = _context['catch'](0); _context.t0 = _context['catch'](0);
console.log('error:', _context.t0); console.log('error:', _context.t0);
next(_context.t0); next(_context.t0);
case 39: case 38:
case 'end': case 'end':
return _context.stop(); return _context.stop();
} }
} }
}, _callee, undefined, [[0, 35]]); }, _callee, undefined, [[0, 34]]);
})); }));
return function (_x, _x2, _x3) { return function (_x, _x2, _x3) {
@@ -256,8 +256,8 @@
app.use(function (req, res, next) { app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id, X-Total-Count");
res.header("Access-Control-Expose-Headers", "X-Last-Record-Id"); res.header("Access-Control-Expose-Headers", "X-Last-Record-Id, X-Total-Count");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true'); res.header('Access-Control-Allow-Credentials', 'true');
next(); next();

23
backend/server.js
View File

@@ -25,7 +25,8 @@ router.get('/search/listings', async (req, res, next) => {
const adType = req.query.adType; const adType = req.query.adType;
const category = req.query.category; const category = req.query.category;
const sort = req.query.sort; const sort = req.query.sort;
const lastRecordId = req.query.lastRecordId; const page = req.query.page || 0;
const properties = db.collection('listings'); const properties = db.collection('listings');
let query = {}; let query = {};
@@ -123,18 +124,18 @@ router.get('/search/listings', async (req, res, next) => {
res.header('X-Total-Count', cnt); res.header('X-Total-Count', cnt);
if (lastRecordId) { //if (lastRecordId) {
query = Object.assign(query, { //query = Object.assign(query, {
"_id": { //"_id": {
"$gt": new ObjectID(lastRecordId) //"$gt": new ObjectID(lastRecordId)
} //}
}); //});
} //}
const all = await properties.find(query, { const all = await properties.find(query, {
//"sort": [['field1','asc'], ['field2','desc']] //"sort": [['field1','asc'], ['field2','desc']]
"sort": [['price','asc']] "sort": [['price','asc']]
}).limit(20).toArray(); }).skip(20 * page).limit(20).toArray();
if (all.length > 0) { if (all.length > 0) {
res.header('X-Last-Record-Id', [...all].pop()._id); res.header('X-Last-Record-Id', [...all].pop()._id);
@@ -154,8 +155,8 @@ app.use(bodyParser.json());
app.use(function(req, res, next) { app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id, X-Total-Count");
res.header("Access-Control-Expose-Headers", "X-Last-Record-Id"); res.header("Access-Control-Expose-Headers", "X-Last-Record-Id, X-Total-Count");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true'); res.header('Access-Control-Allow-Credentials', 'true');
next(); next();

27
web/components/Listings.js
View File

@@ -15,12 +15,17 @@ export default class Listings extends React.Component {
//console.log('node.parentNode.scrollTop', node.scrollTop); //console.log('node.parentNode.scrollTop', node.scrollTop);
//console.log('node.parentNode.clientHeight', node.clientHeight); //console.log('node.parentNode.clientHeight', node.clientHeight);
if (this.props && this.props.loadingMore) {
console.log('still loading!');
return;
}
console.log('scrolling', node.scrollTop, node.scrollHeight, offset); console.log('scrolling', node.scrollTop, node.scrollHeight, offset);
if (offset < 50) { if (offset < 50) {
console.log('load more'); console.log('load more');
this.removeScrollListener(); //this.removeScrollListener();
this.props.dispatch({type: 'LOAD_MORE_LISTINGS'}); this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
} }
} }
@@ -46,15 +51,13 @@ export default class Listings extends React.Component {
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props); console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props);
//setTimeout(() => {
//this.attachScrollListener(); //if (this.props.loadingMore != null) {
//}, 1000); //if (!this.props.loadingMore && prevProps.loadingMore) {
if (this.props.loadingMore != null) { //this.attachScrollListener();
if (!this.props.loadingMore && prevProps.loadingMore) { //console.log('ATTACHING AGAIN', this);
this.attachScrollListener(); //}
console.log('ATTACHING AGAIN', this); //}
}
}
} }
renderListings () { renderListings () {
@@ -131,7 +134,7 @@ export default class Listings extends React.Component {
render () { render () {
const {listings = (new Map())} = this.props; const {listings = (new Map()), totalCount} = this.props;
return ( return (
<div ref="listings" className="listings"> <div ref="listings" className="listings">
@@ -145,7 +148,7 @@ export default class Listings extends React.Component {
</div> </div>
</div> </div>
<div className="listings-count"> <div className="listings-count">
{listings.size} rezultata {totalCount} rezultata
</div> </div>
</div> </div>

19
web/components/Main.js
View File

@@ -13,6 +13,7 @@ class Main extends React.Component {
listingDetails: false, listingDetails: false,
listings: (new Map()), listings: (new Map()),
imageIndex: 0, imageIndex: 0,
page: 0,
filters: { filters: {
rooms: {}, rooms: {},
category: {} category: {}
@@ -89,7 +90,8 @@ class Main extends React.Component {
map.addListener('idle', () => { map.addListener('idle', () => {
console.log('idle'); console.log('idle');
this.refreshListings(); this.dispatch({type: 'MAP_IDLE'});
//this.refreshListings();
}); });
} }
@@ -151,7 +153,7 @@ class Main extends React.Component {
minPrice, minPrice,
maxPrice, maxPrice,
category, category,
lastRecordId: this.state.lastRecordId page: this.state.page
}); });
@@ -161,16 +163,14 @@ class Main extends React.Component {
properties properties
.then(p => { .then(p => {
const lastRecordId = p.headers.get('X-Last-Record-Id');
console.log('lastRecordId', lastRecordId, p.headers);
return { return {
body: p.text(), body: p.text(),
lastRecordId: p.headers.get('X-Last-Record-Id') totalCount: p.headers.get('X-Total-Count')
}; };
}) })
.then(({body, lastRecordId}) => { .then(({body, totalCount}) => {
body.then(p => { body.then(p => {
console.log('results_received: ', body, lastRecordId); console.log('results_received: ', totalCount);
const data = JSON.parse(p); const data = JSON.parse(p);
const listingExists = (id) => { const listingExists = (id) => {
@@ -252,8 +252,8 @@ class Main extends React.Component {
action: { action: {
listings: data, listings: data,
newMarkers, newMarkers,
lastRecordId, more,
more totalCount
} }
}); });
}); });
@@ -362,6 +362,7 @@ class Main extends React.Component {
} else { } else {
children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>); children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
children.push(<Listings children.push(<Listings
totalCount={this.state.totalCount}
loadingMore={this.state.loadingMore} loadingMore={this.state.loadingMore}
listings={this.state.listings} listings={this.state.listings}
dispatch={this.dispatch.bind(this)} dispatch={this.dispatch.bind(this)}

10
web/lib/api.js
View File

@@ -8,7 +8,7 @@ export const loadProperties = ({
maxSize = '', maxSize = '',
rooms = {}, rooms = {},
category = {}, category = {},
lastRecordId page = 1
}) => { }) => {
const allRooms = Object const allRooms = Object
.keys(rooms) .keys(rooms)
@@ -22,11 +22,11 @@ export const loadProperties = ({
// TODO: handle errors // TODO: handle errors
//return fetch(process.env.API_URL + '/api/search', { //return fetch(process.env.API_URL + '/api/search', {
let url = `http://localhost:3001/api/search/listings?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}&page=${page}`
if (lastRecordId) { //if (lastRecordId) {
url += `&lastRecordId=${lastRecordId}`; //url += `&lastRecordId=${lastRecordId}`;
} //}
return fetch(url, { return fetch(url, {
//credentials: 'include' //credentials: 'include'

58
web/lib/handlers.js
View File

@@ -3,7 +3,7 @@ import { markSeen } from './api';
const setMaxPrice = ({ type, action }, component) => { const setMaxPrice = ({ type, action }, component) => {
const maxPrice = parseFloat(action.maxPrice); const maxPrice = parseFloat(action.maxPrice);
component.setState({ component.setState({
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
maxPrice: isNaN(maxPrice) ? undefined : maxPrice, maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
@@ -15,7 +15,7 @@ const setMaxPrice = ({ type, action }, component) => {
const setMinPrice = ({ type, action }, component) => { const setMinPrice = ({ type, action }, component) => {
const minPrice = parseFloat(action.minPrice); const minPrice = parseFloat(action.minPrice);
component.setState({ component.setState({
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
minPrice: isNaN(minPrice) ? undefined : minPrice, minPrice: isNaN(minPrice) ? undefined : minPrice,
@@ -27,7 +27,7 @@ const setMinPrice = ({ type, action }, component) => {
const setMinSize = ({ type, action }, component) => { const setMinSize = ({ type, action }, component) => {
const minSize = parseFloat(action.minSize); const minSize = parseFloat(action.minSize);
component.setState({ component.setState({
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
minSize: isNaN(minSize) ? undefined : minSize, minSize: isNaN(minSize) ? undefined : minSize,
@@ -39,7 +39,7 @@ const setMinSize = ({ type, action }, component) => {
const setMaxSize = ({ type, action }, component) => { const setMaxSize = ({ type, action }, component) => {
const maxSize = parseFloat(action.maxSize); const maxSize = parseFloat(action.maxSize);
component.setState({ component.setState({
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
maxSize: isNaN(maxSize) ? undefined : maxSize, maxSize: isNaN(maxSize) ? undefined : maxSize,
@@ -78,8 +78,8 @@ const listingsLoaded = ({ type, action }, component) => {
component.setState({ component.setState({
listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings, listings: action.more ? (new Map([...component.state.listings, ...currentListings])) : currentListings,
lastRecordId: !action.more ? null : action.lastRecordId, loadingMore: false,
loadingMore: false totalCount: action.totalCount
}, () => { }, () => {
component.markers = action.newMarkers; component.markers = action.newMarkers;
console.log('ALL LOADED', component.state.listings); console.log('ALL LOADED', component.state.listings);
@@ -117,7 +117,7 @@ const viewImage = ({ type, action }, component) => {
const searchPlaceChanged = ({ type, action }, component) => { const searchPlaceChanged = ({ type, action }, component) => {
component.setState({ component.setState({
listingDetails: false, listingDetails: false,
lastRecordId: null page: 0
}); });
}; };
@@ -126,7 +126,7 @@ const setRooms = ({ type, action }, component) => {
component.setState( component.setState(
{ {
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
rooms: { rooms: {
@@ -162,7 +162,7 @@ const setCategory = ({type, action}, component) => {
component.setState( component.setState(
{ {
lastRecordId: null, page: 0,
filters: { filters: {
...component.state.filters, ...component.state.filters,
category: { category: {
@@ -220,27 +220,26 @@ const backToResults = ({type, action}, component) => {
const loadMoreListings = ({type, action}, component) => { const loadMoreListings = ({type, action}, component) => {
console.log('loading more'); console.log('loading more');
component.setState({ const currentPage = component.state.page;
loadingMore: true if (currentPage * 20 < component.state.totalCount) {
}, () => { component.setState({
component.refreshListings(true); loadingMore: true,
}); page: currentPage + 1
}, () => {
component.refreshListings(true);
});
}
} }
//const loadMoreListingsLoaded = ({type, action}, component) => { const mapIdle = ({type, action}, component) => {
//const currentListings = new Map(); component.setState({
page: 0
//for (const listing of action.listings) { }, () => {
//currentListings.set(listing._id, listing); const scrollElem = document.querySelector('.right-content');
//} scrollElem.scrollTop = 0;
component.refreshListings();
//component.setState({ })
//listings: new Map([...component.state.listings, ...currentListings]), }
//lastRecordId: action.lastRecordId
//}, () => {
//component.markers = action.newMarkers;
//});
//}
const handlers = { const handlers = {
SET_MIN_PRICE: setMinPrice, SET_MIN_PRICE: setMinPrice,
@@ -259,7 +258,8 @@ const handlers = {
SET_CATEGORY: setCategory, SET_CATEGORY: setCategory,
ON_LISTING_MOUSE_OVER: onListingMouseOver, ON_LISTING_MOUSE_OVER: onListingMouseOver,
BACK_TO_RESULTS: backToResults, BACK_TO_RESULTS: backToResults,
LOAD_MORE_LISTINGS: loadMoreListings LOAD_MORE_LISTINGS: loadMoreListings,
MAP_IDLE: mapIdle
}; };
export const handleMessage = ({ type, action }, component) => { export const handleMessage = ({ type, action }, component) => {