Progress on filters

web/lib/api.js

@@ -4,6 +4,8 @@ export const loadProperties = ({
   bounds,
   minPrice = '',
   maxPrice = '',
+  minSize = '',
+  maxSize = '',
   rooms
 }) => {
   const allRooms = Object
@@ -13,7 +15,7 @@ export const loadProperties = ({
 
   // 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}`, {
+  return fetch(`http://localhost:3001/api/search?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}`, {
     //credentials: 'include'
   });
 

web/lib/handlers.js

@@ -1,125 +1,159 @@
-const setMaxPrice = ({type, action}, component) => {
+const setMaxPrice = ({ type, action }, component) => {
+  const maxPrice = parseFloat(action.maxPrice);
   component.setState({
     filters: {
       ...component.state.filters,
-      maxPrice: parseFloat(action.maxPrice),
-      dirty: true
+      maxPrice: isNaN(maxPrice) ? undefined : maxPrice,
+      priceDirty: true
     }
-  })
-}
+  });
+};
 
-const setMinPrice = ({type, action}, component) => {
+const setMinPrice = ({ type, action }, component) => {
+  const minPrice = parseFloat(action.minPrice);
   component.setState({
     filters: {
       ...component.state.filters,
-      minPrice: parseFloat(action.minPrice),
-      dirty: true
+      minPrice: isNaN(minPrice) ? undefined : minPrice,
+      priceDirty: true
     }
-  })
-}
+  });
+};
 
-const viewListingDetails= ({type, action}, component) => {
+const setMinSize = ({ type, action }, component) => {
+  const minSize = parseFloat(action.minSize);
+  component.setState({
+    filters: {
+      ...component.state.filters,
+      minSize: isNaN(minSize) ? undefined : minSize,
+      sizeDirty: true
+    }
+  });
+};
+
+const setMaxSize = ({ type, action }, component) => {
+  const maxSize = parseFloat(action.maxSize);
+  component.setState({
+    filters: {
+      ...component.state.filters,
+      maxSize: isNaN(maxSize) ? undefined : maxSize,
+      sizeDirty: true
+    }
+  });
+};
+
+const viewListingDetails = ({ type, action }, component) => {
   component.setState({
     listingDetails: true,
     listingId: action.id,
     descriptionExpanded: false,
     imageIndex: 0
-  })
-}
+  });
+};
 
-const listingsLoaded = ({type, action}, component) => {
+const listingsLoaded = ({ type, action }, component) => {
   const currentListings = new Map(); //component.state.listings;
 
-  for(const listing of action.listings) {
-    currentListings.set(listing.url, listing)
+  for (const listing of action.listings) {
+    currentListings.set(listing.url, listing);
   }
 
   component.setState({
     listings: currentListings
   });
-}
+};
 
-const expandDescription = ({type, action}, component) => {
+const expandDescription = ({ type, action }, component) => {
   component.setState({
     descriptionExpanded: true
   });
-}
+};
 
-const prevImage = ({type, action}, component) => {
+const prevImage = ({ type, action }, component) => {
   const index = component.state.imageIndex;
   if (index > 0) {
     component.setState({
       imageIndex: index - 1
     });
   }
-}
+};
 
-const nextImage = ({type, action}, component) => {
+const nextImage = ({ type, action }, component) => {
   const index = component.state.imageIndex;
   component.setState({
     imageIndex: index + 1
   });
-}
+};
 
-const viewImage = ({type, action}, component) => {
+const viewImage = ({ type, action }, component) => {
   component.setState({
     imageIndex: action.index
   });
-}
+};
 
-const searchPlaceChanged = ({type, action}, component) => {
+const searchPlaceChanged = ({ type, action }, component) => {
   component.setState({
     listingDetails: false
   });
-}
+};
 
-const setRooms = ({type, action}, component) => {
-  const prevRooms = (component.state.filters.rooms || {});
+const setRooms = ({ type, action }, component) => {
+  const prevRooms = component.state.filters.rooms || {};
+  console.log('BERORE ROOMS');
 
-  component.setState({
-    filters: {
-      ...component.state.filters,
-      rooms: {
-        ...prevRooms,
-        [action.rooms]: !prevRooms[action.rooms]
+  component.setState(
+    {
+      filters: {
+        ...component.state.filters,
+        rooms: {
+          ...prevRooms,
+          [action.rooms]: !prevRooms[action.rooms]
+        }
       }
+    },
+    () => {
+      console.log('after rooms');
+      component.refreshListings();
     }
-  }, () => {
-    component.refreshListings();
-  });
-}
+  );
+};
 
-const updateSearch = ({type, action}, component) => {
-  console.log('updating search');
-  component.setState({
-    filters: {
-      ...component.state.filters,
-      dirty: false
+const updateSearch = ({ type, action }, component) => {
+  console.log("updating search");
+  component.setState(
+    {
+      filters: {
+        ...component.state.filters,
+        sizeDirty: false,
+        priceDirty: false
+      }
+    },
+    () => {
+      component.refreshListings();
     }
-  }, () => {
-    component.refreshListings();
-  });
-}
+  );
+};
 
 const handlers = {
-  'SET_MIN_PRICE': setMinPrice,
-  'SET_MAX_PRICE': setMaxPrice,
-  'LISTINGS_LOADED': listingsLoaded,
-  'EXPAND_DESCRIPTION': expandDescription,
-  'PREV_IMAGE': prevImage,
-  'NEXT_IMAGE': nextImage,
-  'VIEW_IMAGE': viewImage,
-  'SEARCH_PLACE_CHANGED': searchPlaceChanged,
-  'SET_ROOMS': setRooms,
-  'VIEW_LISTING_DETAILS': viewListingDetails,
-  'UPDATE_SEARCH': updateSearch
-}
-
-export const handleMessage = ({type, action}, component) => {
+  SET_MIN_PRICE: setMinPrice,
+  SET_MAX_PRICE: setMaxPrice,
+  SET_MIN_SIZE: setMinSize,
+  SET_MAX_SIZE: setMaxSize,
+  LISTINGS_LOADED: listingsLoaded,
+  EXPAND_DESCRIPTION: expandDescription,
+  PREV_IMAGE: prevImage,
+  NEXT_IMAGE: nextImage,
+  VIEW_IMAGE: viewImage,
+  SEARCH_PLACE_CHANGED: searchPlaceChanged,
+  SET_ROOMS: setRooms,
+  VIEW_LISTING_DETAILS: viewListingDetails,
+  UPDATE_SEARCH: updateSearch
+};
 
+export const handleMessage = ({ type, action }, component) => {
   if (!handlers[type]) {
-    throw new `Unhandled message: ${type}`;
+    throw new `Unhandled message: ${type}`();
   }
 
-  return handlers[type]({type, action}, component);
-}
+  return handlers[type]({ type, action }, component);
+};

web/lib/helpers.js

@@ -0,0 +1,14 @@
+export const formatPrice = (p) => {
+  if (p === -1) {
+    return 'Po dogovoru'
+  }
+
+  return p.toLocaleString('bs') + ' KM';
+}
+
+export const formatFilterNumber = (num) => {
+  if (isNaN(num) || num == null) {
+    return ''
+  }
+  return num;
+}