Search & show listings

README.md

@@ -26,4 +26,3 @@ Trenutno postoji samo jedan crawler a to je `olx.js`
 3. node build/crawler.js
 4. profit!
 
-Trenutno se rezultati crawlanja spasavaju u JSON file, naravno ovo moramo cim prije promjeniti.

backend/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "es2017"],
+}

backend/build/server.js

@@ -0,0 +1,187 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+	var _express = __webpack_require__(1);
+
+	var _express2 = _interopRequireDefault(_express);
+
+	var _bodyParser = __webpack_require__(2);
+
+	var _bodyParser2 = _interopRequireDefault(_bodyParser);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	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 url = 'mongodb://localhost:27017/example';
+
+	__webpack_require__(4);
+
+	var router = _express2.default.Router({ mergeParams: true });
+
+	var PORT = process.env.PORT || 3001;
+	var AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
+
+	// TODO:
+	// db.results.ensureIndex({loc:"2d"})
+	//collection.ensureIndex("username",callback)
+
+	router.get('/search', function () {
+	  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(req, res, next) {
+	    var bounds, db, properties, query, _bounds$split$map, _bounds$split$map2, lat1, lng1, lat2, lng2, box, all;
+
+	    return regeneratorRuntime.wrap(function _callee$(_context) {
+	      while (1) {
+	        switch (_context.prev = _context.next) {
+	          case 0:
+	            _context.prev = 0;
+	            bounds = req.query.bounds || '';
+	            _context.next = 4;
+	            return MongoClient.connect(url);
+
+	          case 4:
+	            db = _context.sent;
+	            properties = db.collection('results');
+	            query = {};
+
+
+	            if (bounds) {
+	              _bounds$split$map = bounds.split(',').map(parseFloat), _bounds$split$map2 = _slicedToArray(_bounds$split$map, 4), lat1 = _bounds$split$map2[0], lng1 = _bounds$split$map2[1], lat2 = _bounds$split$map2[2], lng2 = _bounds$split$map2[3];
+	              box = [[lat1, lng1], [lat2, lng2]];
+
+
+	              query = Object.assign(query, {
+	                loc: {
+	                  "$geoWithin": {
+	                    "$box": box
+	                  }
+	                }
+	              });
+	            }
+
+	            _context.next = 10;
+	            return properties.find(query).toArray();
+
+	          case 10:
+	            all = _context.sent;
+
+
+	            res.json(all);
+	            res.end();
+	            _context.next = 15;
+	            return db.close();
+
+	          case 15:
+	            _context.next = 21;
+	            break;
+
+	          case 17:
+	            _context.prev = 17;
+	            _context.t0 = _context['catch'](0);
+
+	            console.log('error:', _context.t0);
+	            next(_context.t0);
+
+	          case 21:
+	          case 'end':
+	            return _context.stop();
+	        }
+	      }
+	    }, _callee, undefined, [[0, 17]]);
+	  }));
+
+	  return function (_x, _x2, _x3) {
+	    return _ref.apply(this, arguments);
+	  };
+	}());
+
+	var app = (0, _express2.default)();
+	app.use(_bodyParser2.default.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-Methods", "GET, POST, OPTIONS");
+	  res.header('Access-Control-Allow-Credentials', 'true');
+	  next();
+	});
+
+	app.use('/api', router);
+	app.listen(PORT, function () {
+	  return console.log('Express server running at localhost: ' + PORT);
+	});
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	module.exports = require("express");
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	module.exports = require("body-parser");
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	module.exports = require("mongodb");
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	module.exports = require("babel-polyfill");
+
+/***/ }
+/******/ ]);

backend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-es2017": "^6.22.0",
+    "body-parser": "^1.17.1",
+    "cookie-parser": "^1.4.3",
+    "express": "^4.15.2",
+    "isomorphic-fetch": "^2.2.1",
+    "mongodb": "^2.2.25"
+  }
+}

backend/server.js

