draft displaying article

5 files changed, 74 insertions, 33 deletions

diff --git a/src/web/js/actions/RightPanelActions.js b/src/web/js/actions/RightPanelActions.js
index 7a7b935a..6831f9b8 100644
--- a/src/web/js/actions/RightPanelActions.js
+++ b/src/web/js/actions/RightPanelActions.js
@@ -5,15 +5,16 @@ var RightPanelStore = require('../stores/RightPanelStore');
 
 
 var RightPanelActions = {
-    load: function(obj_type, obj_id) {
-        filters = MiddlePanelStore.getRequestFilter();
-        jquery.getJSON('api/v2.0/' + obj_type + '/' + obj_id, function(payload) {
-            _last_fetched_with = filters;
-            JarrDispatcher.dispatch({
-                type: ActionTypes.LOAD_RIGHT_PANEL,
-                articles: payload.articles,
-            });
-        });
+    loadArticle: function(article_id) {
+        jquery.getJSON('/getart/' + article_id,
+            function(payload) {
+                JarrDispatcher.dispatch({
+                    type: ActionTypes.LOAD_ARTICLE,
+                    article: payload,
+                });
+            }
+        );
+
     },
 };
 
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index a46d7346..199316e6 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -6,6 +6,7 @@ var Glyphicon = require('react-bootstrap/Glyphicon');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
+var RightPanelActions = require('../actions/RightPanelActions');
 
 var TableLine = React.createClass({
     propTypes: {article_id: React.PropTypes.number.isRequired,
@@ -34,23 +35,28 @@ var TableLine = React.createClass({
                                onClick={this.toogleRead} />);
         var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                 onClick={this.toogleLike} />);
-        return (<div className="list-group-item">
+        return (<div className="list-group-item" onClick={this.loadArticle}>
                     <h5><strong>{title}</strong></h5><div />
                     <div>{read} {liked} {this.props.title}</div>
                 </div>
         );
     },
-    toogleRead: function() {
+    toogleRead: function(evnt) {
         this.setState({read: !this.state.read}, function() {
             MiddlePanelActions.changeRead(this.props.category_id,
                     this.props.feed_id, this.props.article_id, this.state.read);
         }.bind(this));
+        evnt.stopPropagation();
     },
-    toogleLike: function() {
+    toogleLike: function(evnt) {
         this.setState({liked: !this.state.liked}, function() {
             MiddlePanelActions.changeLike(this.props.category_id,
                     this.props.feed_id, this.props.article_id, this.state.liked);
         }.bind(this));
+        evnt.stopPropagation();
+    },
+    loadArticle: function() {
+        RightPanelActions.loadArticle(this.props.article_id);
     },
 });
 
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 00e2dd54..328bc6b1 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -7,7 +7,17 @@ var RightPanelActions = require('../actions/RightPanelActions');
 var Article = React.createClass({
     propTypes: {article: React.PropTypes.object.isRequired},
     render: function() {
-        return (<div />);
+        var icon = null;
+        if(this.props.article.icon_url){
+            icon = (<img width="16px" src={this.props.article.icon_url} />);
+        }
+        var header = (<h4>
+                        {icon}<strong>Title:</strong> {this.props.article.title}
+                      </h4>);
+        return (<Panel header={header}>
+                    <div dangerouslySetInnerHTML={{__html: this.props.article.content}} />
+                </Panel>
+        );
     },
 });
 
@@ -61,7 +71,7 @@ var Category = React.createClass({
 
 var RightPanel = React.createClass({
     getInitialState: function() {
-        return {category: null, feed: null, article: null};
+        return {category: null, feed: null, article: null, current: null};
     },
     getCategoryCrum: function() {
         return (<li><a onClick={this.selectCategory} href="#">
@@ -74,28 +84,39 @@ var RightPanel = React.createClass({
                 </a></li>);
     },
     getArticleCrum: function() {
-        return <li>Article</li>;
+        return <li>{this.state.article.title}</li>;
     },
     render: function() {
         var content = null;
+        var brd_category = null;
+        var brd_feed = null;
+        var brd_article = null;
         var breadcrum = null;
+        if(this.state.category) {
+            brd_category = (<li><a onClick={this.selectCategory} href="#">
+                                {this.state.category.name}
+                            </a></li>);
+        }
+        if(this.state.feed) {
+            brd_feed = (<li><a onClick={this.selectFeed} href="#">
+                            {this.state.feed.title}
+                        </a></li>);
+        }
         if(this.state.article) {
-            var breadcrum = (<ol className="breadcrumb">
-                                {this.getCategoryCrum()}
-                                {this.getFeedCrum()}
-                                {this.getArticleCrum()}
-                             </ol>);
-            var content = <Article />;
-        } else if(this.state.feed) {
-            var breadcrum = (<ol className="breadcrumb">
-                                {this.getCategoryCrum()}
-                                {this.getFeedCrum()}
-                             </ol>);
+            brd_article = <li>{this.state.article.title}</li>;
+        }
+        if(brd_category || brd_feed || brd_article) {
+            breadcrum = (<ol className="breadcrumb">
+                            {brd_category}
+                            {brd_feed}
+                            {brd_article}
+                         </ol>);
+        }
+        if(this.state.current == 'article') {
+            var content = <Article article={this.state.article} />;
+        } else if(this.state.current == 'feed') {
             var content = <Feed feed={this.state.feed} />;
-        } else if(this.state.category) {
-            var breadcrum = (<ol className="breadcrumb">
-                                {this.getCategoryCrum()}
-                             </ol>);
+        } else if(this.state.current == 'category') {
             var content = <Category category={this.state.category} />;
         }
 
@@ -108,10 +129,13 @@ var RightPanel = React.createClass({
         );
     },
     selectCategory: function() {
-        this.setState({feed: null, article: null});
+        this.setState({current: 'category'});
     },
     selectFeed: function() {
-        this.setState({article: null});
+        this.setState({current: 'feed'});
+    },
+    selectArticle: function() {
+        this.setState({current: 'article'});
     },
     componentDidMount: function() {
         RightPanelStore.addChangeListener(this._onChange);
diff --git a/src/web/js/constants/JarrConstants.js b/src/web/js/constants/JarrConstants.js
index ca5eacc7..4a673cf8 100644
--- a/src/web/js/constants/JarrConstants.js
+++ b/src/web/js/constants/JarrConstants.js
@@ -18,5 +18,5 @@ module.exports = keyMirror({
         CHANGE_ATTR: null,
         RELOAD_MIDDLE_PANEL: null,
         MIDDLE_PANEL_FILTER: null,
-        LOAD_RIGHT_PANEL: null,
+        LOAD_ARTICLE: null,
 });
diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js
index f08be009..68d3b7e9 100644
--- a/src/web/js/stores/RightPanelStore.js
+++ b/src/web/js/stores/RightPanelStore.js
@@ -26,19 +26,29 @@ var RightPanelStore = assign({}, EventEmitter.prototype, {
 RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) {
     switch(action.type) {
         case ActionTypes.PARENT_FILTER:
+            RightPanelStore._datas.article = null;
             if(action.filter_id == null) {
                 RightPanelStore._datas.category = null;
                 RightPanelStore._datas.feed = null;
             } else if(action.filter_type == 'category_id') {
                 RightPanelStore._datas.category = MenuStore._datas.categories[action.filter_id];
                 RightPanelStore._datas.feed = null;
+                RightPanelStore._datas.current = 'category';
             } else {
 
                 RightPanelStore._datas.feed = MenuStore._datas.feeds[action.filter_id];
                 RightPanelStore._datas.category = MenuStore._datas.categories[RightPanelStore._datas.feed.category_id];
+                RightPanelStore._datas.current = 'feed';
             }
             RightPanelStore.emitChange();
             break;
+        case ActionTypes.LOAD_ARTICLE:
+            RightPanelStore._datas.feed = MenuStore._datas.feeds[action.article.feed_id];
+            RightPanelStore._datas.category = MenuStore._datas.categories[action.article.category_id];
+            RightPanelStore._datas.article = action.article;
+            RightPanelStore._datas.current = 'article';
+            RightPanelStore.emitChange();
+            break;
         default:
             // pass
     }