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

Only show listings that are visible in the current view

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-04-02 04:49:22 +02:00
parent e02cce155b
commit 80aded2fc3
4 changed files with 62 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/ListingDetails.js
View File

@@ -60,7 +60,7 @@ export default class ListingDetails extends React.Component {
<div className="ld-features">
<div className="ld-feature-box">
<i className="fa fa-bed"></i>
4 sobe
{listing.rooms}
</div>
<div className="ld-feature-box">
<i className="fa fa-home"></i>

88
web/components/Listings.js
View File

@@ -1,13 +1,53 @@
import React from 'react';
export default class Listings extends React.Component {
onListingClick() {
if (this.props.onListingClick) {
this.props.onListingClick();
}
onListingClick(id) {
this.props.dispatch({
type: 'VIEW_LISTING_DETAILS',
action: {
id
}
});
}
renderListings () {
const {listings = (new Map())} = this.props;
const rendered = [];
for(const l of listings.values()) {
const {images} = l;
rendered.push(
<div className="property-list-item" onClick={this.onListingClick.bind(this, l.url)}>
<div className="pli-image">
<img src={images[0]} alt=""></img>
</div>
<div className="pli-details">
<div className="price">{l.price}</div>
<div className="description">{l.rooms ? `${l.rooms}, `: null}{l.size ? `${l.size}m2`: null}</div>
<div className="address">
<div className="street">
{l.address}
</div>
<div className="location">
{l.location}
</div>
</div>
<div className="hours-ago">Prije 2 sata</div>
</div>
</div>
);
}
return rendered;
}
render() {
const {listings = (new Map())} = this.props;
return (
<div className="listings">
<div className="listings-header">
@@ -15,51 +55,17 @@ export default class Listings extends React.Component {
<div className="select-group">
<select name="listings-type" id="listings-type">
<option value="cijena">Cijena: od najmanje</option>
<option value="cijena">Cijena: od najvece</option>
</select>
</div>
</div>
<div className="listings-count">
322 rezultata
{listings.size} rezultata
</div>
</div>
<div className="listings-items">
<div className="property-list-item" onClick={this.onListingClick.bind(this)}>
<div className="pli-image">
<img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
</div>
<div className="pli-details">
<div className="price">12 000 KM</div>
<div className="description">4 sobe, 111m2</div>
<div className="address">
<div className="street">
Hakije Turajlica 2/2
</div>
<div className="location">
Sarajevo, Novi Grad
</div>
</div>
<div className="hours-ago">Prije 2 sata</div>
</div>
</div>
<div className="property-list-item">
<div className="pli-image">
<img src="https://d37lj287rvypnj.cloudfront.net/151086207/medium" alt=""></img>
</div>
<div className="pli-details">
<div className="price">12 000 KM</div>
<div className="description">4 sobe, 111m2</div>
<div className="address">
<div className="street">
Hakije Turajlica 2/2
</div>
<div className="location">
Sarajevo, Novi Grad
</div>
</div>
<div className="hours-ago">Prije 2 sata</div>
</div>
</div>
{this.renderListings()}
</div>
</div>)
}

8
web/components/Main.js
View File

@@ -51,7 +51,7 @@ class Main extends React.Component {
};
var searchBox = new google.maps.places.Autocomplete(input, options);
searchBox.addListener('place_changed', function() {
searchBox.addListener('place_changed', () => {
var place = searchBox.getPlace();
if (!place.geometry) {
@@ -66,6 +66,7 @@ class Main extends React.Component {
map.setZoom(18);
}
console.log(map.getBounds());
this.dispatch({type: 'SEARCH_PLACE_CHANGED'});
});
control.addEventListener('click', (e) => {
@@ -154,7 +155,10 @@ class Main extends React.Component {
onBackClick={this.onBackClick.bind(this)}/>);
} else {
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)}/>);
children.push(<Listings
listings={this.state.listings}
dispatch={this.dispatch.bind(this)}
onListingClick={this.onListingClick.bind(this)}/>);
}
const content = (
<div className="right-content">

9
web/lib/handlers.js
View File

@@ -16,7 +16,7 @@ const viewListingDetails= ({type, action}, component) => {
}
const listingsLoaded = ({type, action}, component) => {
const currentListings = component.state.listings;
const currentListings = new Map(); //component.state.listings;
for(const listing of action.listings) {
currentListings.set(listing.url, listing)
@@ -55,6 +55,12 @@ const viewImage = ({type, action}, component) => {
});
}
const searchPlaceChanged = ({type, action}, component) => {
component.setState({
listingDetails: false
});
}
const handlers = {
'SET_MIN_PRICE': setMinPrice,
'LISTINGS_LOADED': listingsLoaded,
@@ -62,6 +68,7 @@ const handlers = {
'PREV_IMAGE': prevImage,
'NEXT_IMAGE': nextImage,
'VIEW_IMAGE': viewImage,
'SEARCH_PLACE_CHANGED': searchPlaceChanged,
'VIEW_LISTING_DETAILS': viewListingDetails
}