From bea2703f2f1f8becc0c820766ea1bab2f3ebca08 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Mon, 21 May 2018 15:43:43 +0200
Subject: [PATCH] Better stats in FiresMap

---
 imports/ui/pages/FiresMap/FireStats.js | 44 ++++++++++++++++++++++----
 imports/ui/pages/FiresMap/FiresMap.js  |  4 +--
 public/locales/en/common.json          |  4 ++-
 public/locales/es/common.json          |  5 ++-
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/imports/ui/pages/FiresMap/FireStats.js b/imports/ui/pages/FiresMap/FireStats.js
index 3a9887e..f88245c 100644
--- a/imports/ui/pages/FiresMap/FireStats.js
+++ b/imports/ui/pages/FiresMap/FireStats.js
@@ -8,19 +8,49 @@ import { translate, Trans } from 'react-i18next';
 import FromNow from '/imports/ui/components/FromNow/FromNow';
 
 class FireStats extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      lastFireDetected: props.lastFireDetected,
+      lastCheck: props.lastCheck,
+      loadingAll: props.loadingAll
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.lastCheck !== nextProps.lastCheck ||
+        this.props.lastFireDetected !== nextProps.lastFireDetected ||
+        this.props.loadingAll !== nextProps.loadingAll
+    ) {
+      this.setState({
+        lastFireDetected: nextProps.lastFireDetected,
+        lastCheck: nextProps.lastCheck,
+        loadingAll: nextProps.loadingAll
+      });
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !(nextState.lastCheck === this.state.lastCheck &&
+             nextState.lastFireDetected === this.state.lastFireDetected &&
+             nextState.loadingAll === this.state.loadingAll);
+  }
+
   render() {
-    return (
-      <Fragment>
-        { this.props.lastCheck && this.props.lastFireDetected ?
-          <Trans>Actualizado <FromNow when={this.props.lastCheck} />, último fuego detectado <FromNow when={this.props.lastFireDetected.when} />.</Trans>
-          : '' }
-      </Fragment>
-    );
+    if (this.state.loadingAll) return (<Fragment><br /><em><Trans>Actualizando...</Trans></em></Fragment>);
+    if (this.state.lastCheck && !this.state.lastFireDetected) {
+      return (<Fragment><br /><Trans>Actualizado <FromNow when={this.state.lastCheck} />.</Trans></Fragment>);
+    }
+    if (this.state.lastCheck && this.state.lastFireDetected) {
+      return (<Fragment><br /><Trans>Actualizado <FromNow when={this.state.lastCheck} />, último fuego detectado <FromNow when={this.state.lastFireDetected.when} />.</Trans></Fragment>);
+    }
+    return (<Fragment />);
   }
 }
 
 FireStats.propTypes = {
   lastFireDetected: PropTypes.object,
+  loadingAll: PropTypes.bool.isRequired,
   lastCheck: PropTypes.instanceOf(Date)
 };
 
diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js
index 9013572..265b0cc 100644
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@@ -245,8 +245,8 @@ class FiresMap extends React.Component {
             <Col xs={12} sm={6} md={6} lg={6} >
               <p className="firesmap-legend">
                 { (this.props.activefires.length + this.props.firealerts.length) === 0 ?
-                  <Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <FireStats {... this.props} /></Fragment> :
-                  <Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <FireStats {... this.props} /></Fragment>
+                  <Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <FireStats loadingAll={loading} {... this.props} /></Fragment> :
+                  <Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos. <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos en el mundo.</Trans> <FireStats loadingAll={loading} {... this.props} /></Fragment>
                 }
               </p>
               {isNotHomeAndMobile() && this.props.firealerts.length > 0 &&
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index e5189fc..bc6ae5a 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -167,6 +167,7 @@
   "Verifica tu dirección de correo": "Verify Your Email Address",
   "Zonas vigiladas": "Monitored areas",
   "En verde, las zonas vigiladas por nuestros usuari@s actualmente": "In green, the areas monitored by our users currently",
+  "Actualizado <1></1>.": "Updated <1></1>.",
   "Actualizado <1></1>, último fuego detectado <3></3>.": "Updated <1></1>, last fire detected <3></3>.",
   "Información adicional sobre fuego": "Additional information about fire",
   "CO2emisions": "Did you know that wildfires <1>produce as much CO² as cars</1> and <3>about ⅕ of all our carbon emissions</3>?",
@@ -248,5 +249,6 @@
   "Note: Cloud cover might obscure active fire detections.",
   "Hay más información sobre un fuego":
   "There is more information about a fire",
-  "esDecirTalDia": "That is on {{date}}"
+  "esDecirTalDia": "That is on {{date}}",
+  "Actualizando...": "Updating..."
 }
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 35a1da4..a460481 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -237,6 +237,7 @@
   "Verifica tu dirección de correo",
   "Zonas vigiladas": "Zonas vigiladas",
   "En verde, las zonas vigiladas por nuestros usuari@s actualmente": "En verde, las zonas vigiladas por nuestros usuari@s actualmente",
+  "Actualizado <1></1>.": "Actualizado <1></1>.",
   "Actualizado <1></1>, último fuego detectado <3></3>.": "Actualizado <1></1>, último fuego detectado <3></3>.",
   "Tomamos nota, ¡gracias por colaborar!":
   "Tomamos nota, ¡gracias por colaborar!",
@@ -333,5 +334,7 @@
   "Nota: Las nubes pueden entorpecer la detección de fuegos activos.",
   "Hay más información sobre un fuego":
   "Hay más información sobre un fuego",
-  "esDecirTalDia": "Es decir el {{date}}"
+  "esDecirTalDia": "Es decir el {{date}}",
+  "Actualizando...":
+  "Actualizando..."
 }