Sorting & showing date

web/components/Listings.js

@@ -11,29 +11,17 @@ export default class Listings extends React.Component {
       const node   = e.target;
       const offset = node.scrollHeight - node.scrollTop - node.clientHeight;
 
-      //console.log('-----------------');
-      //console.log('node.scrollHeight', node.scrollHeight);
-      //console.log('node.parentNode.scrollTop', node.scrollTop);
-      //console.log('node.parentNode.clientHeight', node.clientHeight);
-
       if (this.props && this.props.loadingMore) {
-
-        console.log('still loading!');
         return;
       }
 
-      console.log('scrolling', node.scrollTop, node.scrollHeight, offset);
       if (offset < 50) {
-
-        console.log('load more');
-        //this.removeScrollListener();
         this.props.dispatch({type: 'LOAD_MORE_LISTINGS'});
       }
     }
   }
 
   onListingClick(id) {
-
     loadListing(id).then(l => l.text()).then(l => {
       console.log('listing loaded', l);
       this.props.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
@@ -41,14 +29,6 @@ export default class Listings extends React.Component {
         listing: JSON.parse(l)
       }});
     });
-
-
-    //this.props.dispatch({
-    //type: 'VIEW_LISTING_DETAILS',
-    //action: {
-    //id
-    //}
-    //});
   }
 
   onMouseEnter (id) {
@@ -60,17 +40,6 @@ export default class Listings extends React.Component {
     });
   }
 
-  componentDidUpdate (prevProps) {
-    console.log('RECEIVING PROPS: ', prevProps, 'new are', this.props);
-
-    //if (this.props.loadingMore != null) {
-      //if (!this.props.loadingMore && prevProps.loadingMore) {
-        //this.attachScrollListener();
-        //console.log('ATTACHING AGAIN', this);
-      //}
-    //}
-  }
-
   renderListings () {
     const {listings = (new Map())} = this.props;
 
@@ -110,7 +79,7 @@ export default class Listings extends React.Component {
                 {l.location}
               </div>
             </div>
-            <div className="hours-ago">Prije 2 sata</div>
+            <div className="hours-ago">Prije {l.time}</div>
           </div>
         </div>
 
@@ -138,23 +107,30 @@ export default class Listings extends React.Component {
     listings.parentNode.removeEventListener('scroll', this.handleScroll);
   }
 
-  //componentDidUpdate() {
-    //console.log('componentDidUpdate');
-    ////this.attachScrollListener();
-  //}
+  onSortChange (e) {
+    this.props.dispatch({type: 'SORT_CHANGE', action: {
+      sort: e.target.value
+    }});
+  }
 
   render () {
 
-    const {listings = (new Map()), totalCount} = this.props;
+    const {listings = (new Map()), totalCount, sort} = this.props;
 
     return (
       <div ref="listings" className="listings">
         <div className="listings-header">
           <div className="select-container">
             <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
+                value={sort}
+                onChange={this.onSortChange.bind(this)}
+                name="listings-type"
+                id="listings-type">
+                <option value="relevance">Relevantno</option>
+                <option value="newest">Najnovije</option>
+                <option value="price-min">Cijena: od najmanje</option>
+                <option value="price-max">Cijena: od najvece</option>
               </select>
             </div>
           </div>

web/components/Main.js

@@ -14,6 +14,7 @@ class Main extends React.Component {
       listings: (new Map()),
       imageIndex: 0,
       page: 0,
+      sort: 'relevance',
       filters: {
         rooms: {},
         category: {}
@@ -91,7 +92,6 @@ class Main extends React.Component {
     map.addListener('idle', () => {
       console.log('idle');
       this.dispatch({type: 'MAP_IDLE'});
-      //this.refreshListings();
     });
   }
 
@@ -289,7 +289,8 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
-      page: this.state.page
+      page: this.state.page,
+      sort: this.state.sort
     });
 
 
@@ -419,6 +420,7 @@ class Main extends React.Component {
     } else {
       children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
       children.push(<Listings
+        sort={this.state.sort}
         totalCount={this.state.totalCount}
         loadingMore={this.state.loadingMore}
         listings={this.state.listings}

web/lib/api.js

@@ -17,7 +17,8 @@ export const loadProperties = ({
   rooms    = {},
   category = {},
   page = 1,
-  pins = false
+  pins = false,
+  sort = ''
 }) => {
   const allRooms = Object
     .keys(rooms)
@@ -31,7 +32,7 @@ export const loadProperties = ({
 
   // TODO: handle errors
   //return fetch(process.env.API_URL + '/api/search', {
-    let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}&pins=${pins}`
+    let url = `http://localhost:3001/api/search/listings?bounds=${bounds}&minPrice=${minPrice}&maxPrice=${maxPrice}&rooms=${allRooms}&minSize=${minSize}&maxSize=${maxSize}&category=${allCategories}&page=${page}&pins=${pins}&sort=${sort}`
 
   return fetch(url, {
     //credentials: 'include'

web/lib/handlers.js

@@ -246,6 +246,15 @@ const mapIdle = ({type, action}, component) => {
   })
 }
 
+const sortChange = ({type, action}, component) => {
+  component.setState({
+    sort: action.sort,
+    page: 0
+  }, () => {
+    component.refreshListings();
+  });
+}
+
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
   SET_MAX_PRICE: setMaxPrice,
@@ -265,7 +274,8 @@ const handlers = {
   BACK_TO_RESULTS: backToResults,
   LOAD_MORE_LISTINGS: loadMoreListings,
   MAP_IDLE: mapIdle,
-  PINS_LOADED: pinsLoaded
+  PINS_LOADED: pinsLoaded,
+  SORT_CHANGE: sortChange
 };
 
 export const handleMessage = ({ type, action }, component) => {