@@ -0,0 +1,62 @@
+import express from 'express'
+import bodyParser from 'body-parser';
+var MongoClient = require('mongodb').MongoClient;
+var url = 'mongodb://localhost:27017/example';
+
+require("babel-polyfill");
+
+const router = express.Router({mergeParams: true})
+
+const PORT = process.env.PORT || 3001;
+const AGENTURA_KEY = process.env.AGENTURA_KEY || '1somethingverysecret';
+
+// TODO:
+// db.results.ensureIndex({loc:"2d"})
+//collection.ensureIndex("username",callback)
+
+router.get('/search', async (req, res, next) => {
+  try {
+    const bounds     = req.query.bounds || '';
+    const db         = await MongoClient.connect(url);
+    const properties = db.collection('results');
+    let query        = {};
+
+    if (bounds) {
+      const [lat1, lng1, lat2, lng2] = bounds.split(',').map(parseFloat)
+      const box                      = [[lat1, lng1], [lat2, lng2]];
+
+      query = Object.assign(query, {
+        loc: {
+          "$geoWithin": {
+            "$box": box
+          }
+        }
+      });
+    }
+
+    const all = await properties.find(query).toArray();
+
+    res.json(all);
+    res.end();
+    await db.close();
+  } catch (e) {
+    console.log('error:', e);
+    next(e);
+  }
+});
+
+
+const app = express()
+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-Methods", "GET, POST, OPTIONS");
+  res.header('Access-Control-Allow-Credentials', 'true');
+  next();
+});
+
+app.use('/api', router);
+app.listen(PORT, () => console.log('Express server running at localhost: ' + PORT));
+

backend/webpack.config.js

@@ -0,0 +1,23 @@
+var fs = require('fs')
+var path = require('path')
+
+module.exports = {
+  entry: path.resolve(__dirname, 'server.js'),
+  output: {
+    filename: 'build/server.js'
+  },
+  target: 'node',
+  externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).reduce((ext, mod) => {
+    ext[mod] = 'commonjs ' + mod
+    return ext
+  }, {}),
+  node: {
+    __filename: true,
+    __dirname: true
+  },
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=es2017' }
+    ]
+  }
+}

crawler/specific/olx.js

@@ -4,9 +4,6 @@ let fetch = require('node-fetch');
 let cheerio = require('cheerio');
 let fs = require('fs');
 
