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}