From a62e18d071faffb4bbd26b7822364d110511f9e4 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Tue, 23 Jan 2018 09:47:44 +0100
Subject: [PATCH] Fire when reactive

---
 .meteor/packages                |  1 +
 .meteor/versions                |  2 ++
 imports/ui/pages/Fires/Fires.js | 28 +++++++++++++++++++++++-----
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/.meteor/packages b/.meteor/packages
index ee82606..10ae5fc 100644
--- a/.meteor/packages
+++ b/.meteor/packages
@@ -60,3 +60,4 @@ mongo-livedata
 reywood:publish-composite
 barbatus:stars-rating
 arkham:comments-ui
+remcoder:chronos
diff --git a/.meteor/versions b/.meteor/versions
index 8a03c20..adc9c37 100644
--- a/.meteor/versions
+++ b/.meteor/versions
@@ -111,6 +111,7 @@ react-meteor-data@0.2.15
 reactive-dict@1.2.0
 reactive-var@1.0.11
 reload@1.1.11
+remcoder:chronos@0.5.0
 retry@1.0.9
 reywood:publish-composite@1.5.2
 routepolicy@1.0.12
@@ -137,3 +138,4 @@ url@1.1.0
 vjrj:piwik@0.3.1
 webapp@1.4.0
 webapp-hashing@1.0.9
+zodiase:function-bind@0.0.1
diff --git a/imports/ui/pages/Fires/Fires.js b/imports/ui/pages/Fires/Fires.js
index 5fb261d..1df8d59 100644
--- a/imports/ui/pages/Fires/Fires.js
+++ b/imports/ui/pages/Fires/Fires.js
@@ -12,7 +12,7 @@ import Blaze from 'meteor/gadicc:blaze-react-component';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
 import NotFound from '/imports/ui/pages/NotFound/NotFound';
 import FiresCollection from '/imports/api/Fires/Fires';
-import { dateLongFormat, dateFromNow } from '/imports/api/Common/dates';
+import { dateLongFormat } from '/imports/api/Common/dates';
 import '/imports/startup/client/comments';
 import './Fires.scss';
 
@@ -20,15 +20,29 @@ class Fire extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      when: props.when
     };
-    // console.log(moment.tz.guess());
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.when !== nextProps.when) {
+      // console.log(`Next when ${nextProps.when}`);
+      this.setState({
+        when: nextProps.when
+      });
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !(nextState.when === this.state.when);
   }
 
   render() {
     const { loading, fire, t } = this.props;
+    console.log(`Render ${this.state.when}`);
     if (fire && fire.when) {
       this.dateLongFormat = dateLongFormat(fire.when);
-      this.dateFromNow = dateFromNow(fire.when);
+      this.dateFromNow = this.state.when;
     }
     return (fire ?
       (<div className="ViewFire">
@@ -87,13 +101,14 @@ class Fire extends React.Component {
          </Fragment>
         }
        </div>
-      ) : <NotFound />);
+      ) : <div>{!loading && <NotFound />} </div>);
   }
 }
 
 Fire.propTypes = {
   t: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
+  when: PropTypes.string,
   fire: PropTypes.object // .isRequired
 };
 
@@ -105,10 +120,13 @@ Fire.defaultProps = {
 const FireContainer = withTracker(({ match }) => {
   const fireEncrypt = match.params.id;
   const subscription = Meteor.subscribe('fireFromHash', fireEncrypt);
+
+  // });
   // console.log(`Subs ready: ${subscription.ready()}, fire: ${JSON.stringify(FiresCollection.findOne())}`);
   return {
     loading: !subscription.ready(),
-    fire: FiresCollection.findOne()
+    fire: FiresCollection.findOne(),
+    when: subscription.ready() ? Chronos.moment(FiresCollection.findOne().when).fromNow() : null
   };
 })(Fire);