From e980bbdb2477d53f6db675768790e3925ffb7178 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Tue, 20 Feb 2018 09:11:07 +0100
Subject: [PATCH] Less clicks to show fire info

---
 imports/ui/components/Maps/FireIconMark.js | 72 +++++++++++++---------
 imports/ui/components/Maps/FirePopup.js    | 14 +----
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/imports/ui/components/Maps/FireIconMark.js b/imports/ui/components/Maps/FireIconMark.js
index 5e8af68..9817666 100644
--- a/imports/ui/components/Maps/FireIconMark.js
+++ b/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 = ({
-  lat,
-  lon,
-  nasa,
-  id,
-  history,
-  falsePositives,
-  when,
-  t
-}) => (
-  <div>
-    { !falsePositives &&
-      <Marker position={[lat, lon]} icon={nasa ? fireIcon : nFireIcon}>
-        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
-      </Marker> }
-    { falsePositives &&
-      <Marker position={[lat, lon]} icon={industryIcon}>
-        <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}>
-        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
-      </CircleMarker> }
-  </div>
-);
+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,
+      id,
+      history,
+      falsePositives,
+      when,
+      t
+    } = this.props;
+    return (
+      <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
diff --git a/imports/ui/components/Maps/FirePopup.js b/imports/ui/components/Maps/FirePopup.js
index c917a6b..c2519b9 100644
--- a/imports/ui/components/Maps/FirePopup.js
+++ b/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>
 );