welcome popeup + mobile friendly

web/src/components/Main.js

@@ -22,7 +22,8 @@ class Main extends React.Component {
       filters: {
         rooms: {},
         category: {},
-        status : {}
+        status : {},
+        adType: 0
       },
       mobileView: 'MAP',
       contact: {
@@ -34,6 +35,8 @@ class Main extends React.Component {
       }
     }
 
+    console.log("Props : ");
+    console.log(props.initialState);
     if (props.initialState) {
       props.initialState.sort = props.initialState.sort || state.sort
       state.filters.rooms = props.initialState.rooms
@@ -49,6 +52,7 @@ class Main extends React.Component {
       state.filters.maxSize = props.initialState.maxSize
       state.filters.minPrice = props.initialState.minPrice
       state.filters.maxPrice = props.initialState.maxPrice
+      state.filters.adType = props.initialState.adType
     }
 
     this.state = state
@@ -234,7 +238,8 @@ class Main extends React.Component {
       maxSize,
       minPrice,
       maxPrice,
-      category
+      category,
+      adType
     } = this.state.filters
 
     const bounds = map.getBounds()
@@ -246,6 +251,7 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
+      adType,
       page: this.state.page,
       pins: true
     })
@@ -404,7 +410,8 @@ class Main extends React.Component {
       maxSize,
       minPrice,
       maxPrice,
-      category
+      category,
+      adType
     } = this.state.filters
 
     const bounds = map.getBounds()
@@ -416,6 +423,7 @@ class Main extends React.Component {
       minPrice,
       maxPrice,
       category,
+      adType,
       page: this.state.page,
       sort: this.state.sort
     })

web/src/components/Welcome.js

@@ -1,59 +1,43 @@
 import React from 'react'
-import { pacSelectFirst } from '../helpers/googleMaps'
+import {AD_TYPE_SALE, AD_TYPE_RENT} from '../../../common/enums';
 
 export default class Welcome extends React.Component {
+
   constructor (props) {
     super(props)
 
     this.state = {
-      type: 'SALE'
+      type: AD_TYPE_SALE,
+      buyButtonImg: 'static/images/sale_1_mobile.png',
+      rentButtonImg: 'static/images/rent_0_mobile.png'
     }
   }
 
-  componentDidMount () {
-    const options = {
-      componentRestrictions: { country: 'BA' },
-      types: ['geocode']
-    }
-
-    const input = document.getElementById('gmaps-places-input-welcome')
-    const searchBox = new google.maps.places.Autocomplete(input, options)
-
-    pacSelectFirst(input)
-    input.addEventListener('focus', e => {
-      e.target.value = ''
-    })
-    searchBox.addListener('place_changed', () => {
-      const place = searchBox.getPlace()
-      if (place.geometry.viewport) {
-        const bounds = place.geometry.viewport.toUrlValue()
-        this.props.onSearch({
-          bounds,
-          type: this.state.type
-        })
-      } else {
-        const location = place.geometry.location
-        this.props.onSearch({
-          location,
-          type: this.state.type
-        })
-      }
-    })
-  }
-
   onSaleClick () {
     this.setState({
-      type: 'SALE'
+      type: AD_TYPE_SALE,
+      buyButtonImg: 'static/images/sale_1_mobile.png',
+      rentButtonImg: 'static/images/rent_0_mobile.png'
     })
   }
 
   onRentClick () {
     this.setState({
-      type: 'RENT'
+      type: AD_TYPE_RENT,
+      buyButtonImg: 'static/images/sale_0_mobile.png',
+      rentButtonImg: 'static/images/rent_1_mobile.png'
     })
   }
 
+  onSearchClick () {
+
+  }
+
   render () {
+    let style1 = {
+      background:'url(' + this.state.buyButtonImg + ')',
+      backgrounSize: 'cover'
+    }
     return (
       <div>
       <div className='welcome-container-bg'>
@@ -63,15 +47,11 @@ export default class Welcome extends React.Component {
         <div className='welcome-content'>
         <h1>KIVI</h1>
         <h2>Pronađi svoj novi dom!</h2>
-          <button
-            onClick={this.onSaleClick.bind(this)}>Kupovina</button>
-          <button onClick={this.onRentClick.bind(this)}>Iznajmljivanje</button>
-          <input
-            type='text'
-            placeholder='Unesite adresu, naselje ili grad'
-            className='where-to'
-            id='gmaps-places-input-welcome'
-          />
+        <div>
+          <button className='buy-button' style={{background:"url("+this.state.buyButtonImg+") no-repeat"}} onClick={this.onSaleClick.bind(this)}></button>
+          <button className='rent-button' style={{background:"url("+this.state.rentButtonImg+") no-repeat"}} onClick={this.onRentClick.bind(this)}></button>
+        </div>
+        <button className='search-button' onClick={()=>this.props.onSearch({adType: this.state.type})} >TRAŽI</button>
         </div>
 
       </div>