displaying date on middle panel

3 files changed, 25 insertions, 2 deletions

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 0bb0b51b..6b3eb427 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,4 +1,7 @@
 var React = require('react');
+var ReactIntl = require('react-intl');
+var FormattedRelative = ReactIntl.FormattedRelative;
+
 var Row = require('react-bootstrap/Row');
 var Button = require('react-bootstrap/Button');
 var ButtonGroup = require('react-bootstrap/ButtonGroup');
@@ -9,10 +12,12 @@ var MiddlePanelActions = require('../actions/MiddlePanelActions');
 var RightPanelActions = require('../actions/RightPanelActions');
 
 var TableLine = React.createClass({
+    mixins: [ReactIntl.IntlMixin],
     propTypes: {article_id: React.PropTypes.number.isRequired,
                 feed_title: React.PropTypes.string.isRequired,
                 icon_url: React.PropTypes.string,
                 title: React.PropTypes.string.isRequired,
+                timestamp: React.PropTypes.number.isRequired,
                 date: React.PropTypes.string.isRequired,
                 read: React.PropTypes.bool.isRequired,
                 selected: React.PropTypes.bool.isRequired,
@@ -42,8 +47,13 @@ var TableLine = React.createClass({
         if(this.props.selected) {
             clsses += " active";
         }
+        // FIXME https://github.com/yahoo/react-intl/issues/189
+        // use FormattedRelative when fixed, will have to upgrade to ReactIntlv2
+        var date = (<time dateTime={this.props.date} title={this.props.date}>
+                        {this.formatRelative(this.props.timestamp)}
+                    </time>);
         return (<div className={clsses} onClick={this.loadArticle}>
-                    <h5><strong>{title}</strong></h5><div />
+                    <h5><strong>{title}</strong></h5>{date}
                     <div>{read} {liked} {this.props.title}</div>
                 </div>
         );
@@ -219,10 +229,12 @@ var MiddlePanel = React.createClass({
                                         icon_url={article.icon_url}
                                         read={article.read}
                                         liked={article.liked}
+                                        timestamp={article.timestamp}
                                         date={article.date}
                                         selected={article.selected}
                                         article_id={article.article_id}
                                         feed_id={article.feed_id}
+                                        locales={['en']}
                                         category_id={article.category_id}
                                         feed_title={article.feed_title} />);})}
                     </div>
diff --git a/src/web/static/css/one-page-app.css b/src/web/static/css/one-page-app.css
index 45e0440a..9f559ee0 100644
--- a/src/web/static/css/one-page-app.css
+++ b/src/web/static/css/one-page-app.css
@@ -116,6 +116,12 @@
   max-height: 22px;
   overflow: hidden;
 }
+#middle-panel div.list-group-item>time {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  display: block;
+}
 #right-panel>ol{
   margin-top: 10px;
 }
diff --git a/src/web/views/views.py b/src/web/views/views.py
index 1ee3d06d..49554cb3 100644
--- a/src/web/views/views.py
+++ b/src/web/views/views.py
@@ -284,13 +284,18 @@ def _get_filters(in_dict):
     return filters
 
 
+import calendar
+
+
 def _articles_to_json(articles, fd_hash=None):
     return jsonify(**{'articles': [{'title': art.title, 'liked': art.like,
             'read': art.readed, 'article_id': art.id, 'selected': False,
             'feed_id': art.feed_id, 'category_id': art.category_id or 0,
             'feed_title': fd_hash[art.feed_id]['title'] if fd_hash else None,
             'icon_url': fd_hash[art.feed_id]['icon_url'] if fd_hash else None,
-            'date': art.date} for art in articles.limit(1000)]})
+            'date': art.date,
+            'timestamp': calendar.timegm(art.date.timetuple()) * 1000}
+            for art in articles.limit(1000)]})
 
 
 @app.route('/middle_panel')