Less clicks to show fire info

imports/ui/components/Maps/FireIconMark.js

@@ -1,38 +1,54 @@
 /* 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 {
-  lat,
+  constructor(props) {
-  lon,
+    super(props);
-  nasa,
+    this.t = props.t;
-  id,
+    this.onClick = this.onClick.bind(this);
-  history,
+  }
-  falsePositives,
+
-  when,
+  onClick() {
-  t
+    // console.log('onClick fired');
-}) => (
+    this.props.history.push(`/fire/${this.props.nasa ? 'active' : 'alert'}/${this.props.id}`);
-  <div>
+  }
-    { !falsePositives &&
+
-      <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon}>
+  render() {
-        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+    const {
-      </Marker> }
+      lat,
-    { falsePositives &&
+      lon,
-      <Marker position={[lat, lon]} icon={industryIcon}>
+      nasa,
-        <Tooltip><Fragment>{t('Es una industria')}</Fragment></Tooltip>
+      id,
-        { /* disabled because was a past fire (and can be marked multiple times) */ false && <FirePopup t={t} history={history} id={id} lat={lat} lon={lon} /> }
+      history,
-      </Marker>
+      falsePositives,
-    }
+      when,
-    { !falsePositives &&
+      t
-      <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1}>
+    } = this.props;
-        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
+    return (
-      </CircleMarker> }
+      <div>
-  </div>
+        { !falsePositives &&
-);
+          <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} 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} 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>
 );