Filters view on mobile

web/src/components/Filters.js

@@ -68,8 +68,14 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'SET_CATEGORY', action: {category}})
   }
 
-  onRefreshClick () {
+  onRefreshClick (closeFilters) {
     this.updateSearch()
+
+    if (closeFilters) {
+      this.props.dispatch({
+        type: 'CLOSE_FILTERS'
+      })
+    }
   }
 
   onKeyPress (e) {
@@ -95,6 +101,25 @@ export default class Filters extends React.Component {
     this.props.dispatch({type: 'UPDATE_SEARCH'})
   }
 
+  onResetSearch (e) {
+    this.props.dispatch({
+      type: 'UPDATE_ROUTE',
+      action: {
+        params: {
+          minPrice: '',
+          maxPrice: '',
+          minSize: '',
+          maxSize: '',
+          rooms: '',
+          category: ''
+        }
+      }
+    })
+    this.props.dispatch({
+      type: 'RESET_FILTERS'
+    })
+  }
+
   render () {
     const {filters} = this.props
     const selectedRooms = val => filters.rooms[val] ? 'selected' : ''
@@ -249,7 +274,11 @@ export default class Filters extends React.Component {
           </div>
         </div>
         <div className="clear-both" />
-        <div className="filter-bottom" />
+        <div className="filter-bottom">
+          <div onClick={this.onResetSearch.bind(this)} className="filter-btn">Poništi</div>
+          <div onClick={this.onRefreshClick.bind(this, true)} className="filter-btn">Potvrdi</div>
+        
+        </div>
       </div>
     )
   }

web/src/components/Listings.js

@@ -157,6 +157,14 @@ export default class Listings extends React.Component {
     })
   }
 
+  onFiltersClick (e) {
+    e.preventDefault()
+
+    this.props.dispatch({
+      type: 'OPEN_FILTERS'
+    })
+  }
+
   render () {
     const {listings = new Map(), totalCount, sort} = this.props
 
@@ -181,6 +189,12 @@ export default class Listings extends React.Component {
           <div className="listings-count">
             {totalCount} rezultata
           </div>
+
+          <div
+            onClick={this.onFiltersClick.bind(this)}
+            className="listings-filter">
+            Filteri
+          </div>
         </div>
 
         <div className="listings-items">

web/src/components/Main.js

@@ -166,8 +166,12 @@ class Main extends React.Component {
     })
 
     control.addEventListener('click', e => {
-      this.setState({
-        mapClicked: true
+      //this.setState({
+        //mapClicked: true
+      //})
+
+      this.dispatch({
+        type: 'OPEN_FILTERS'
       })
     })
 
@@ -183,18 +187,22 @@ class Main extends React.Component {
   }
 
   onCloseClick (e) {
-    if (this.state.mapClicked) {
-      setTimeout(
-        () => {
-          google.maps.event.trigger(this.map, 'resize')
-        },
-        100
-      )
+    if (this.state.filtersOpen) {
+      console.log('FILTERS WERE OPEN')
+      //setTimeout(
+        //() => {
+          //google.maps.event.trigger(this.map, 'resize')
+        //},
+        //100
+      //)
     }
 
-    this.setState({
-      mapClicked: false
+    this.dispatch({
+      type: 'CLOSE_FILTERS'
     })
+    //this.setState({
+      //mapClicked: false
+    //})
   }
 
   findMarker (id) {
@@ -578,12 +586,13 @@ class Main extends React.Component {
     let leftClass = 'left-base'
     let rightClass = 'right-base'
 
-    if (this.state.listingId || this.state.mapClicked) {
+    if (this.state.listingId || this.state.filtersOpen) {
       leftClass = this.addAbsoluteLeftInRender ? 'left-absolute' : ''
       rightClass = 'right-shown'
     }
 
     const {contactFormOpen} = this.state
+    const isMapView = this.state.mobileView === 'MAP'
 
     return (
       <div id="container">
@@ -601,10 +610,10 @@ class Main extends React.Component {
             type="text"
           />
           <div className="view-types">
-            <a onClick={this.onMobileListViewClick.bind(this)}className="view-type-left">
+            <a onClick={this.onMobileListViewClick.bind(this)} className={!isMapView ? "view-type-left selected": "view-type-left"}>
               <i className="btn-select-map fa fa-list" />
             </a>
-            <a onClick={this.onMobileMapViewClick.bind(this)} className="view-type-right">
+            <a onClick={this.onMobileMapViewClick.bind(this)} className={isMapView ? "view-type-right selected": "view-type-right"}>
               <i className="view-type-map-icon fa fa-map-marker" />
             </a>
           </div>
@@ -616,7 +625,7 @@ class Main extends React.Component {
 
         <div id="left" style={leftStyle} className={leftClass}>
           {this.state.mobileView === 'LIST' && !this.state.listingDetails  &&  
-          <div className="map-list-view">
+          <div className={ this.state.filtersOpen ? "map-list-view hide": "map-list-view" }>
         <Listings
           sort={this.state.sort}
           totalCount={this.state.totalCount}