Less clicks to show fire info

imports/ui/components/Maps/FireIconMark.js

@@ -1,12 +1,25 @@
 /* eslint-disable import/no-absolute-path */
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { CircleMarker, Marker, Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
 import { fireIcon, nFireIcon, industryIcon } from '/imports/ui/components/Maps/Icons';
 import { translate } from 'react-i18next';
 import FirePopup from './FirePopup';
 
-const FireIconMark = ({
+class FireIconMark extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    // console.log('onClick fired');
+    this.props.history.push(`/fire/${this.props.nasa ? 'active' : 'alert'}/${this.props.id}`);
+  }
+
+  render() {
+    const {
       lat,
       lon,
       nasa,
@@ -15,24 +28,27 @@ const FireIconMark = ({
       falsePositives,
       when,
       t
-}) => (
+    } = this.props;
+    return (
       <div>
         { !falsePositives &&
-      <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon}>
+          <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon} onClick={this.onClick} >
             <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
           </Marker> }
         { falsePositives &&
-      <Marker position={[lat, lon]} icon={industryIcon}>
+        <Marker position={[lat, lon]} icon={industryIcon} onClick={this.onClick}>
           <Tooltip><Fragment>{t('Es una industria')}</Fragment></Tooltip>
           { /* disabled because was a past fire (and can be marked multiple times) */ false && <FirePopup t={t} history={history} id={id} lat={lat} lon={lon} /> }
         </Marker>
           }
         { !falsePositives &&
-      <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1}>
+        <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} onClick={this.onClick}>
           <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
         </CircleMarker> }
       </div>
     );
+  }
+}
 
 FireIconMark.propTypes = {
   // https://github.com/PaulLeCam/react-leaflet/tree/master/src/propTypes

imports/ui/components/Maps/FirePopup.js

@@ -1,9 +1,8 @@
 /* eslint-disable import/no-absolute-path */
 import React, { Fragment } from 'react';
-import { Popup, Tooltip } from 'react-leaflet';
+import { Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
-import moment from 'moment';
 
 const FirePopup = ({
   lat,
@@ -15,17 +14,6 @@ const FirePopup = ({
   t
 }) => (
   <Fragment>
-    <Popup className="fire-popup">
-      <Fragment>
-        <span>{t('Coordenadas:')} {lat}, {lon}</span><br />
-        {nasa && <Fragment><span>{t('Fuente')}: {t(nasa ? 'NASA' : 'nuestros usuarios/as')}</span><br /></Fragment> }
-        {when && <Fragment><span>{t('Detectado')}: {moment(when).fromNow()}</span><br /></Fragment> }
-        <span>
-          { /* if nasa === null means that the is a false positive fire */ }
-          <a href="#" onClick={() => history.push(`/fire/${nasa ? 'active' : 'alert'}/${id}`)}>{t('Más información sobre este fuego')}</a>
-        </span>
-      </Fragment>
-    </Popup>
     <Tooltip><Fragment>{t('Pulsa para más información')}</Fragment></Tooltip>
   </Fragment>
 );