Refactorization

imports/startup/server/geolocation.js

@@ -20,7 +20,7 @@ Meteor.methods({
     if (isPrivateIP(clientIP)) {
       clientIP = '80.58.61.250' // Some Spain IP address
     }
-    console.log(`Geolocating ${clientIP}`);
+    // console.log(`Geolocating ${clientIP}`);
 
     // https://developers.google.com/web/fundamentals/primers/promises
     var promise = new Promise(function(resolve, reject) {

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, 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';
+import SubsAutocomplete from './SubsAutocomplete';
+
+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}}));
+    });
+  }
+
+  onAutocompleteChange = (value) => {
+    this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
+  }
+
+  onSliderChange = (value) => {
+    this.setState(update(this.state, {$merge: {distance: value}}));
+  }
+
+  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
+
+    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}/>
+              </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>
+      </div>
+    )
+  }
+}
+
+export default translate([], { wait: true }) (FireSubscription);

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Trans, translate } from 'react-i18next';
+import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
+import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
+
+class SubsAutocomplete extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      adddress: '',
+    }
+  }
+
+  onChange = (address) => { this.setState({ address }) }
+
+  handleSelect = (address) => {
+    const self = this;
+    geocodeByAddress(address)
+      .then((results) => getLatLng(results[0]))
+      .then(({ lat, lng }) => {
+        // console.log('Success Yay', { lat, lng })
+        // const newState = update(this.state, {$merge: {lat: lat, lng: lng}});
+        // console.log(newState);
+        // this.setState(newState);
+        self.props.onChange({lat: lat, lng: lng});
+        // console.log(this.state);
+      })
+      .catch(error => {
+        console.log(error);
+        if (error === 'ZERO_RESULTS') {
+          console.log("No results");
+        }
+      });
+  }
+
+  render() {
+    // https://www.npmjs.com/package/react-places-autocomplete
+    // https://github.com/kenny-hibino/react-places-autocomplete/issues/103
+    const myStyles = {
+      autocompleteContainer: {
+        paddingBottom: '20px',
+        backgroundSize: 'auto 12px',
+        backgroundPosition: 'bottom left 10px',
+        backgroundRepeat: 'no-repeat',
+        backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
+      },
+    }
+
+    const AutocompleteItem = ({ formattedSuggestion }) => (
+      <div className="suggestion-item">
+        <i className='fa fa-map-marker suggestion-icon'/>{' '}
+        <strong>{formattedSuggestion.mainText}</strong>{' '}
+        <small className="text-muted">{formattedSuggestion.secondaryText}</small>
+      </div>)
+
+    return (
+      <form onSubmit={this.handleSelectEnd}>
+        <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>
+          <HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
+        </FormGroup>
+      </form>
+    )
+  }
+}
+
+
+export default translate([], { wait: true }) (SubsAutocomplete);

imports/ui/pages/Sandbox/Sandbox.js

@@ -1,43 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, Button, Row, Col, HelpBlock } 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 getGKeys from '/imports/startup/client/gkeys';
-import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
 import update from 'immutability-helper';
-import { withTracker } from 'meteor/react-meteor-data';
+import getGKeys from '/imports/startup/client/gkeys';
+import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
 
 class Sandbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      adddress: ''
+      lat: 0,
+      lng: 0
     };
-    self = this;
-    // this.handleSelect = this.handleSelect.bind(this)
-    // this.handleChange = this.handleChange.bind(this)
-  }
-
-  onChange = (address) => { this.setState({ address }) }
-
-  handleSelect = (address) => {
-    geocodeByAddress(address)
-      .then((results) => getLatLng(results[0]))
-      .then(({ lat, lng }) => {
-        // console.log('Success Yay', { lat, lng })
-        const newState = update(this.state, {$merge: {lat: lat, lng: lng}});
-        // console.log(newState);
-        this.setState(newState);
-        // console.log(this.state);
-      })
-      .catch(error => {
-        console.log(error);
-        if (error === 'ZERO_RESULTS') {
-          console.log("No results");
-        }
-      });
   }
 
   onSliderChange = (value) => {
@@ -45,101 +20,14 @@ class Sandbox extends React.Component {
   }
 
   render() {
-    // https://www.npmjs.com/package/react-places-autocomplete
-
-    // https://github.com/kenny-hibino/react-places-autocomplete/issues/103
-    const myStyles = {
-      autocompleteContainer: {
-        paddingBottom: '20px',
-        backgroundSize: 'auto 12px',
-        backgroundPosition: 'bottom left 10px',
-        backgroundRepeat: 'no-repeat',
-        backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
-      },
-    }
-
-    const AutocompleteItem = ({ formattedSuggestion }) => (
-      <div className="suggestion-item">
-        <i className='fa fa-map-marker suggestion-icon'/>{' '}
-        <strong>{formattedSuggestion.mainText}</strong>{' '}
-        <small className="text-muted">{formattedSuggestion.secondaryText}</small>
-      </div>)
-
-    // https://developers.google.com/places/web-service/search
-    // https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
     return (
       <div>
-        <Row>
+        <FireSubscription />
-          <Col xs={12} sm={12} md={6} lg={6} >
+
-            { typeof this.props.gkey === 'string' &&
-              <div>
-                <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
-                <form onSubmit={this.handleSelectEnd}>
-                  <FormGroup>
-                    <ControlLabel>
-                      <Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
-                    </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>
-              </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>
       </div>
     )
   }
 }
 
-Sandbox.propTypes = {
-  gkey: PropTypes.string
-}
 
-const gkey = new ReactiveVar();
+export default translate([], { wait: true }) (Sandbox);
-
-getGKeys(function(err, key) {
-    if (err) {
-      console.log(err);
-    } else {
-      gkey.set(key);
-    }
-});
-
-export default translate([], { wait: true }) (withTracker(() => {
-  return {
-    gkey: gkey.get()
-  };
-})(Sandbox));