diff --git a/web/components/ListingDetails.js b/web/components/ListingDetails.js index 1d0250c..1c0263b 100644 --- a/web/components/ListingDetails.js +++ b/web/components/ListingDetails.js @@ -60,7 +60,7 @@ export default class ListingDetails extends React.Component {
- 4 sobe + {listing.rooms}
diff --git a/web/components/Listings.js b/web/components/Listings.js index b4fd032..3ed9358 100644 --- a/web/components/Listings.js +++ b/web/components/Listings.js @@ -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( +
+
+ +
+
+
{l.price}
+
{l.rooms ? `${l.rooms}, `: null}{l.size ? `${l.size}m2`: null}
+
+
+ {l.address} +
+
+ {l.location} +
+
+
Prije 2 sata
+
+
+ + ); + } + + return rendered; + } + render() { + const {listings = (new Map())} = this.props; + return (
@@ -15,51 +55,17 @@ export default class Listings extends React.Component {
- 322 rezultata + {listings.size} rezultata
-
-
- -
-
-
12 000 KM
-
4 sobe, 111m2
-
-
- Hakije Turajlica 2/2 -
-
- Sarajevo, Novi Grad -
-
-
Prije 2 sata
-
-
-
-
- -
-
-
12 000 KM
-
4 sobe, 111m2
-
-
- Hakije Turajlica 2/2 -
-
- Sarajevo, Novi Grad -
-
-
Prije 2 sata
-
-
+ {this.renderListings()}
) } diff --git a/web/components/Main.js b/web/components/Main.js index f1f39d7..23044e9 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -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(); - children.push(); + children.push(); } const content = (
diff --git a/web/lib/handlers.js b/web/lib/handlers.js index 7baa7cf..0cac030 100644 --- a/web/lib/handlers.js +++ b/web/lib/handlers.js @@ -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 }