impact on menus when loading article

4 files changed, 56 insertions, 18 deletions

diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js
index 6a8d74bd..c60bffcf 100644
--- a/src/web/js/actions/RightPanelActions.js
+++ b/src/web/js/actions/RightPanelActions.js
@@ -3,12 +3,13 @@ var ActionTypes = require('../constants/JarrConstants');
 var jquery = require('jquery');
 
 var RightPanelActions = {
-    loadArticle: function(article_id) {
+    loadArticle: function(article_id, was_read_before) {
         jquery.getJSON('/getart/' + article_id,
             function(payload) {
                 JarrDispatcher.dispatch({
                     type: ActionTypes.LOAD_ARTICLE,
                     article: payload,
+                    was_read_before: was_read_before,
                 });
             }
         );
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 90e11859..0bb0b51b 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -15,10 +15,12 @@ var TableLine = React.createClass({
                 title: React.PropTypes.string.isRequired,
                 date: React.PropTypes.string.isRequired,
                 read: React.PropTypes.bool.isRequired,
+                selected: React.PropTypes.bool.isRequired,
                 liked: React.PropTypes.bool.isRequired,
     },
     getInitialState: function() {
-        return {read: this.props.read, liked: this.props.liked};
+        return {read: this.props.read, liked: this.props.liked,
+                selected: false};
     },
     render: function() {
         var liked = this.state.liked ? 'l' : '';
@@ -28,14 +30,19 @@ var TableLine = React.createClass({
         } else {
             icon = <Glyphicon glyph="ban-circle" />;
         }
-        var title = (<a href={'/article/redirect/' + this.props.article_id}>
+        var title = (<a href={'/article/redirect/' + this.props.article_id}
+                        onClick={this.stopPropagation}>
                         {icon} {this.props.feed_title}
                      </a>);
         var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
                                onClick={this.toogleRead} />);
         var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                 onClick={this.toogleLike} />);
-        return (<div className="list-group-item" onClick={this.loadArticle}>
+        var clsses = "list-group-item";
+        if(this.props.selected) {
+            clsses += " active";
+        }
+        return (<div className={clsses} onClick={this.loadArticle}>
                     <h5><strong>{title}</strong></h5><div />
                     <div>{read} {liked} {this.props.title}</div>
                 </div>
@@ -56,7 +63,13 @@ var TableLine = React.createClass({
         evnt.stopPropagation();
     },
     loadArticle: function() {
-        RightPanelActions.loadArticle(this.props.article_id);
+        this.setState({active: true, read: true}, function() {
+            RightPanelActions.loadArticle(
+                    this.props.article_id, this.props.read);
+        }.bind(this));
+    },
+    stopPropagation: function(evnt) {
+        evnt.stopPropagation();
     },
 });
 
@@ -207,6 +220,7 @@ var MiddlePanel = React.createClass({
                                         read={article.read}
                                         liked={article.liked}
                                         date={article.date}
+                                        selected={article.selected}
                                         article_id={article.article_id}
                                         feed_id={article.feed_id}
                                         category_id={article.category_id}
diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js
index 3a87384f..edc90a38 100644
--- a/src/web/js/stores/MenuStore.js
+++ b/src/web/js/stores/MenuStore.js
@@ -71,6 +71,13 @@ MenuStore.dispatchToken = JarrDispatcher.register(function(action) {
             });
             MenuStore.emitChange();
             break;
+        case ActionTypes.LOAD_ARTICLE:
+            if(!action.was_read_before) {
+                MenuStore._datas.categories[action.article.category_id].unread -= 1;
+                MenuStore._datas.feeds[action.article.feed_id].unread -= 1;
+                MenuStore.emitChange();
+            }
+            break;
         default:
             // do nothing
     }
diff --git a/src/web/js/stores/MiddlePanelStore.js b/src/web/js/stores/MiddlePanelStore.js
index 83b8d942..1a0a4fab 100644
--- a/src/web/js/stores/MiddlePanelStore.js
+++ b/src/web/js/stores/MiddlePanelStore.js
@@ -8,8 +8,8 @@ var assign = require('object-assign');
 var MiddlePanelStore = assign({}, EventEmitter.prototype, {
     filter_whitelist: ['filter', 'filter_id', 'filter_type', 'display_search',
                        'query', 'search_title', 'search_content'],
-    _datas: {filter: 'unread', articles: [],
-             filter_type: null, filter_id: null,
+    _datas: {articles: [], selected_article: null,
+             filter: 'unread', filter_type: null, filter_id: null,
              display_search: false, query: null,
              search_title: true, search_content: false},
     getAll: function() {
@@ -30,17 +30,26 @@ var MiddlePanelStore = assign({}, EventEmitter.prototype, {
     getArticles: function() {
         var key = null;
         var id = null;
-        var filter = this._datas.filter;
         if (this._datas.filter_type) {
             key = this._datas.filter_type;
             id = this._datas.filter_id;
         }
-        return this._datas.articles.filter(function(article) {
-            return ((!key || article[key] == id)
-                    && (filter == 'all'
-                        || (filter == 'unread' && !article.read)
-                        || (filter == 'liked' && article.liked)));
-        });
+        return this._datas.articles
+        .map(function(article) {
+            if(article.article_id == this._datas.selected_article) {
+                article.selected = true;
+            } else if(article.selected) {
+                article.selected = false;
+            }
+            return article;
+        }.bind(this))
+        .filter(function(article) {
+            return (article.selected || ((!key || article[key] == id)
+                    && (this._datas.filter == 'all'
+                        || (this._datas.filter == 'unread' && !article.read)
+                        || (this._datas.filter == 'liked' && article.liked))));
+        }.bind(this));
+
     },
     setArticles: function(articles) {
         if(articles || articles == []) {
@@ -77,17 +86,14 @@ MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) {
         case ActionTypes.RELOAD_MIDDLE_PANEL:
             changed = MiddlePanelStore.registerFilter(action);
             changed = MiddlePanelStore.setArticles(action.articles) || changed;
-            if(changed) {MiddlePanelStore.emitChange()};
             break;
         case ActionTypes.PARENT_FILTER:
             changed = MiddlePanelStore.registerFilter(action);
             changed = MiddlePanelStore.setArticles(action.articles) || changed;
-            if(changed) {MiddlePanelStore.emitChange();}
             break;
         case ActionTypes.MIDDLE_PANEL_FILTER:
             changed = MiddlePanelStore.registerFilter(action);
             changed = MiddlePanelStore.setArticles(action.articles) || changed;
-            if(changed) {MiddlePanelStore.emitChange();}
             break;
         case ActionTypes.CHANGE_ATTR:
             var attr = action.attribute;
@@ -99,7 +105,7 @@ MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) {
                             MiddlePanelStore._datas.articles[i][attr] = val;
                             // avoiding redraw if not filter, display won't change anyway
                             if(MiddlePanelStore._datas.filter != 'all') {
-                                MiddlePanelStore.emitChange();
+                                changed = true;
                             }
                         }
                         break;
@@ -107,9 +113,19 @@ MiddlePanelStore.dispatchToken = JarrDispatcher.register(function(action) {
                 }
             });
             break;
+        case ActionTypes.LOAD_ARTICLE:
+            changed = true;
+            MiddlePanelStore._datas.selected_article = action.article.id;
+            for (var i in MiddlePanelStore._datas.articles) {
+                if(MiddlePanelStore._datas.articles[i].article_id == action.article.id) {
+                    MiddlePanelStore._datas.articles[i].read = true;
+                    console.log(MiddlePanelStore._datas.articles[i]);
+                }
+            }
         default:
             // pass
     }
+    if(changed) {MiddlePanelStore.emitChange();}
 });
 
 module.exports = MiddlePanelStore;