Improved SelectionMap

imports/startup/client/geolocation.js

@@ -1,12 +1,14 @@
 import { Meteor } from 'meteor/meteor';
+import { ReactiveVar } from 'meteor/reactive-var';
+
 const geolocation = new ReactiveVar();
 
-Meteor.startup(function() {
+Meteor.startup(() => {
-  Meteor.call("geo", function (error, response) {
+  Meteor.call('geo', (error, response) => {
     if (error) {
       console.warn(error);
     } else {
-        var pos = [
+      const pos = [
         response.location.latitude,
         response.location.longitude
       ];

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -30,6 +30,7 @@ class DistanceSlider extends React.Component {
     };
     this.onSliderChange = this.onSliderChange.bind(this);
     this.onAfterChange = this.onAfterChange.bind(this);
+    this.props.onChange(10);
   }
 
   onSliderChange(value) {

imports/ui/components/SelectionMap/SelectionMap.js

@@ -1,8 +1,13 @@
+/* global setTimeout */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet';
 import Leaflet from 'leaflet';
 import { translate } from 'react-i18next';
+import { withTracker } from 'meteor/react-meteor-data';
+import update from 'immutability-helper';
 import geolocation from '/imports/startup/client/geolocation';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
@@ -25,11 +30,11 @@ class SelectionMap extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      center: geolocation.get(),
+      center: props.center,
-      marker: geolocation.get(),
+      marker: props.center,
       zoom: 11,
-      draggable: true,
+      distance: props.distance,
-      modified: false
+      draggable: true
     };
 
     this.getMap = this.getMap.bind(this);
@@ -41,8 +46,21 @@ class SelectionMap extends Component {
   }
 
   componentDidMount() {
+    if (this.isValidState()) {
       this.addScale();
     }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const nextCenter = nextProps.center[0] ? nextProps.center : this.state.center;
+    const nextMarker = nextProps.center[0] ? nextProps.center : this.state.marker;
+    this.setState({
+      center: nextCenter,
+      marker: nextMarker,
+      distance: nextProps.distance || this.state.distance
+    });
+    this.fit();
+  }
 
   componentDidUpdate() {
     this.fit();
@@ -58,20 +76,19 @@ class SelectionMap extends Component {
 
   updatePosition() {
     const { lat, lng } = this.marker.leafletElement.getLatLng();
+    // console.log(`New marker lat ${lat} and lng ${lng}`);
     const currentDistance = this.state.distance;
-    this.setState({
+    this.setState(update(this.state, { $merge: { marker: [lat, lng] } }));
-      marker: [lat, lng],
-      modified: true
-    });
-    console.log(currentDistance);
     this.props.onSelection({ lat, lng, currentDistance });
     this.fit();
   }
 
   fit() {
     // console.log("fit!");
+    if (this.selectionMap && this.distanceCircle) {
       this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
     }
+  }
 
   addScale() {
     // https://www.npmjs.com/package/leaflet-graphicscale
@@ -91,23 +108,27 @@ class SelectionMap extends Component {
     );
   }
 
+  isValidState() {
+    return this.state.center && this.state.center[0] && this.state.distance;
+  }
+
   render() {
-    this.state.center = !this.state.modified && this.props.lat? [this.props.lat, this.props.lng]: this.state.center;
+    // console.log('render map called');
-    this.state.marker = !this.state.modified && this.props.lat? [this.props.lat, this.props.lng]: this.state.marker;
-    this.state.distance = !this.state.modified? this.props.distance: this.state.distance;
-    this.state.modified = false;
     return (
       <div>
-      { this.state && this.state.center &&
+        { this.isValidState() &&
-        <Map center={this.state.center} zoom={this.state.zoom}
+          <Map
+              center={this.state.center}
+              zoom={this.state.zoom}
               ref={(map) => { this.selectionMap = map; }}
               sleep={window.location.pathname === '/'}
               sleepTime={10750}
               wakeTime={750}
-             sleepNote={true}
+              sleepNote
-             hoverToWake={true}
+              hoverToWake
               wakeMessage={this.props.t('Pulsa para activar')}
-             sleepOpacity={.6}>
+              sleepOpacity={0.6}
+          >
             <TileLayer
                 attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -117,25 +138,32 @@ class SelectionMap extends Component {
                 onDragend={this.updatePosition}
                 position={this.state.marker}
                 icon={positionIcon}
-            title={this.props.t("Arrastrar para seleccionar otro punto")}
+                title={this.props.t('Arrastrar para seleccionar otro punto')}
-            ref={(ref) => { this.marker = ref; }}>
+                ref={(ref) => { this.marker = ref; }}
-        </Marker>
+            />
             <CircleMarker
-            center={this.state.marker} color="red"
+                center={this.state.marker}
+                color="red"
                 stroke={false}
                 fillOpacity="1"
-            fill={true}
+                fill
-            radius={3} />
+                radius={3}
-        <Circle center={this.state.marker}
+            />
+            <Circle
+                center={this.state.marker}
                 ref={(ref) => { this.distanceCircle = ref; }}
                 color="#145A32"
                 fillColor="green"
-                fillOpacity={.1}
+                fillOpacity={0.1}
-                radius={this.state.distance * 1000} />
+                radius={this.state.distance * 1000}
+            />
             <Control position="topright" >
               <ButtonToolbar>
-            <Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
+                <Button
-              {this.props.t("Subscribirme a fuegos en este rádio")}
+                    bsStyle="success"
+                    onClick={event => this.doSubs(event)}
+                >
+                  {this.props.t('Subscribirme a fuegos en este rádio')}
                 </Button>
               </ButtonToolbar>
             </Control>
@@ -144,16 +172,16 @@ class SelectionMap extends Component {
     );
   }
 }
-SelectionMap.defaultProps = {
-  distance: 10
-};
 
 SelectionMap.propTypes = {
   history: PropTypes.object.isRequired,
-  lat: PropTypes.number,
+  t: PropTypes.func.isRequired,
-  lng: PropTypes.number,
+  center: PropTypes.array,
   distance: PropTypes.number,
   onSelection: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(SelectionMap);
+export default translate([], { wait: true })(withTracker(props => ({
+  center: props.center[0] ? props.center : geolocation.get(),
+  distance: props.distance
+}))(SelectionMap));

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -67,8 +67,7 @@ class FireSubscription extends React.Component {
           </Row>
           <Row className="align-items-center justify-content-center">
             <SelectionMap
-                lat={this.state.lat}
+                center={[this.state.lat, this.state.lng]}
-                lng={this.state.lng}
                 distance={this.state.distance}
                 history={this.props.history}
                 onSelection={(state) => this.onSelection(state)}

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -9,10 +9,10 @@ class SubsAutocomplete extends React.Component {
     super(props);
     this.state = {
       address: '',
-    }
+    };
   }
 
-  onChange = (address) => { this.setState({ address }) }
+  onChange = (address) => { this.setState({ address }); }
 
   handleSelect = (address) => {
     const self = this;