wip right panel

5 files changed, 118 insertions, 48 deletions

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 72504d89..b448f808 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,6 +1,6 @@
 var React = require('react');
 var Col = require('react-bootstrap/Col');
-var Row = require('react-bootstrap/Row');
+var Grid = require('react-bootstrap/Grid');
 
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
@@ -9,19 +9,15 @@ var RightPanel = require('./RightPanel.react');
 
 var MainApp = React.createClass({
     render: function() {
-        return (<Row>
+        return (<Grid fluid id="jarr-container">
                     <Menu />
-                    <Col id="middle-panel"
-                         mdOffset={3} lgOffset={2} xs={2} sm={2} md={4} lg={4}>
+                    <Col id="middle-panel" mdOffset={3} lgOffset={2}
+                                           xs={2} sm={2} md={4} lg={4}>
                         <MiddlePanel.MiddlePanelFilter />
                         <MiddlePanel.MiddlePanel />
                     </Col>
-                    <Col id="right-panel"
-                        xs={10} sm={10} md={8} lg={8}>
-                        <RightPanel.RightPanelMenu />
-                        <RightPanel.RightPanel />
-                    </Col>
-                </Row>
+                    <RightPanel />
+                </Grid>
        );
     },
 });
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index d0bd719d..0d739e4e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -201,6 +201,9 @@ var Menu = React.createClass({
             var feeds = [];
             var unread = 0;
             this.state.categories[cat_id].feeds.map(function(feed_id) {
+                if(this.state.feeds[feed_id].error_count > 3) {
+                    feed_in_error = true;
+                }
                 unread += this.state.feeds[feed_id].unread;
                 feeds.push(this.state.feeds[feed_id]);
             }.bind(this));
@@ -213,10 +216,10 @@ var Menu = React.createClass({
                                     unread={unread} />);
         }
 
-        return (<Col xsHidden smHidden md={3} lg={2} data-spy="affix"
-                     id="menu" className="show-grid sidebar">
+        return (<Col xsHidden smHidden md={3} lg={2}
+                     id="menu" className="sidebar">
                     <MenuFilter filter={this.state.filter}
-                                feed_in_error={this.state.feed_in_error} />
+                                feed_in_error={feed_in_error} />
                     {rmPrntFilt}
                     {categories}
                 </Col>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index d195dc08..a1e15e94 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,61 +1,117 @@
 var React = require('react');
-
+var Col = require('react-bootstrap/Col');
+var Panel = require('react-bootstrap/Panel');
 var RightPanelStore = require('../stores/RightPanelStore');
 var RightPanelActions = require('../actions/RightPanelActions');
 
-
 var Article = React.createClass({
-
+    propTypes: {article: React.PropTypes.object.isRequired},
     render: function() {
         return (<div />);
     },
 });
 
-
 var Feed = React.createClass({
+    propTypes: {feed: React.PropTypes.object.isRequired},
     render: function() {
-        return (<div />);
+        var icon = null;
+        if(this.props.feed.icon_url){
+            icon = (<img width="16px" src={this.props.feed.icon_url} />);
+        }
+        var header = (<h4>
+                        {icon}<strong>Title:</strong> {this.props.feed.title}
+                      </h4>);
+        return (<Panel header={header}>
+                    <dl className="dl-horizontal">
+                        <dt>Description</dt>
+                        <dd>{this.props.feed.description}</dd>
+                        <dt>Created on</dt>
+                        <dd>{this.props.feed.created_date}</dd>
+                        <dt>Feed adress</dt>
+                        <dd>
+                            <a href={this.props.feed.link}>
+                                {this.props.feed.link}
+                            </a>
+                        </dd>
+                        <dt>Site link</dt>
+                        <dd>
+                            <a href={this.props.feed.site_link}>
+                                {this.props.feed.site_link}
+                            </a>
+                        </dd>
+                        <dt>Last fetched</dt>
+                        <dd>{this.props.feed.last_retrieved}</dd>
+                        <dt>Enabled</dt>
+                        <dd>{this.props.feed.enabled}</dd>
+                    </dl>
+                </Panel>
+        );
     },
 });
 
-
 var Category = React.createClass({
+    propTypes: {category: React.PropTypes.object.isRequired},
     render: function() {
-        return (<div />);
+        return (<Panel header={this.props.category.name}>
+                test
+                </Panel>
+        );
     },
 });
 
-
-var RightPanelMenu = React.createClass({
+var RightPanel = React.createClass({
     getInitialState: function() {
-        return {};
-    },
-    render: function() {
-        return (<div />);
+        return {category: null, feed: null, article: null};
     },
-    componentDidMount: function() {
-        RightPanelStore.addChangeListener(this._onChange);
+    getCategoryCrum: function() {
+        return (<li><a onClick={this.selectCategory} href="#">
+                    {this.state.category.name}
+                </a></li>);
     },
-    componentWillUnmount: function() {
-        RightPanelStore.removeChangeListener(this._onChange);
+    getFeedCrum: function() {
+        return (<li><a onClick={this.selectFeed} href="#">
+                    {this.state.feed.title}
+                </a></li>);
     },
-    _onChange: function() {
-    },
-});
-
-var RightPanel = React.createClass({
-    getInitialState: function() {
-        return {obj_type: null, obj_id: null};
+    getArticleCrum: function() {
+        return <li>Article</li>;
     },
     render: function() {
-        if (this.state.obj_type == 'article') {
-            return <Article />;
-        } else if (this.state.obj_type == 'feed') {
-            return <Feed />;
-        } else if (this.state.obj_type == 'category') {
-            return <Category />;
+        var content = null;
+        var breadcrum = null;
+        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>);
+            var content = <Feed feed={this.state.feed} />;
+        } else if(this.state.category) {
+            var breadcrum = (<ol className="breadcrumb">
+                                {this.getCategoryCrum()}
+                             </ol>);
+            var content = <Category category={this.state.category} />;
         }
-        return <div />;
+
+        return (<Col id="right-panel" xsOffset={2} smOffset={2}
+                                      mdOffset={7} lgOffset={6}
+                                      xs={10} sm={10} md={5} lg={6}>
+                    {breadcrum}
+                    {content}
+                </Col>
+        );
+    },
+    selectCategory: function() {
+        this.setState({feed: null, article: null});
+    },
+    selectFeed: function() {
+        this.setState({article: null});
     },
     componentDidMount: function() {
         RightPanelStore.addChangeListener(this._onChange);
@@ -64,7 +120,8 @@ var RightPanel = React.createClass({
         RightPanelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
+        this.setState(RightPanelStore._datas);
     },
 });
 
-module.exports = {RightPanelMenu: RightPanelMenu, RightPanel: RightPanel};
+module.exports = RightPanel;
diff --git a/src/web/js/stores/MenuStore.js b/src/web/js/stores/MenuStore.js
index 6921ae1c..3a87384f 100644
--- a/src/web/js/stores/MenuStore.js
+++ b/src/web/js/stores/MenuStore.js
@@ -8,7 +8,7 @@ var assign = require('object-assign');
 var MenuStore = assign({}, EventEmitter.prototype, {
     _datas: {filter: 'all', feeds: {}, categories: {},
              active_type: null, active_id: null,
-             all_unread_count: 0, feed_in_error: false},
+             all_unread_count: 0},
     getAll: function() {
         return this._datas;
     },
@@ -45,7 +45,6 @@ MenuStore.dispatchToken = JarrDispatcher.register(function(action) {
         case ActionTypes.RELOAD_MENU:
             MenuStore._datas['feeds'] = action.feeds;
             MenuStore._datas['categories'] = action.categories;
-            MenuStore._datas['feed_in_error'] = action.feed_in_error;
             MenuStore._datas['all_unread_count'] = action.all_unread_count;
             MenuStore.emitChange();
             break;
diff --git a/src/web/js/stores/RightPanelStore.js b/src/web/js/stores/RightPanelStore.js
index 54df1c95..f08be009 100644
--- a/src/web/js/stores/RightPanelStore.js
+++ b/src/web/js/stores/RightPanelStore.js
@@ -3,10 +3,11 @@ var ActionTypes = require('../constants/JarrConstants');
 var EventEmitter = require('events').EventEmitter;
 var CHANGE_EVENT = 'change_middle_panel';
 var assign = require('object-assign');
+var MenuStore = require('../stores/MenuStore');
 
 
 var RightPanelStore = assign({}, EventEmitter.prototype, {
-    _datas: {},
+    _datas: {category: null, feed: null, article: null},
     getAll: function() {
         return this._datas;
     },
@@ -24,6 +25,20 @@ var RightPanelStore = assign({}, EventEmitter.prototype, {
 
 RightPanelStore.dispatchToken = JarrDispatcher.register(function(action) {
     switch(action.type) {
+        case ActionTypes.PARENT_FILTER:
+            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;
+            } else {
+
+                RightPanelStore._datas.feed = MenuStore._datas.feeds[action.filter_id];
+                RightPanelStore._datas.category = MenuStore._datas.categories[RightPanelStore._datas.feed.category_id];
+            }
+            RightPanelStore.emitChange();
+            break;
         default:
             // pass
     }