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

59
backend/build/server.js
View File

@@ -58,9 +58,13 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
var MongoClient = __webpack_require__(3).MongoClient;
var ObjectID = __webpack_require__(3).ObjectID;
var url = 'mongodb://localhost:27017/kivi';
__webpack_require__(4);
@@ -72,9 +76,9 @@
var db = void 0;
router.get('/search', function () {
router.get('/search/listings', function () {
var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) {
var bounds, minPrice, maxPrice, minSize, maxSize, rooms, adType, category, sort, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, price, and, allRooms, or, size, allCategories, _or, all;
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;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
@@ -90,6 +94,7 @@
adType = req.query.adType;
category = req.query.category;
sort = req.query.sort;
lastRecordId = req.query.lastRecordId;
properties = db.collection('listings');
query = {};
@@ -149,9 +154,6 @@
and.push({ "$or": or });
//query = Object.assign(query, {
//rooms:
//});
}
if (minSize || maxSize) {
@@ -180,9 +182,6 @@
and.push({ "$or": _or });
//query = Object.assign(query, {
//{"$or" : or }
//});
}
if (and.length > 0) {
@@ -191,35 +190,60 @@
});
}
//query = Object.assign(query, {
//"_id": 1
//});
console.log('QUERY: ', query);
_context.next = 23;
_context.next = 24;
return properties.find(query).count();
case 24:
cnt = _context.sent;
res.header('X-Total-Count', cnt);
if (lastRecordId) {
query = Object.assign(query, {
"_id": {
"$gt": new ObjectID(lastRecordId)
}
});
}
_context.next = 29;
return properties.find(query, {
//"sort": [['field1','asc'], ['field2','desc']]
"sort": [['price', 'asc']]
}).toArray();
}).limit(20).toArray();
case 23:
case 29:
all = _context.sent;
if (all.length > 0) {
res.header('X-Last-Record-Id', [].concat(_toConsumableArray(all)).pop()._id);
}
res.json(all);
res.end();
_context.next = 32;
_context.next = 39;
break;
case 28:
_context.prev = 28;
case 35:
_context.prev = 35;
_context.t0 = _context['catch'](0);
console.log('error:', _context.t0);
next(_context.t0);
case 32:
case 39:
case 'end':
return _context.stop();
}
}
}, _callee, undefined, [[0, 28]]);
}, _callee, undefined, [[0, 35]]);
}));
return function (_x, _x2, _x3) {
@@ -232,7 +256,8 @@
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id");
res.header("Access-Control-Expose-Headers", "X-Last-Record-Id");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true');
next();

30
backend/server.js
View File

@@ -1,6 +1,8 @@
import express from 'express'
import bodyParser from 'body-parser';
var MongoClient = require('mongodb').MongoClient;
var ObjectID = require('mongodb').ObjectID;
var url = 'mongodb://localhost:27017/kivi';
require("babel-polyfill");
@@ -12,7 +14,7 @@ const AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
let db;
router.get('/search', async (req, res, next) => {
router.get('/search/listings', async (req, res, next) => {
try {
const bounds = req.query.bounds || '';
const minPrice = req.query.minPrice;
@@ -23,6 +25,7 @@ router.get('/search', async (req, res, next) => {
const adType = req.query.adType;
const category = req.query.category;
const sort = req.query.sort;
const lastRecordId = req.query.lastRecordId;
const properties = db.collection('listings');
let query = {};
@@ -111,11 +114,31 @@ router.get('/search', async (req, res, next) => {
});
}
//query = Object.assign(query, {
//"_id": 1
//});
console.log('QUERY: ', query);
const cnt = await properties.find(query).count();
res.header('X-Total-Count', cnt);
if (lastRecordId) {
query = Object.assign(query, {
"_id": {
"$gt": new ObjectID(lastRecordId)
}
});
}
const all = await properties.find(query, {
//"sort": [['field1','asc'], ['field2','desc']]
"sort": [['price','asc']]
}).toArray();
}).limit(20).toArray();
if (all.length > 0) {
res.header('X-Last-Record-Id', [...all].pop()._id);
}
res.json(all);
res.end();
@@ -131,7 +154,8 @@ app.use(bodyParser.json());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Last-Record-Id");
res.header("Access-Control-Expose-Headers", "X-Last-Record-Id");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true');
next();

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