@@ -64,17 +72,15 @@ export default class ListingDetails extends React.Component {
-
- 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.
- 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!
+
+ {listing.longDescription}
-
-
+ {!descriptionExpanded
+ ?
+
+ : null}
diff --git a/web/components/Main.js b/web/components/Main.js
index c4dfe66..0db8523 100644
--- a/web/components/Main.js
+++ b/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 = '
';
- 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(
);
+ const listing = this.state.listings[this.state.listingId];
+ console.log(this.state);
+ children.push();
} else {
- children.push();
+ children.push();
children.push();
}
const content = (
@@ -107,8 +161,8 @@ class Main extends React.Component {
}
render() {
- const leftStyle = {};
- const rightStyle = {};
+ const leftStyle = {};
+ const rightStyle = {};
const listingDetails = true;
let leftClass = 'left-base';
diff --git a/web/dist/main.css b/web/dist/main.css
index 2c5e5df..8608b62 100644
--- a/web/dist/main.css
+++ b/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;
diff --git a/web/lib/api.js b/web/lib/api.js
new file mode 100644
index 0000000..ae37b75
--- /dev/null
+++ b/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);
+}
+
diff --git a/web/lib/handlers.js b/web/lib/handlers.js
new file mode 100644
index 0000000..c8333f3
--- /dev/null
+++ b/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);
+}
diff --git a/web/package.json b/web/package.json
index 0bcdc1f..8207531 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/yarn.lock b/web/yarn.lock
index c612e9c..b511bc4 100644
--- a/web/yarn.lock
+++ b/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"