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

Search & show listings

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-03-31 14:31:56 +02:00
parent c32e49e6c3
commit d6c2e857d0
16 changed files with 1598 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/Filters.js
View File

@@ -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>

38
web/components/ListingDetails.js
View File

@@ -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="">Novi Grad, Sarajevo</div>
<div className="">{listing.address}</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">
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!
<div className={descriptionClasses}>
{listing.longDescription}
</div>
<div className="ld-read-more">
<a href="">Procitajte vise</a>
</div>
{!descriptionExpanded
?
<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>

66
web/components/Main.js
View File

@@ -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 rightStyle = {};
const leftStyle = {};
const rightStyle = {};
const listingDetails = true;
let leftClass = 'left-base';

8
web/dist/main.css vendored
View File

@@ -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;

13
web/lib/api.js Normal file
View File

@@ -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);
}

43
web/lib/handlers.js Normal file
View File

@@ -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);
}

3
web/package.json
View File

@@ -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",

20
web/yarn.lock
View File

@@ -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"