Added from now title

imports/ui/components/FromNow/FromNow.js

@@ -5,6 +5,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import Chronos from '/imports/ui/components/Chronos/Chronos';
+import { translate } from 'react-i18next';
+import { dateLongFormat } from '/imports/api/Common/dates';
+
+import './FromNow.scss';
 
 class FromNow extends Component {
   constructor(props) {
@@ -27,26 +31,39 @@ class FromNow extends Component {
     return !(nextState.when === this.state.when);
   }
 
+  thatIs() {
+    return this.props.t('esDecirTalDia', { date: dateLongFormat(this.props.whenDate) });
+  }
+
   render() {
     console.log(`Render from now ${this.state.when}`);
     return (
-      <span>{this.state.when}</span>
+      <span data-toggle="tooltip" className="from-now" title={this.thatIs()}>{this.state.when}</span>
     );
   }
 }
 
 FromNow.propTypes = {
-  when: PropTypes.string
+  t: PropTypes.func.isRequired,
+  when: PropTypes.string,
+  whenDate: PropTypes.instanceOf(Date)
 };
 
 FromNow.defaultProps = {
 };
 
-const FromNowContainer = withTracker((props) => {
+/*
+ * const FromNowContainer = withTracker((props) => {
+ *
+ * })(FromNow);
+ *
+ * export default FromNowContainer;
+ * */
+
+export default translate([], { wait: true })(withTracker((props) => {
   const whenDate = props.when;
   return {
-    when: whenDate ? Chronos.moment(whenDate).fromNow() : null
+    when: whenDate ? Chronos.moment(whenDate).fromNow() : null,
+    whenDate
   };
-})(FromNow);
+})(FromNow));
-
-export default FromNowContainer;

imports/ui/components/FromNow/FromNow.scss

@@ -0,0 +1,4 @@
+.from-now {
+  border-bottom: 1px gray dashed;
+  cursor: pointer;
+}

public/locales/en/common.json

@@ -247,5 +247,6 @@
   "Nota: Las nubes pueden entorpecer la detección de fuegos activos.":
   "Note: Cloud cover might obscure active fire detections.",
   "Hay más información sobre un fuego":
-  "There is more information about a fire"
+  "There is more information about a fire",
+  "esDecirTalDia": "That is on {{date}}"
 }

public/locales/es/common.json

@@ -332,5 +332,6 @@
   "Nota: Las nubes pueden entorpecer la detección de fuegos activos.":
   "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"
+  "Hay más información sobre un fuego",
+  "esDecirTalDia": "Es decir el {{date}}"
 }