Merge pull request #1660 from pkova/master

Update sidebar most recent message timestamp every minute

pkg/interface/chat/src/js/components/lib/sidebar-item.js

@@ -1,15 +1,42 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
+import moment from 'moment';
 
 export class SidebarItem extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      timeSinceNewestMessage: this.getTimeSinceNewestMessage()
+    };
+  }
+
+  componentDidMount() {
+    this.updateTimeSinceNewestMessageInterval = setInterval( () => {
+      this.setState({timeSinceNewestMessage: this.getTimeSinceNewestMessage()});
+    }, 60000);
+  }
+
+  componentWillUnmount() {
+    if (this.updateTimeSinceNewestMessageInterval) {
+      clearInterval(this.updateTimeSinceNewestMessageInterval);
+      this.updateTimeSinceNewestMessageInterval = null;
+    }
+  }
+
+  getTimeSinceNewestMessage() {
+    return !!this.props.wen ?
+      moment.unix(this.props.wen / 1000).from(moment.utc())
+      : '';
+  }
+
   onClick() {
     const { props } = this;
     props.history.push('/~chat/' + props.cir);
   }
 
   render() {
-    const { props } = this;
+    const { props, state } = this;
 
     let unreadElem = !!props.unread ? (
       <div
@@ -29,7 +56,7 @@ export class SidebarItem extends Component {
         </div>
         <div className="w-100">
           <p className='dib gray label-small-mono mr3 lh-16'>{props.ship}</p>
-          <p className='dib gray label-small-mono lh-16'>{props.datetime}</p>
+          <p className='dib gray label-small-mono lh-16'>{state.timeSinceNewestMessage}</p>
         </div>
         <p className='label-small gray clamp-3 lh-16 pt1'>{props.description}</p>
       </div>

pkg/interface/chat/src/js/components/sidebar.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import moment from 'moment';
 import _ from 'lodash';
 
 import { SidebarItem } from '/components/lib/sidebar-item';
@@ -122,13 +121,8 @@ export class Sidebar extends Component {
           : 'No messages yet';
         let aut = !!msg ? msg.gam.aut : '';
         let wen = !!msg ? msg.gam.wen : 0;
-        let datetime =
-          !!msg ?
-            moment.unix(wen / 1000).from(moment.utc())
-          : '';
         return {
           msg,
-          datetime,
           wen,
           aut,
           content,
@@ -145,11 +139,11 @@ export class Sidebar extends Component {
 
         return (
           <SidebarItem
-            key={obj.cir}
+            key={obj.cir + '/' + obj.wen}
             title={obj.title}
             description={obj.content}
             cir={obj.cir}
-            datetime={obj.datetime}
+            wen={obj.wen}
             ship={obj.aut}
             selected={obj.selected}
             unread={unread}