Added babel-polyfill to work on IE and node in config.js and gmap sug…

…gestion

client/index.jsx

@@ -10,6 +10,8 @@ import Root from './ui/root'
 import configureStore from './store/config'
 import { configureRelayWithStore } from './store/relay/config'
 
+import 'babel-polyfill'
+
 const rootElement = document.getElementById('root')
 
 // Needed for onTouchTap

client/store/constants/api.js

@@ -1,4 +1,5 @@
 export const API_BASE = process.env.NODE_ENV === 'development' ? `//${location.hostname}:3333` : ''
 export const API_TIMEOUT = 10000
 export const GOOGLE_CLIENT_ID = '1020800813012-7fh1gelsf4mprqmo19utab4c3uliai1u.apps.googleusercontent.com'
-export const FACEBOOK_APP_ID = '1813622098884133'
+export const FACEBOOK_APP_ID = '1813622098884133'
+export const GOOGLE_API_KEY = 'AIzaSyAYMWfgMbdpwAzUPyxd7XhrgKCfmAq5IQY'

client/ui/backend/containers/ServicePoint/Form/edit.jsx

@@ -5,7 +5,7 @@ import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
 
 import FloatingActionButton from 'material-ui/FloatingActionButton'
 import ContentSave from 'material-ui/svg-icons/content/save'
-
+import MenuItem from 'material-ui/MenuItem'
 import {
   withGoogleMap,
   GoogleMap,
@@ -19,12 +19,16 @@ import { getServicePoint, updateServicePoint, replaceServicePoint } from 'store/
 import * as authSelectors from 'store/selectors/auth'
 import * as servicePointSelectors from 'store/selectors/service-point'
 
+import { GOOGLE_API_KEY } from 'store/constants/api'
+
 
 import { 
   renderTextField, 
   renderDropzoneImage, 
+  renderAutoComplete,
 } from 'ui/backend/shared/utils'
 
+
 const ServicePointGoogleMap = withGoogleMap(({position}) => (
   <GoogleMap    
     defaultZoom={10}
@@ -60,6 +64,13 @@ const mapStateToProps = (state) => ({
 @reduxForm({ form: 'ServicePointForm', validate, enableReinitialize:true })
 export default class ServicePointEdit extends Component {
 
+  autocompleteService = new google.maps.places.AutocompleteService()
+
+  state = {
+    dataSource: [],    
+  }
+
+
   _handleSubmit = (props) => {    
     // call update, after that return to list page
     this.props.updateServicePoint(this.props.token, this.props.params.id, props)
@@ -85,8 +96,18 @@ export default class ServicePointEdit extends Component {
       <form onSubmit={handleSubmit(this._handleSubmit)} >
 
         <h2>{submitLabel} Post</h2>
-        <Field name="name" label="Enter Name" component={renderTextField} />
-        <Field name="address" label="Enter Address" component={renderTextField} />
+        <Field name="name" label="Enter Name" component={renderTextField} />   
+
+        <Field name="address" label="Enter Address" component={renderAutoComplete} 
+          onUpdateInput={searchText => searchText && this.autocompleteService.getPlacePredictions({
+            input: searchText,            
+          }, data => this.setState({
+            dataSource: data.map(place => place.description),
+          }))}
+          dataSource={this.state.dataSource}
+          filter={searchText => true}
+        />
+
         <Field name="lat" label="Enter Latitude" component={renderTextField} />
         <Field name="lng" label="Enter Longitude" component={renderTextField} />
         {lat && lng && 

client/ui/backend/shared/utils.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import TextField from 'material-ui/TextField'
-
+import AutoComplete from 'material-ui/AutoComplete'
 import { Field } from 'redux-form'
 
 import inlineStyles from 'ui/shared/styles/MaterialUI'
@@ -15,7 +15,7 @@ import Checkbox from 'material-ui/Checkbox'
 import { RadioButtonGroup } from 'material-ui/RadioButton'
 import TARGET_TYPES from 'ui/shared/constants/targetTypes'
 
-// do not user higher order function for component or it will re-render everytime
+// do not use higher order function for component or it will re-render everytime
 export const renderTextField = ({ input, label, type, meta: { touched, error, warning } }) => (  
   <TextField    
     floatingLabelText={label}
@@ -28,6 +28,17 @@ export const renderTextField = ({ input, label, type, meta: { touched, error, wa
   />
 )
 
+export const renderAutoComplete = ({ input, label, meta: { touched, error, warning }, ...args}) => (
+  <AutoComplete    
+    floatingLabelText={label}
+    hintText={label}
+    fullWidth={true}      
+    {...input}
+    {...args}
+    errorText={touched && error ? error : ''}
+  />
+)
+
 export const renderCheckbox = ({ input, label }) => (
   <Checkbox 
     checked={input.value} 

public/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>TKFramework</title>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" name="viewport">
     <link rel="SHORTCUT ICON" href="/favicon.ico"  type="image/x-icon"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto:200,400,300,500,600,800" rel="stylesheet" type="text/css">

server/index.js

@@ -3,5 +3,4 @@ require('source-map-support').install()
 require('babel-register')({
   sourceMaps: true
 })
-require('babel-polyfill')
 require('./server')

webpack.config.js

@@ -1,5 +1,5 @@
 'use strict'
-
+require('babel-polyfill')
 const Path = require('path')
 const Webpack = require('webpack')
 
@@ -78,6 +78,7 @@ if (MODE_DEV_SERVER) {
 		filename: '[file].map'
 	}))
 	conf.entry = [
+	 	'babel-polyfill', //ie
 		'react-hot-loader/patch', // this has to be the first loaded plugin in order to work properly!
 		'webpack-dev-server/client?http://0.0.0.0:' + DEV_SERVER_PORT, // WebpackDevServer host and port
 		'webpack/hot/only-dev-server', // 'only' prevents reload on syntax errors

webpack.node.config.js

@@ -1,3 +1,4 @@
+require('babel-polyfill')
 const Path = require('path')
 const Webpack = require('webpack')
 const OPTIMIZE = true