-
-const pagesToTake = 10;
-
 export default class OlxCrawler {
 
   constructor(fromPage = 0, toPage = 10, maxResults = 1000) {
@@ -69,6 +66,7 @@ export default class OlxCrawler {
         longDescription: descriptions.last().text(),
         lat,
         lng,
+        loc: [parseFloat(lat), parseFloat(lng)],
         images
       };
 
@@ -85,10 +83,10 @@ export default class OlxCrawler {
       console.log('Starting to index page: ' + pageNr);
       const url = `http://www.olx.ba/pretraga?vrsta=samoizdavanje&sort_order=desc&kategorija=23&sort_po=datum&kanton=9&stranica=${pageNr}`;
 
-      const res = await fetch(url);
+      const res     = await fetch(url);
-      const body = await res.text();
+      const body    = await res.text();
-      const $ = cheerio.load(body);
+      const $       = cheerio.load(body);
-      const hrefs = [];
+      const hrefs   = [];
       const results = {};
 
       $('#rezultatipretrage').find('.listitem').each((i, elem) => {
@@ -135,5 +133,3 @@ export default class OlxCrawler {
   }
 }
 
-
-//indexSingle('http://www.olx.ba/artikal/23198642/trosoban-stan-centar-josipa-vancasa/');

web/components/Filters.js

@@ -8,6 +8,10 @@ export default class Filters extends React.Component {
     }
   }
 
+  onMinPriceChange (e) {
+    this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
+  }
+
   render() {
 
     return (
@@ -21,11 +25,11 @@ export default class Filters extends React.Component {
 
         <div className="filter-row">
           <div className="filter-title">
-            CIJENA
+            CIJENA 
           </div>
 
           <div className="filter-content value-between-box">
-            izmedju <input></input> i <input></input>
+            izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input></input>
           </div>
 
         </div>

web/components/ListingDetails.js

@@ -1,12 +1,21 @@
 import React from 'react';
 
 export default class ListingDetails extends React.Component {
+  onReadMore (e) {
+    e.preventDefault();
+    this.props.dispatch({type: 'EXPAND_DESCRIPTION'});
+  }
+
   onBackClick() {
     if (this.props.onBackClick) {
       this.props.onBackClick();
     }
   }
+
   render() {
+    const {listing, descriptionExpanded} = this.props;
+
+    const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
     return (
       <div className="ld-container">
         <div className="ld-header">
@@ -21,7 +30,6 @@ export default class ListingDetails extends React.Component {
           </div>
           <button className="hide-listing">
             <i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
-
             <span>
               Sakrij
             </span>
@@ -30,16 +38,16 @@ export default class ListingDetails extends React.Component {
 
         <div className="ld-details">
           <div className="ld-image-container">
-            <img src="https://d1qwdw9cs0do74.cloudfront.net/150698038/640x480"></img>
+            <img src={listing.images[0]}></img>
           </div>
           <div className="ld-price-address-box">
             <div className="ld-price">
-              120 000 KM
+              {listing.price}
             </div>
 
             <div className="ld-address">
-              <div className="">Hakije Turajlica 4</div>
+              <div className="">{listing.address}</div>
-              <div className="">Novi Grad, Sarajevo</div>
+              <div className="">{listing.location}</div>
             </div>
           </div>
 
@@ -50,7 +58,7 @@ export default class ListingDetails extends React.Component {
             </div>
             <div className="ld-feature-box">
               <i className="fa fa-home"></i>
-              88m2
+              {listing.size}m2
             </div>
             <div className="ld-feature-box">
               <i className="fa fa-home"></i>
@@ -64,17 +72,15 @@ export default class ListingDetails extends React.Component {
           <div className="ld-check-availability">
             <button>Kontaktiraj</button>
           </div>
-          <div className="ld-description">
+          <div className={descriptionClasses}>
-            Agencija "Nekretnina", (www.nekretnina.ba), prodaje komforan trosoban stan, 67m2, na veoma lijepoj lokaciji, Dobrinja 3. Stan se nalazi na visokom prizemlju stambene zgrade od samo četiri etaže. 
+            {listing.longDescription}
-            Sastoji se od: Ulaznog hodnika, dnevnog boravka, kuhinje, trpezarije, iz koje se izlazi na balkon, dvije spavaće sobe i kupatila. Stan je dvostran a posjeduje i podrumsku prostoriju. Veoma miran kvart sa odličnim komšilukom, okružen šetalištima i parkovima za djecu, sa javnim i privatnim parkingom. Stan zahtjeva dodatna ulaganja po vlastitom izboru i odlična je ponuda za višečlanu porodicu. 
-            Stan je trenutno bez namještaja i kuhinje, spreman za obnovu i useljenje.
-              U neposrednoj blizini se nalaze sve važnije ustanove, osnovna i srednja škola, Peta gimnazija, vrtići, uslužne djelatnosti te gradski saobraćaj. Molimo sve ozbiljno zainteresovane osobe da se jave za dodatne informacije.
-                Želite kvalitetno investirati u nekretnine? Nazovite nas!
           </div>
-          <div className="ld-read-more">
+          {!descriptionExpanded
-            <a href="">Procitajte vise</a>
+            ?
-          </div>
+              <div className="ld-read-more">
-
+                <a href="" onClick={this.onReadMore.bind(this)}>Pročitajte više</a>
+              </div>
+              : null}
           <div className="ld-footer">
           </div>
         </div>

web/components/Main.js

@@ -3,15 +3,25 @@ import Filters from './Filters';
 import Listings from './Listings';
 import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
+import {loadProperties} from '../lib/api'
+import {handleMessage} from '../lib/handlers'
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      listingDetails: false
+      listingDetails: false,
+      filters: {
+        minPrice: 0
+      }
     };
   }
 
+  dispatch ({type, action = {}}) {
+    console.log('DISPATCH', this);
+    handleMessage({type, action}, this);
+  }
+
   componentDidMount() {
     const uluru = {lat: 43.845031, lng: 18.4019262};
     const map = new google.maps.Map(this.refs.map, {
@@ -28,7 +38,8 @@ class Main extends React.Component {
     var control = document.createElement('div');
     control.classList.add('filters-btn-toggle');
     control.innerHTML = '<button>Filters</button>';
-    control.style = "top: 200px;"
+    //control.style = "top: 200px;"
+    control["style"]= "top: 200px;"
 
     var input = document.getElementById('gmaps-places-input');
 
@@ -52,6 +63,7 @@ class Main extends React.Component {
         map.setCenter(place.geometry.location);
         map.setZoom(18);
       }
+      console.log(map.getBounds());
     });
 
     control.addEventListener('click', (e) => {
@@ -59,9 +71,45 @@ class Main extends React.Component {
         mapClicked: true
       });
     });
+
+
     control.index = 1;
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
     this.map = map;
+
+    map.addListener('idle', () => {
+      const properties = loadProperties({
+        bounds: map.getBounds().toUrlValue(),
+        minPrice: this.state.filters.minPrice});
+
+        properties.then(p=> p.text()).then(p => {
+          const data = JSON.parse(p);
+          console.log('props', data)
+          for(const [index, prop] of data.entries()) {
+            const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
+
+            const marker = new google.maps.Marker({
+              position: myLatLng,
+              map: map,
+              title: prop.title
+            });
+
+            marker.addListener('click', () => {
+              console.log('clicking...')
+              this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+                id: index
+              }})
+            });
+          }
+
+          this.dispatch({
+            type: 'LISTINGS_LOADED',
+            action: {
+              listings: data
+            }
+          });
+        })
+    });
   }
 
   onCloseClick(e) {
@@ -93,9 +141,15 @@ class Main extends React.Component {
     const children = [];
 
     if (this.state.listingDetails) {
-      children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
+      const listing = this.state.listings[this.state.listingId];
+      console.log(this.state);
+      children.push(<ListingDetails
+        listing={listing}
+        dispatch={this.dispatch.bind(this)}
+        descriptionExpanded={this.state.descriptionExpanded}
+        onBackClick={this.onBackClick.bind(this)}/>);
     } else {
-      children.push(<Filters 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 onListingClick={this.onListingClick.bind(this)}/>);
     }
     const content = (
@@ -107,8 +161,8 @@ class Main extends React.Component {
   }
 
   render() {
-    const leftStyle  = {};
+    const leftStyle      = {};
-    const rightStyle = {};
+    const rightStyle     = {};
     const listingDetails = true;
 
     let leftClass    = 'left-base';

web/dist/main.css

@@ -653,6 +653,14 @@ html {
   overflow: hidden;
 }
 
+.ld-description.expanded {
+  max-height: none;
+}
+
+.ld-description.expanded:after {
+  background: none;
+}
+
 .ld-description:after {
   position: absolute;
   top: 0;

web/lib/api.js

@@ -0,0 +1,13 @@
+import fetch from 'isomorphic-fetch';
+
+export const loadProperties = ({bounds, minPrice = 0}) => {
+  // TODO: handle errors
+  //return fetch(process.env.API_URL + '/api/search', {
+  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}`, {
+    //credentials: 'include'
+  });
+
+  //const body = await res.text();
+  //return JSON.parse(body);
+}
+

web/lib/handlers.js

@@ -0,0 +1,43 @@
+const setMinPrice = ({type, action}, component) => {
+  component.setState({
+    filters: {
+      minPrice: parseFloat(action.minPrice) || 0
+    }
+  })
+}
+
+const viewListingDetails= ({type, action}, component) => {
+  component.setState({
+    listingDetails: true,
+    listingId: action.id,
+    descriptionExpanded: false
+  })
+}
+
+const listingsLoaded = ({type, action}, component) => {
+  component.setState({
+    listings: action.listings
+  });
+}
+
+const expandDescription = ({type, action}, component) => {
+  component.setState({
+    descriptionExpanded: true
+  });
+}
+
+const handlers = {
+  'SET_MIN_PRICE': setMinPrice,
+  'LISTINGS_LOADED': listingsLoaded,
+  'EXPAND_DESCRIPTION': expandDescription,
+  'VIEW_LISTING_DETAILS': viewListingDetails
+}
+
+export const handleMessage = ({type, action}, component) => {
+
+  if (!handlers[type]) {
+    throw new `Unhandled message: ${type}`;
+  }
+
+  return handlers[type]({type, action}, component);
+}

web/package.json

@@ -15,7 +15,8 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-image-gallery": "^0.7.15"
   },
   "devDependencies": {
     "webpack": "^1.13.3",

web/yarn.lock

@@ -1520,6 +1520,14 @@ loader-utils@^0.2.11:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash@^4.16.2, lodash@^4.2.0:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
@@ -1915,6 +1923,18 @@ react-dom:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
 
+react-image-gallery:
+  version "0.7.15"
+  resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-0.7.15.tgz#8930b0b5d5c04b22dd69434d5497889fd7e9d5dc"
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    react-swipeable "^3.5.1"
+
+react-swipeable@^3.5.1:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-3.9.2.tgz#bbaab62688b1aed4a4f73830d272eedd168f3627"
+
 readable-stream@^1.0.27-1, readable-stream@^1.1.13:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"