Filters done

web/components/Filters.js

@@ -1,5 +1,11 @@
 import React from "react";
 import { formatFilterNumber } from "../lib/helpers";
+import {
+  CATEGORY_FLAT,
+  CATEGORY_HOUSE,
+  CATEGORY_OFFICE,
+  CATEGORY_LAND
+} from '../../crawler/enums';
 
 export default class Filters extends React.Component {
   onCloseClick(e) {
@@ -40,6 +46,10 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
   }
 
+  onCategoryClick(category) {
+    this.props.dispatch({type: 'SET_CATEGORY', action: {category}});
+  }
+
   onRefreshClick() {
     this.updateSearch();
   }
@@ -57,6 +67,7 @@ export default class Filters extends React.Component {
   render() {
     const { filters } = this.props;
     const selectedRooms = val => filters.rooms[val] ? "selected" : "";
+    const selectedCategory = val => filters.category[val] ? "selected": "";
 
     return (
       <div className="filters">
@@ -105,18 +116,26 @@ export default class Filters extends React.Component {
             TIP
           </div>
           <div className="filter-content">
-            <div className="filter-btn property-type-btn">
+            <div
+              onClick={this.onCategoryClick.bind(this, CATEGORY_FLAT)}
+              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_FLAT)}`}>
               Stan
             </div>
-            <div className="filter-btn property-type-btn">
+            <div
+              onClick={this.onCategoryClick.bind(this, CATEGORY_HOUSE)}
+              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_HOUSE)}`}>
               Kuća
             </div>
           </div>
           <div className="filter-content">
-            <div className="filter-btn property-type-btn">
+            <div
+              onClick={this.onCategoryClick.bind(this, CATEGORY_LAND)}
+              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_LAND)}`}>
               Zemljište
             </div>
-            <div className="filter-btn property-type-btn">
+            <div
+              onClick={this.onCategoryClick.bind(this, CATEGORY_OFFICE)}
+              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_OFFICE)}`}>
               Poslovni prostor
             </div>
           </div>
@@ -155,9 +174,9 @@ export default class Filters extends React.Component {
           </div>
           <div className="filter-content">
             <div
-              onClick={this.onRoomsClick.bind(this, "Garsonjera")}
+              onClick={this.onRoomsClick.bind(this, 0)}
               className={
-                `filter-btn property-rooms-studio-btn ${selectedRooms("Garsonjera")}`
+                `filter-btn property-rooms-studio-btn ${selectedRooms(0)}`
               }
             >
               Garsonjera

web/components/Main.js

@@ -14,7 +14,8 @@ class Main extends React.Component {
       listings: (new Map()),
       imageIndex: 0,
       filters: {
-        rooms: {}
+        rooms: {},
+        category: {}
       }
     };
   }
@@ -99,7 +100,14 @@ class Main extends React.Component {
 
   refreshListings() {
     const map = this.map;
-    const {rooms, minSize, maxSize, minPrice, maxPrice} = this.state.filters;
+    const {
+      rooms,
+      minSize,
+      maxSize,
+      minPrice,
+      maxPrice,
+      category
+    } = this.state.filters;
 
     const properties = loadProperties({
       bounds: map.getBounds().toUrlValue(),
@@ -107,7 +115,8 @@ class Main extends React.Component {
       minSize,
       maxSize,
       minPrice,
-      maxPrice
+      maxPrice,
+      category
     });
 
     properties.then(p=> p.text()).then(p => {