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 => {

web/lib/api.js

@@ -4,18 +4,24 @@ export const loadProperties = ({
   bounds,
   minPrice = '',
   maxPrice = '',
-  minSize = '',
-  maxSize = '',
-  rooms
+  minSize  = '',
+  maxSize  = '',
+  rooms    = {},
+  category = {}
 }) => {
   const allRooms = Object
     .keys(rooms)
     .filter((v) => rooms[v])
     .join(',');
 
+  const allCategories = Object
+    .keys(category)
+    .filter((v) => category[v])
+    .join(',');
+
   // TODO: handle errors
   //return fetch(process.env.API_URL + '/api/search', {
-  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}`, {
+  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}`, {
     //credentials: 'include'
   });
 

web/lib/handlers.js

@@ -99,7 +99,6 @@ const searchPlaceChanged = ({ type, action }, component) => {
 
 const setRooms = ({ type, action }, component) => {
   const prevRooms = component.state.filters.rooms || {};
-  console.log('BERORE ROOMS');
 
   component.setState(
     {
@@ -112,14 +111,12 @@ const setRooms = ({ type, action }, component) => {
       }
     },
     () => {
-      console.log('after rooms');
       component.refreshListings();
     }
   );
 };
 
 const updateSearch = ({ type, action }, component) => {
-  console.log("updating search");
   component.setState(
     {
       filters: {
@@ -134,6 +131,26 @@ const updateSearch = ({ type, action }, component) => {
   );
 };
 
+const setCategory = ({type, action}, component) => {
+
+  const prevCategory = component.state.filters.category || {};
+
+  component.setState(
+    {
+      filters: {
+        ...component.state.filters,
+        category: {
+          ...prevCategory,
+          [action.category]: !prevCategory[action.category]
+        }
+      }
+    },
+    () => {
+      component.refreshListings();
+    }
+  );
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -147,7 +164,8 @@ const handlers = {
   SEARCH_PLACE_CHANGED: searchPlaceChanged,
   SET_ROOMS: setRooms,
   VIEW_LISTING_DETAILS: viewListingDetails,
-  UPDATE_SEARCH: updateSearch
+  UPDATE_SEARCH: updateSearch,
+  SET_CATEGORY: setCategory
 };
 
 export const handleMessage = ({ type, action }, component) => {

web/lib/helpers.js

@@ -1,5 +1,5 @@
 export const formatPrice = (p) => {
-  if (p === -1) {
+  if (isNaN(p)) {
     return 'Po dogovoru'
   }