Improved subs form

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Row, Col } from 'react-bootstrap';
+import { Row, Col } from 'react-bootstrap';
 import { Trans, translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
-
 import update from 'immutability-helper';
 import { withTracker } from 'meteor/react-meteor-data';
 import getGKeys from '/imports/startup/client/gkeys';
@@ -14,19 +13,14 @@ class FireSubscription extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      adddress: '',
       init: false
     };
-    self = this;
-    // this.handleSelect = this.handleSelect.bind(this)
-    // this.handleChange = this.handleChange.bind(this)
   }
 
   componentDidMount = () => {
-    self = this;
     getGKeys(function(err, key) {
-      self.setState(update(self.state, {$merge: {init: true}}));
-    });
+      this.setState({init: true});
+    }.bind(this));
   }
 
   onAutocompleteChange = (value) => {
@@ -40,27 +34,26 @@ class FireSubscription extends React.Component {
   render() {
     // https://developers.google.com/places/web-service/search
     // https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
-    let init = this.state.init
 
+    if (!this.state.init) {
+      return <div/>
+    } else
     return (
       <div>
-        { init &&
         <Row>
-          <Col xs={12} sm={12} md={6} lg={6} >
-            <div>
-              <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
-              <SubsAutocomplete onChange={this.onAutocompleteChange}/>
+            <Col xs={12} sm={12} md={6} lg={6} >
+              <div>
+                <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
+                <SubsAutocomplete onChange={this.onAutocompleteChange}/>
               </div>
-          </Col>
-          <Col xs={12} sm={12} md={6} lg={6} >
-            <DistanceSlider onChange={this.onSliderChange} />
-            <Button bsStyle="success" type="submit"><Trans parent="span">Subscribir</Trans></Button>
-          </Col>
-        </Row>
-        }
-        <Row className="align-items-center justify-content-center">
-          <SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
-        </Row>
+            </Col>
+            <Col xs={12} sm={12} md={6} lg={6} >
+              <DistanceSlider onChange={this.onSliderChange} />
+            </Col>
+          </Row>
+          <Row className="align-items-center justify-content-center">
+            <SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
+          </Row>
       </div>
     )
   }

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -9,9 +9,9 @@ class SubsAutocomplete extends React.Component {
     this.state = {
       adddress: '',
     }
+    this.onChange = (address) => { this.setState({ address }) }
   }
 
-  onChange = (address) => { this.setState({ address }) }
 
   handleSelect = (address) => {
     const self = this;
@@ -58,33 +58,33 @@ class SubsAutocomplete extends React.Component {
         <FormGroup>
           <ControlLabel>
             <Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
-            <PlacesAutocomplete
-                styles={myStyles}
-                classNames={{
-                  root: 'form-group',
-                  input: 'form-control',
-                  autocompleteContainer: 'autocomplete-container'}}
-                googleLogo={false}
-                highlightFirstSuggestion={true}
-                onSelect={this.handleSelect}
-                onEnterKeyDown={this.handleSelect}
-                autocompleteItem={AutocompleteItem}
-                options={{
-                  // location: new google.maps.LatLng(-34, 151),
-                  // radius: 2000,
-                  // type: ['address'],
-                  language: this.props.i18n.language
-                }}
-                inputProps={
-                  {
-                    value: this.state.address,
-                    onChange: this.onChange,
-                    placeholder: this.props.t("Escribe aquí un lugar "),
-                    onBlur:() => { console.log('Blur event!'); },
-                    onFocus:() => { console.log('Focused!'); },
-                    autoFocus:true
-                  }} />
           </ControlLabel>
+          <PlacesAutocomplete
+              styles={myStyles}
+              classNames={{
+                root: 'form-group',
+                input: 'form-control',
+                autocompleteContainer: 'autocomplete-container'}}
+              googleLogo={false}
+              highlightFirstSuggestion={true}
+              onSelect={this.handleSelect}
+              onEnterKeyDown={this.handleSelect}
+              autocompleteItem={AutocompleteItem}
+              options={{
+                // location: new google.maps.LatLng(-34, 151),
+                // radius: 2000,
+                // type: ['address'],
+                language: this.props.i18n.language
+              }}
+              inputProps={
+                {
+                  value: this.state.address,
+                  onChange: this.onChange,
+                  placeholder: this.props.t("Escribe aquí un lugar "),
+                  onBlur:() => { /* console.log('Blur event!'); */ },
+                  onFocus:() => { /* console.log('Focused!'); */ },
+                  autoFocus:true
+                }} />
           <HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
         </FormGroup>
       </form>

imports/ui/pages/Sandbox/Sandbox.js

@@ -10,24 +10,20 @@ class Sandbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      lat: 0,
-      lng: 0
+      init: false
     };
   }
 
-  onSliderChange = (value) => {
-    this.setState(update(this.state, {$merge: {distance: value}}));
+  componentDidMount = () => {
+    this.setState({init: true});
   }
 
   render() {
     return (
       <div>
         <FireSubscription />
-
       </div>
     )
   }
 }
-
-
 export default translate([], { wait: true }) (Sandbox);