From 2c0e17cb977a1e8782799b337df8b1583d019906 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Mon, 12 Oct 2015 22:36:01 +0200
Subject: bootstraping react

---
 src/web/js/components/MainApp.react.js     |  18 +++++
 src/web/js/components/Menu.react.js        | 119 +++++++++++++++++++++++++++++
 src/web/js/components/MiddlePanel.react.js | 103 +++++++++++++++++++++++++
 3 files changed, 240 insertions(+)
 create mode 100644 src/web/js/components/MainApp.react.js
 create mode 100644 src/web/js/components/Menu.react.js
 create mode 100644 src/web/js/components/MiddlePanel.react.js

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
new file mode 100644
index 00000000..743c9510
--- /dev/null
+++ b/src/web/js/components/MainApp.react.js
@@ -0,0 +1,18 @@
+var Menu = require('./Menu.react');
+var MiddlePanel = require('./MiddlePanel.react');
+var React = require('react');
+
+
+var MainApp = React.createClass({
+    render: function() {
+        return (<div className="container-fluid">
+                    <div className="row row-offcanvas row-offcanvas-left">
+                        <Menu />
+                        <MiddlePanel />
+                    </div>
+                </div>
+       );
+    },
+});
+
+module.exports = MainApp;
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
new file mode 100644
index 00000000..caf8c3a8
--- /dev/null
+++ b/src/web/js/components/Menu.react.js
@@ -0,0 +1,119 @@
+var React = require('react');
+var MenuStore = require('../stores/MenuStore');
+var MenuActions = require('../actions/MenuActions');
+var MiddlePanelActions = require('../actions/MiddlePanelActions');
+
+var FeedItem = React.createClass({
+    propTypes: {feed_id: React.PropTypes.number.isRequired,
+                title: React.PropTypes.string.isRequired,
+                unread: React.PropTypes.number.isRequired,
+                icon_url: React.PropTypes.string,
+    },
+    getInitialState: function() {
+        return {feed_id: this.props.feed_id,
+                title: this.props.title,
+                unread: this.props.unread,
+                icon_url: this.props.icon_url,
+        };
+    },
+    render: function() {
+        var unread = undefined;
+        var icon = undefined;
+        if(this.state.icon_url){
+            icon = (<img width="16px" src={this.state.icon_url} />);
+        } else {
+            icon = (<span className="glyphicon glyphicon-ban-circle" />);
+        }
+        if(this.state.unread){
+            unread = (
+                    <span className="badge pull-right">
+                        {this.state.unread}
+                    </span>
+            );
+        }
+        return (<li onMouseDown={this.handleClick}>
+                    {icon} {this.state.title} {unread}
+                </li>
+        );
+    },
+    handleClick: function() {
+        MiddlePanelActions.setFeedFilter(this.state.feed_id);
+    },
+});
+
+var Category = React.createClass({
+    propTypes: {category_id: React.PropTypes.number.isRequired,
+                name: React.PropTypes.string.isRequired,
+                feeds: React.PropTypes.array.isRequired,
+                unread: React.PropTypes.number.isRequired,
+    },
+    getInitialState: function() {
+        return {category_id: this.props.category_id,
+                name: this.props.name,
+                feeds: this.props.feeds,
+                unread: this.props.unread,
+        };
+    },
+    render: function() {
+        unread = undefined;
+        if(this.state.unread){
+            unread = (
+                    <span className="badge pull-right">
+                        {this.state.unread}
+                    </span>
+            );
+        }
+        return (<div>
+                    <h3 onMouseDown={this.handleClick}>
+                        {this.state.name} {unread}
+                    </h3>
+                    <ul className="nav nav-sidebar">
+                    {this.state.feeds.map(function(feed){
+                     return <FeedItem key={"feed" + feed.id}
+                                      feed_id={feed.id}
+                                      title={feed.title}
+                                      unread={feed.unread}
+                                      icon_url={feed.icon_url} />;})}
+                    </ul>
+                </div>
+        );
+    },
+    handleClick: function() {
+        MiddlePanelActions.setCategoryFilter(this.state.category_id);
+    },
+});
+
+var Menu = React.createClass({
+    getInitialState: function() {
+        return {categories: [], all_unread_count: 0};
+    },
+    render: function() {
+        return (<div id="sidebar" data-spy="affix" role="navigation"
+                     className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
+                    {this.state.categories.map(function(category){
+                        return (<Category key={"cat" + category.id}
+                                          category_id={category.id}
+                                          feeds={category.feeds}
+                                          name={category.name}
+                                          unread={category.unread} />);
+                        })}
+
+                </div>
+        );
+    },
+
+    componentDidMount: function() {
+        MenuActions.reload();
+        MenuStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MenuStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        var datas = MenuStore.getAll();
+        this.setState({categories: datas.categories,
+                       all_unread_count: datas.all_unread_count});
+    },
+});
+
+module.exports = Menu;
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
new file mode 100644
index 00000000..51d582c0
--- /dev/null
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -0,0 +1,103 @@
+var React = require('react');
+var MiddlePanelStore = require('../stores/MiddlePanelStore');
+var MiddlePanelActions = require('../actions/MiddlePanelActions');
+
+var TableLine = React.createClass({
+    propTypes: {article_id: React.PropTypes.number.isRequired,
+                feed_title: React.PropTypes.string.isRequired,
+                icon_url: React.PropTypes.string,
+                title: React.PropTypes.string.isRequired,
+                date: React.PropTypes.string.isRequired,
+                read: React.PropTypes.bool.isRequired,
+                liked: React.PropTypes.bool.isRequired,
+    },
+    getInitialState: function() {
+        return {article_id: this.props.article_id,
+                title: this.props.title,
+                icon_url: this.props.icon_url,
+                feed_title: this.props.feed_title,
+                date: this.props.date,
+                read: this.props.read,
+                liked: this.props.liked,
+        };
+    },
+    render: function() {
+        var read = this.state.read ? 'r' : '';
+        var liked = this.state.liked ? 'l' : '';
+        var icon = undefined;
+        if(this.state.icon_url){
+            icon = (<img width="16px" src={this.state.icon_url} />);
+        } else {
+            icon = (<span className="glyphicon glyphicon-ban-circle" />);
+        }
+        return (
+                <tr>
+                <td>{icon}{liked}</td>
+                <td>
+                    <a href={'/redirect/' + this.state.article_id}>
+                        {this.state.feed_title}
+                    </a>
+                </td>
+                <td>
+                    <a href={'/article/' + this.state.article_id}>
+                        {this.state.title}
+                    </a>
+                </td>
+                <td>{this.state.date}</td>
+                </tr>
+        );
+    },
+});
+
+var TableBody = React.createClass({
+    propTypes: {articles: React.PropTypes.array.isRequired,
+    },
+    getInitialState: function() {
+        return {articles: this.props.articles,
+        };
+    },
+    render: function() {
+        return (<div className="table-responsive">
+                <table className="table table-striped strict-table">
+                <tbody>
+                    {this.state.articles.map(function(article){
+                     return (<TableLine key={"article" + article.article_id}
+                                        title={article.title}
+                                        icon_url={article.icon_url}
+                                        read={article.read}
+                                        liked={article.liked}
+                                        date={article.date}
+                                        article_id={article.article_id}
+                                        feed_title={article.feed_title} />);})}
+                </tbody>
+                </table>
+                </div>
+        );
+    }
+});
+
+var MiddlePanel = React.createClass({
+    getInitialState: function() {
+        return {articles: []};
+    },
+    render: function() {
+        var body = null;
+        if(this.state.articles.length) {
+            body = (<TableBody articles={this.state.articles} />);
+        }
+        return (<div className="col-md-offset-2 col-md-10 main">{body}</div>);
+    },
+    componentDidMount: function() {
+        MiddlePanelActions.reload();
+        MiddlePanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MiddlePanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        var datas = MiddlePanelStore.getAll();
+        this.setState({articles: datas.articles});
+    },
+});
+
+module.exports = MiddlePanel;
-- 
cgit 


From 41aea41aaff0886fd6c211f03db2b54863a97165 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 21 Jan 2016 13:48:06 +0100
Subject: filters are working !

---
 src/web/js/components/MiddlePanel.react.js | 29 +++++++++++------------------
 1 file changed, 11 insertions(+), 18 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 51d582c0..c5a9c3f9 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -50,10 +50,8 @@ var TableLine = React.createClass({
 });
 
 var TableBody = React.createClass({
-    propTypes: {articles: React.PropTypes.array.isRequired,
-    },
     getInitialState: function() {
-        return {articles: this.props.articles,
+        return {articles: [],
         };
     },
     render: function() {
@@ -73,19 +71,6 @@ var TableBody = React.createClass({
                 </table>
                 </div>
         );
-    }
-});
-
-var MiddlePanel = React.createClass({
-    getInitialState: function() {
-        return {articles: []};
-    },
-    render: function() {
-        var body = null;
-        if(this.state.articles.length) {
-            body = (<TableBody articles={this.state.articles} />);
-        }
-        return (<div className="col-md-offset-2 col-md-10 main">{body}</div>);
     },
     componentDidMount: function() {
         MiddlePanelActions.reload();
@@ -95,8 +80,16 @@ var MiddlePanel = React.createClass({
         MiddlePanelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        var datas = MiddlePanelStore.getAll();
-        this.setState({articles: datas.articles});
+        this.setState({articles: MiddlePanelStore.getArticles()});
+    },
+});
+
+var MiddlePanel = React.createClass({
+    render: function() {
+        return (<div className="col-md-offset-2 col-md-10 main">
+                    <TableBody />
+                </div>
+        );
     },
 });
 
-- 
cgit 


From c542f58b99e0bd625f52e1ac9c3d2ad7d9ee4bd5 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 22 Jan 2016 17:26:56 +0100
Subject: adding basic bootstrap

---
 src/web/js/components/Menu.react.js        | 20 +++++++++++++++++---
 src/web/js/components/MiddlePanel.react.js | 20 +++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index caf8c3a8..c1cee9de 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,4 +1,7 @@
 var React = require('react');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
@@ -85,11 +88,22 @@ var Category = React.createClass({
 
 var Menu = React.createClass({
     getInitialState: function() {
-        return {categories: [], all_unread_count: 0};
+        return {filter: 'all', categories: [], all_unread_count: 0};
     },
     render: function() {
         return (<div id="sidebar" data-spy="affix" role="navigation"
                      className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
+                    <ButtonGroup>
+                        <Button active={this.state.filter == "all"}
+                                onMouseDown={MenuActions.setFilterMenuAll}
+                                bsSize="small">All</Button>
+                        <Button active={this.state.filter == "unread"}
+                                onMouseDown={MenuActions.setFilterMenuUnread}
+                                bsSize="small">Unread</Button>
+                        <Button active={this.state.filter == "error"}
+                                onMouseDown={MenuActions.setFilterMenuError}
+                                bsSize="small" bsStyle="warning">Error</Button>
+                    </ButtonGroup>
                     {this.state.categories.map(function(category){
                         return (<Category key={"cat" + category.id}
                                           category_id={category.id}
@@ -101,7 +115,6 @@ var Menu = React.createClass({
                 </div>
         );
     },
-
     componentDidMount: function() {
         MenuActions.reload();
         MenuStore.addChangeListener(this._onChange);
@@ -111,7 +124,8 @@ var Menu = React.createClass({
     },
     _onChange: function() {
         var datas = MenuStore.getAll();
-        this.setState({categories: datas.categories,
+        this.setState({filter: datas.filter,
+                       categories: datas.categories,
                        all_unread_count: datas.all_unread_count});
     },
 });
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index c5a9c3f9..b63eabf4 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 Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
 
@@ -51,11 +54,21 @@ var TableLine = React.createClass({
 
 var TableBody = React.createClass({
     getInitialState: function() {
-        return {articles: [],
-        };
+        return {filter: 'unread', articles: []};
     },
     render: function() {
         return (<div className="table-responsive">
+                <ButtonGroup>
+                    <Button active={this.state.filter == "all"}
+                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelAll}
+                            bsSize="small">All</Button>
+                    <Button active={this.state.filter == "unread"}
+                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelUnread}
+                            bsSize="small">Unread</Button>
+                    <Button active={this.state.filter == "liked"}
+                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelLiked}
+                            bsSize="small">Liked</Button>
+                </ButtonGroup>
                 <table className="table table-striped strict-table">
                 <tbody>
                     {this.state.articles.map(function(article){
@@ -80,7 +93,8 @@ var TableBody = React.createClass({
         MiddlePanelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState({articles: MiddlePanelStore.getArticles()});
+        this.setState({filter: MiddlePanelStore._datas.filter,
+                       articles: MiddlePanelStore.getArticles()});
     },
 });
 
-- 
cgit 


From ed74f6a2bfc9975092040c4379f459d4c9442d3f Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 22 Jan 2016 19:09:08 +0100
Subject: renaming, proper usage of props and state, filtering left menu

---
 src/web/js/components/Menu.react.js        | 70 +++++++++++++-----------------
 src/web/js/components/MiddlePanel.react.js | 29 +++++--------
 2 files changed, 41 insertions(+), 58 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index c1cee9de..ef0ec274 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -12,77 +12,65 @@ var FeedItem = React.createClass({
                 unread: React.PropTypes.number.isRequired,
                 icon_url: React.PropTypes.string,
     },
-    getInitialState: function() {
-        return {feed_id: this.props.feed_id,
-                title: this.props.title,
-                unread: this.props.unread,
-                icon_url: this.props.icon_url,
-        };
-    },
     render: function() {
         var unread = undefined;
         var icon = undefined;
-        if(this.state.icon_url){
-            icon = (<img width="16px" src={this.state.icon_url} />);
+        if(this.props.icon_url){
+            icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
             icon = (<span className="glyphicon glyphicon-ban-circle" />);
         }
-        if(this.state.unread){
+        if(this.props.unread){
             unread = (
                     <span className="badge pull-right">
-                        {this.state.unread}
+                        {this.props.unread}
                     </span>
             );
         }
         return (<li onMouseDown={this.handleClick}>
-                    {icon} {this.state.title} {unread}
+                    {icon} {this.props.title} {unread}
                 </li>
         );
     },
     handleClick: function() {
-        MiddlePanelActions.setFeedFilter(this.state.feed_id);
+        MiddlePanelActions.setFeedFilter(this.props.feed_id);
     },
 });
 
 var Category = React.createClass({
     propTypes: {category_id: React.PropTypes.number.isRequired,
+                filter: React.PropTypes.string.isRequired,
                 name: React.PropTypes.string.isRequired,
                 feeds: React.PropTypes.array.isRequired,
                 unread: React.PropTypes.number.isRequired,
     },
-    getInitialState: function() {
-        return {category_id: this.props.category_id,
-                name: this.props.name,
-                feeds: this.props.feeds,
-                unread: this.props.unread,
-        };
-    },
     render: function() {
-        unread = undefined;
-        if(this.state.unread){
-            unread = (
-                    <span className="badge pull-right">
-                        {this.state.unread}
-                    </span>
-            );
+        var filter = this.props.filter;
+        var feeds = this.props.feeds.filter(function(feed) {
+            if (filter == 'unread' && feed.unread <= 0) {return false;}
+            else if (filter == 'error' && feed.error_count <= 3){return false;}
+            return true;
+        }).map(function(feed) {
+            return (<FeedItem key={"feed" + feed.id} feed_id={feed.id}
+                              title={feed.title} unread={feed.unread}
+                              icon_url={feed.icon_url} />);
+        });
+        var unread = undefined;
+        if(this.props.unread){
+            unread = (<span className="badge pull-right">
+                            {this.props.unread}
+                      </span>);
         }
         return (<div>
                     <h3 onMouseDown={this.handleClick}>
-                        {this.state.name} {unread}
+                        {this.props.name} {unread}
                     </h3>
-                    <ul className="nav nav-sidebar">
-                    {this.state.feeds.map(function(feed){
-                     return <FeedItem key={"feed" + feed.id}
-                                      feed_id={feed.id}
-                                      title={feed.title}
-                                      unread={feed.unread}
-                                      icon_url={feed.icon_url} />;})}
-                    </ul>
+                    <ul className="nav nav-sidebar">{feeds}</ul>
                 </div>
         );
     },
     handleClick: function() {
-        MiddlePanelActions.setCategoryFilter(this.state.category_id);
+        MiddlePanelActions.setCategoryFilter(this.props.category_id);
     },
 });
 
@@ -91,21 +79,23 @@ var Menu = React.createClass({
         return {filter: 'all', categories: [], all_unread_count: 0};
     },
     render: function() {
+        var filter = this.state.filter;
         return (<div id="sidebar" data-spy="affix" role="navigation"
                      className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={MenuActions.setFilterMenuAll}
+                                onMouseDown={MenuActions.setFilterAll}
                                 bsSize="small">All</Button>
                         <Button active={this.state.filter == "unread"}
-                                onMouseDown={MenuActions.setFilterMenuUnread}
+                                onMouseDown={MenuActions.setFilterUnread}
                                 bsSize="small">Unread</Button>
                         <Button active={this.state.filter == "error"}
-                                onMouseDown={MenuActions.setFilterMenuError}
+                                onMouseDown={MenuActions.setFilterError}
                                 bsSize="small" bsStyle="warning">Error</Button>
                     </ButtonGroup>
                     {this.state.categories.map(function(category){
                         return (<Category key={"cat" + category.id}
+                                          filter={filter}
                                           category_id={category.id}
                                           feeds={category.feeds}
                                           name={category.name}
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index b63eabf4..38f3b1db 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -15,21 +15,14 @@ var TableLine = React.createClass({
                 liked: React.PropTypes.bool.isRequired,
     },
     getInitialState: function() {
-        return {article_id: this.props.article_id,
-                title: this.props.title,
-                icon_url: this.props.icon_url,
-                feed_title: this.props.feed_title,
-                date: this.props.date,
-                read: this.props.read,
-                liked: this.props.liked,
-        };
+        return {read: this.props.read, liked: this.props.liked};
     },
     render: function() {
         var read = this.state.read ? 'r' : '';
         var liked = this.state.liked ? 'l' : '';
         var icon = undefined;
-        if(this.state.icon_url){
-            icon = (<img width="16px" src={this.state.icon_url} />);
+        if(this.props.icon_url){
+            icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
             icon = (<span className="glyphicon glyphicon-ban-circle" />);
         }
@@ -37,16 +30,16 @@ var TableLine = React.createClass({
                 <tr>
                 <td>{icon}{liked}</td>
                 <td>
-                    <a href={'/redirect/' + this.state.article_id}>
-                        {this.state.feed_title}
+                    <a href={'/redirect/' + this.props.article_id}>
+                        {this.props.feed_title}
                     </a>
                 </td>
                 <td>
-                    <a href={'/article/' + this.state.article_id}>
-                        {this.state.title}
+                    <a href={'/article/' + this.props.article_id}>
+                        {this.props.title}
                     </a>
                 </td>
-                <td>{this.state.date}</td>
+                <td>{this.props.date}</td>
                 </tr>
         );
     },
@@ -60,13 +53,13 @@ var TableBody = React.createClass({
         return (<div className="table-responsive">
                 <ButtonGroup>
                     <Button active={this.state.filter == "all"}
-                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelAll}
+                            onMouseDown={MiddlePanelActions.setFilterAll}
                             bsSize="small">All</Button>
                     <Button active={this.state.filter == "unread"}
-                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelUnread}
+                            onMouseDown={MiddlePanelActions.setFilterUnread}
                             bsSize="small">Unread</Button>
                     <Button active={this.state.filter == "liked"}
-                            onMouseDown={MiddlePanelActions.setFilterMiddlePanelLiked}
+                            onMouseDown={MiddlePanelActions.setFilterLiked}
                             bsSize="small">Liked</Button>
                 </ButtonGroup>
                 <table className="table table-striped strict-table">
-- 
cgit 


From b3e0391f53d98b777d6cdb21ba0492c31927a6f0 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 22 Jan 2016 22:43:39 +0100
Subject: ordering feeds

---
 src/web/js/components/Menu.react.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index ef0ec274..7f5f17bc 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -46,10 +46,13 @@ var Category = React.createClass({
     },
     render: function() {
         var filter = this.props.filter;
+        // filtering according to this.props.filter
         var feeds = this.props.feeds.filter(function(feed) {
             if (filter == 'unread' && feed.unread <= 0) {return false;}
             else if (filter == 'error' && feed.error_count <= 3){return false;}
             return true;
+        }).sort(function(feed_a, feed_b){
+            return feed_b.unread - feed_a.unread;
         }).map(function(feed) {
             return (<FeedItem key={"feed" + feed.id} feed_id={feed.id}
                               title={feed.title} unread={feed.unread}
-- 
cgit 


From 00ba122b5d6b0929ba6078fc7c1d128cf6e5236e Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 22 Jan 2016 23:39:12 +0100
Subject: displaying error

---
 src/web/js/components/Menu.react.js | 38 ++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 7f5f17bc..d44e7bd3 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,6 +1,7 @@
 var React = require('react');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Badge = require('react-bootstrap/lib/Badge');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
@@ -10,25 +11,28 @@ var FeedItem = React.createClass({
     propTypes: {feed_id: React.PropTypes.number.isRequired,
                 title: React.PropTypes.string.isRequired,
                 unread: React.PropTypes.number.isRequired,
+                error_count: React.PropTypes.number.isRequired,
                 icon_url: React.PropTypes.string,
     },
     render: function() {
-        var unread = undefined;
-        var icon = undefined;
+        var icon = null;
+        var badge_unread = null;
+        var badge_error = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
             icon = (<span className="glyphicon glyphicon-ban-circle" />);
         }
         if(this.props.unread){
-            unread = (
-                    <span className="badge pull-right">
-                        {this.props.unread}
-                    </span>
-            );
+            badge_unread = <Badge pullRight>{this.props.unread}</Badge>;
+        }
+        if(this.props.error_count == 6) {
+            badge_unread = <Badge pullRight error>error</Badge>;
+        } else if(this.props.error_count > 3) {
+            badge_unread = <Badge pullRight warning>warn</Badge>;
         }
         return (<li onMouseDown={this.handleClick}>
-                    {icon} {this.props.title} {unread}
+                    {icon}{this.props.title}{badge_unread}{badge_error}
                 </li>
         );
     },
@@ -56,6 +60,7 @@ var Category = React.createClass({
         }).map(function(feed) {
             return (<FeedItem key={"feed" + feed.id} feed_id={feed.id}
                               title={feed.title} unread={feed.unread}
+                              error_count={feed.error_count}
                               icon_url={feed.icon_url} />);
         });
         var unread = undefined;
@@ -79,10 +84,18 @@ var Category = React.createClass({
 
 var Menu = React.createClass({
     getInitialState: function() {
-        return {filter: 'all', categories: [], all_unread_count: 0};
+        return {filter: 'all', categories: [],
+                feed_in_error: false, all_unread_count: 0};
     },
     render: function() {
         var filter = this.state.filter;
+        var error_button = null;
+        if (this.state.feed_in_error) {
+            error_button = (<Button active={this.state.filter == "error"}
+                                onMouseDown={MenuActions.setFilterError}
+                                bsSize="small" bsStyle="warning">Error</Button>
+            );
+        }
         return (<div id="sidebar" data-spy="affix" role="navigation"
                      className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
                     <ButtonGroup>
@@ -92,10 +105,8 @@ var Menu = React.createClass({
                         <Button active={this.state.filter == "unread"}
                                 onMouseDown={MenuActions.setFilterUnread}
                                 bsSize="small">Unread</Button>
-                        <Button active={this.state.filter == "error"}
-                                onMouseDown={MenuActions.setFilterError}
-                                bsSize="small" bsStyle="warning">Error</Button>
-                    </ButtonGroup>
+                        {error_button}
+                   </ButtonGroup>
                     {this.state.categories.map(function(category){
                         return (<Category key={"cat" + category.id}
                                           filter={filter}
@@ -119,6 +130,7 @@ var Menu = React.createClass({
         var datas = MenuStore.getAll();
         this.setState({filter: datas.filter,
                        categories: datas.categories,
+                       feed_in_error: datas.feed_in_error,
                        all_unread_count: datas.all_unread_count});
     },
 });
-- 
cgit 


From 94a18fbdecaa798d67a5bf7ad0f2b8ee4e0c7851 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sat, 23 Jan 2016 03:21:41 +0100
Subject: meh, kinda works, sleep now

---
 src/web/js/components/MiddlePanel.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 38f3b1db..f95554b8 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -20,7 +20,7 @@ var TableLine = React.createClass({
     render: function() {
         var read = this.state.read ? 'r' : '';
         var liked = this.state.liked ? 'l' : '';
-        var icon = undefined;
+        var icon = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
-- 
cgit 


From 3644d4ef190d2d509c64fdf5c29382cb8a41e235 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sat, 23 Jan 2016 12:47:18 +0100
Subject: doing some design

wip toogle read / like
---
 src/web/js/components/MainApp.react.js     |  21 +++--
 src/web/js/components/Menu.react.js        | 143 ++++++++++++++++++++---------
 src/web/js/components/MiddlePanel.react.js | 111 ++++++++++++----------
 3 files changed, 181 insertions(+), 94 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 743c9510..059d2646 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,16 +1,23 @@
+var React = require('react');
+var Col = require('react-bootstrap/lib/Col');
+var Grid = require('react-bootstrap/lib/Grid');
+
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
-var React = require('react');
 
 
 var MainApp = React.createClass({
     render: function() {
-        return (<div className="container-fluid">
-                    <div className="row row-offcanvas row-offcanvas-left">
-                        <Menu />
-                        <MiddlePanel />
-                    </div>
-                </div>
+        return (<Grid fluid>
+                    <Col xsHidden smHidden md={3} lg={2}>
+                        <Menu.MenuFilter />
+                        <Menu.Menu />
+                    </Col>
+                    <Col xs={2} sm={2} md={4} lg={4}>
+                        <MiddlePanel.MiddlePanelFilter />
+                        <MiddlePanel.MiddlePanel />
+                    </Col>
+                </Grid>
        );
     },
 });
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index d44e7bd3..3e5f4156 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,7 +1,11 @@
 var React = require('react');
+var Row = require('react-bootstrap/lib/Row');
+var Badge = require('react-bootstrap/lib/Badge');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
-var Badge = require('react-bootstrap/lib/Badge');
+var ListGroup = require('react-bootstrap/lib/ListGroup');
+var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
@@ -13,27 +17,29 @@ var FeedItem = React.createClass({
                 unread: React.PropTypes.number.isRequired,
                 error_count: React.PropTypes.number.isRequired,
                 icon_url: React.PropTypes.string,
+                active: React.PropTypes.bool.isRequired,
     },
     render: function() {
         var icon = null;
         var badge_unread = null;
-        var badge_error = null;
+        var style = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
-            icon = (<span className="glyphicon glyphicon-ban-circle" />);
+            icon = <Glyphicon glyph="ban-circle" />;
         }
         if(this.props.unread){
             badge_unread = <Badge pullRight>{this.props.unread}</Badge>;
         }
         if(this.props.error_count == 6) {
-            badge_unread = <Badge pullRight error>error</Badge>;
+            style = "danger";
         } else if(this.props.error_count > 3) {
-            badge_unread = <Badge pullRight warning>warn</Badge>;
+            style = "warning";
         }
-        return (<li onMouseDown={this.handleClick}>
-                    {icon}{this.props.title}{badge_unread}{badge_error}
-                </li>
+        return (<ListGroupItem onMouseDown={this.handleClick} bsStyle={style}
+                               href="#" active={this.props.active}>
+                    {icon}{this.props.title}{badge_unread}
+                </ListGroupItem>
         );
     },
     handleClick: function() {
@@ -42,53 +48,76 @@ var FeedItem = React.createClass({
 });
 
 var Category = React.createClass({
-    propTypes: {category_id: React.PropTypes.number.isRequired,
+    propTypes: {cat_id: React.PropTypes.number.isRequired,
                 filter: React.PropTypes.string.isRequired,
+                active_type: React.PropTypes.string,
+                active_id: React.PropTypes.number,
                 name: React.PropTypes.string.isRequired,
                 feeds: React.PropTypes.array.isRequired,
                 unread: React.PropTypes.number.isRequired,
     },
+    getInitialState: function() {
+        return {unfolded: true};
+    },
     render: function() {
         var filter = this.props.filter;
+        var a_type = this.props.active_type;
+        var a_id = this.props.active_id;
         // filtering according to this.props.filter
+        if(this.state.unfolded) {
         var feeds = this.props.feeds.filter(function(feed) {
-            if (filter == 'unread' && feed.unread <= 0) {return false;}
-            else if (filter == 'error' && feed.error_count <= 3){return false;}
+            if (filter == 'unread' && feed.unread <= 0) {
+                return false;
+            } else if (filter == 'error' && feed.error_count <= 3) {
+                return false;
+            }
             return true;
         }).sort(function(feed_a, feed_b){
             return feed_b.unread - feed_a.unread;
         }).map(function(feed) {
-            return (<FeedItem key={"feed" + feed.id} feed_id={feed.id}
+            return (<FeedItem key={"f" + feed.id} feed_id={feed.id}
                               title={feed.title} unread={feed.unread}
                               error_count={feed.error_count}
-                              icon_url={feed.icon_url} />);
+                              active={a_type == 'feed_id' && a_id == feed.id}
+                              icon_url={feed.icon_url} />
+            );
         });
-        var unread = undefined;
+        } else {
+            var feeds = [];
+        }
+        var unread = null;
         if(this.props.unread){
-            unread = (<span className="badge pull-right">
-                            {this.props.unread}
-                      </span>);
+            unread = <Badge pullRight>{this.props.unread}</Badge>;
         }
-        return (<div>
-                    <h3 onMouseDown={this.handleClick}>
-                        {this.props.name} {unread}
-                    </h3>
-                    <ul className="nav nav-sidebar">{feeds}</ul>
-                </div>
+        var active = a_type == 'category_id' && a_id == this.props.cat_id;
+        var ctrl = (<Glyphicon onMouseDown={this.toggleFolding} pullLeft
+                        glyph={this.state.unfolded?"menu-down":"menu-right"} />
+                    );
+
+        return (<ListGroup>
+                    <ListGroupItem href="#" bsStyle="success"
+                                   active={active}
+                                   onMouseDown={this.handleClick}>
+                        {ctrl} <strong>{this.props.name}</strong> {unread}
+                    </ListGroupItem>
+                    {feeds}
+                </ListGroup>
         );
     },
     handleClick: function() {
-        MiddlePanelActions.setCategoryFilter(this.props.category_id);
+        MiddlePanelActions.setCategoryFilter(this.props.cat_id);
+    },
+    toggleFolding: function(evnt) {
+        this.setState({unfolded: !this.state.unfolded});
+        evnt.stopPropagation();
     },
 });
 
-var Menu = React.createClass({
+var MenuFilter = React.createClass({
     getInitialState: function() {
-        return {filter: 'all', categories: [],
-                feed_in_error: false, all_unread_count: 0};
+        return {filter: 'all', feed_in_error: false};
     },
     render: function() {
-        var filter = this.state.filter;
         var error_button = null;
         if (this.state.feed_in_error) {
             error_button = (<Button active={this.state.filter == "error"}
@@ -96,8 +125,7 @@ var Menu = React.createClass({
                                 bsSize="small" bsStyle="warning">Error</Button>
             );
         }
-        return (<div id="sidebar" data-spy="affix" role="navigation"
-                     className="col-md-2 sidebar sidebar-offcanvas pre-scrollable hidden-sm hidden-xs affix">
+        return (<Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
                                 onMouseDown={MenuActions.setFilterAll}
@@ -106,17 +134,49 @@ var Menu = React.createClass({
                                 onMouseDown={MenuActions.setFilterUnread}
                                 bsSize="small">Unread</Button>
                         {error_button}
-                   </ButtonGroup>
+                    </ButtonGroup>
+                </Row>
+        );
+    },
+    componentDidMount: function() {
+        MenuStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MenuStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        var datas = MenuStore.getAll();
+        this.setState({filter: datas.filter,
+                       feed_in_error: datas.feed_in_error});
+    },
+});
+
+var Menu = React.createClass({
+    getInitialState: function() {
+        return {filter: 'all', categories: [], all_unread_count: 0,
+                active_type: null, active_id: null};
+    },
+    render: function() {
+        var state = this.state;
+        var rmPrntFilt = (<ListGroupItem href="#" bsStyle="success"
+                active={this.state.active_type == null
+                        || this.state.active_id == null}
+                onMouseDown={MiddlePanelActions.removeParentFilter}
+                header="All"></ListGroupItem>);
+
+        return (<Row className="show-grid">
+                    <ListGroup>{rmPrntFilt}</ListGroup>
                     {this.state.categories.map(function(category){
-                        return (<Category key={"cat" + category.id}
-                                          filter={filter}
-                                          category_id={category.id}
-                                          feeds={category.feeds}
-                                          name={category.name}
-                                          unread={category.unread} />);
+                        return (<Category key={"c" + category.id}
+                                            filter={state.filter}
+                                            active_type={state.active_type}
+                                            active_id={state.active_id}
+                                            cat_id={category.id}
+                                            feeds={category.feeds}
+                                            name={category.name}
+                                            unread={category.unread} />);
                         })}
-
-                </div>
+                </Row>
         );
     },
     componentDidMount: function() {
@@ -130,9 +190,10 @@ var Menu = React.createClass({
         var datas = MenuStore.getAll();
         this.setState({filter: datas.filter,
                        categories: datas.categories,
-                       feed_in_error: datas.feed_in_error,
+                       active_type: datas.active_type,
+                       active_id: datas.active_id,
                        all_unread_count: datas.all_unread_count});
     },
 });
 
-module.exports = Menu;
+module.exports = {Menu: Menu, MenuFilter: MenuFilter};
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index f95554b8..49365a6a 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,6 +1,10 @@
 var React = require('react');
+var Row = require('react-bootstrap/lib/Row');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var ListGroup = require('react-bootstrap/lib/ListGroup');
+var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
@@ -18,54 +22,78 @@ var TableLine = React.createClass({
         return {read: this.props.read, liked: this.props.liked};
     },
     render: function() {
-        var read = this.state.read ? 'r' : '';
         var liked = this.state.liked ? 'l' : '';
         var icon = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
-            icon = (<span className="glyphicon glyphicon-ban-circle" />);
+            icon = <Glyphicon glyph="ban-circle" />;
         }
+        var title = (<a href={'/redirect/' + this.props.article_id}>
+                        {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 (
-                <tr>
-                <td>{icon}{liked}</td>
-                <td>
-                    <a href={'/redirect/' + this.props.article_id}>
-                        {this.props.feed_title}
-                    </a>
-                </td>
-                <td>
-                    <a href={'/article/' + this.props.article_id}>
-                        {this.props.title}
-                    </a>
-                </td>
-                <td>{this.props.date}</td>
-                </tr>
+                <ListGroupItem header={title}>
+                            {read}
+                            {liked}
+                    {this.props.title}
+                </ListGroupItem>
         );
     },
+    toogleRead: function() {
+        this.setState({read: !this.state.read});
+        MiddlePanelActions.changeRead(this.props.article_id, !this.state.read);
+    },
+    toogleLike: function() {
+        this.setState({liked: !this.state.liked});
+        MiddlePanelActions.changeLike(this.props.article_id, !this.state.liked);
+    },
+});
+
+var MiddlePanelFilter = React.createClass({
+    getInitialState: function() {
+        return {filter: MiddlePanelStore._datas.filter};
+    },
+    render: function() {
+        return (<Row className="show-grid">
+                    <ButtonGroup>
+                        <Button active={this.state.filter == "all"}
+                                onMouseDown={MiddlePanelActions.setFilterAll}
+                                bsSize="small">All</Button>
+                        <Button active={this.state.filter == "unread"}
+                                onMouseDown={MiddlePanelActions.setFilterUnread}
+                                bsSize="small">Unread</Button>
+                        <Button active={this.state.filter == "liked"}
+                                onMouseDown={MiddlePanelActions.setFilterLiked}
+                                bsSize="small">Liked</Button>
+                    </ButtonGroup>
+                </Row>
+        );
+    },
+    componentDidMount: function() {
+        MiddlePanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MiddlePanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        this.setState({filter: MiddlePanelStore._datas.filter});
+    },
 });
 
-var TableBody = React.createClass({
+var MiddlePanel = React.createClass({
     getInitialState: function() {
-        return {filter: 'unread', articles: []};
+        return {filter: MiddlePanelStore._datas.filter, articles: []};
     },
     render: function() {
-        return (<div className="table-responsive">
-                <ButtonGroup>
-                    <Button active={this.state.filter == "all"}
-                            onMouseDown={MiddlePanelActions.setFilterAll}
-                            bsSize="small">All</Button>
-                    <Button active={this.state.filter == "unread"}
-                            onMouseDown={MiddlePanelActions.setFilterUnread}
-                            bsSize="small">Unread</Button>
-                    <Button active={this.state.filter == "liked"}
-                            onMouseDown={MiddlePanelActions.setFilterLiked}
-                            bsSize="small">Liked</Button>
-                </ButtonGroup>
-                <table className="table table-striped strict-table">
-                <tbody>
+        return (<Row className="show-grid">
+                    <ListGroup>
                     {this.state.articles.map(function(article){
-                     return (<TableLine key={"article" + article.article_id}
+                        return (<TableLine key={"a" + article.article_id}
                                         title={article.title}
                                         icon_url={article.icon_url}
                                         read={article.read}
@@ -73,9 +101,8 @@ var TableBody = React.createClass({
                                         date={article.date}
                                         article_id={article.article_id}
                                         feed_title={article.feed_title} />);})}
-                </tbody>
-                </table>
-                </div>
+                    </ListGroup>
+                </Row>
         );
     },
     componentDidMount: function() {
@@ -91,13 +118,5 @@ var TableBody = React.createClass({
     },
 });
 
-var MiddlePanel = React.createClass({
-    render: function() {
-        return (<div className="col-md-offset-2 col-md-10 main">
-                    <TableBody />
-                </div>
-        );
-    },
-});
-
-module.exports = MiddlePanel;
+module.exports = {MiddlePanel: MiddlePanel,
+                  MiddlePanelFilter: MiddlePanelFilter};
-- 
cgit 


From f0dd6d526160fdb98a5f55b4e45b84652590df58 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Mon, 25 Jan 2016 12:40:23 +0100
Subject: bootstraping right panel

---
 src/web/js/components/MainApp.react.js    |  5 +++
 src/web/js/components/RightPanel.react.js | 71 +++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/web/js/components/RightPanel.react.js

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 059d2646..bd643be1 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -4,6 +4,7 @@ var Grid = require('react-bootstrap/lib/Grid');
 
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
+var RightPanel = require('./RightPanel.react');
 
 
 var MainApp = React.createClass({
@@ -17,6 +18,10 @@ var MainApp = React.createClass({
                         <MiddlePanel.MiddlePanelFilter />
                         <MiddlePanel.MiddlePanel />
                     </Col>
+                    <Col xs={10} sm={10} md={8} lg={8}>
+                        <RightPanel.RightPanelMenu />
+                        <RightPanel.RightPanel />
+                    </Col>
                 </Grid>
        );
     },
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
new file mode 100644
index 00000000..422b8e5b
--- /dev/null
+++ b/src/web/js/components/RightPanel.react.js
@@ -0,0 +1,71 @@
+var React = require('react');
+
+var RightPanelStore = require('../stores/RightPanelStore');
+var RightPanelActions = require('../actions/RightPanelActions');
+
+
+var Article = React.createClass({
+
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var Feed = React.createClass({
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var Category = React.createClass({
+    render: function() {
+        return (<div />);
+    },
+});
+
+
+var RightPanelMenu = React.createClass({
+    getInitialState: function() {
+        return {};
+    },
+    render: function() {
+        return (<div />);
+    },
+    componentDidMount: function() {
+        RightPanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        RightPanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+    },
+});
+
+var RightPanel = React.createClass({
+    getInitialState: function() {
+        return {obj_type: null, obj_id: null};
+    },
+    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 />;
+        }
+        return <div />;
+    },
+    componentDidMount: function() {
+        RightPanelActions.reload();
+        RightPanelStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        RightPanelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+    },
+});
+
+module.exports = {RightPanelMenu: RightPanelMenu, RightPanel: RightPanel};
-- 
cgit 


From 15c4ed6bebdeb277c24bd92dab5bba900fc90de4 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Mon, 25 Jan 2016 13:14:06 +0100
Subject: redoing constant, handling read / unread in menu, removing bad optim
 for loading articles

---
 src/web/js/components/MiddlePanel.react.js | 10 +++++++---
 src/web/js/components/RightPanel.react.js  |  1 -
 2 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 49365a6a..741af5e9 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -29,7 +29,7 @@ var TableLine = React.createClass({
         } else {
             icon = <Glyphicon glyph="ban-circle" />;
         }
-        var title = (<a href={'/redirect/' + this.props.article_id}>
+        var title = (<a href={'/article/redirect/' + this.props.article_id}>
                         {icon} {this.props.feed_title}
                      </a>);
         var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
@@ -46,11 +46,13 @@ var TableLine = React.createClass({
     },
     toogleRead: function() {
         this.setState({read: !this.state.read});
-        MiddlePanelActions.changeRead(this.props.article_id, !this.state.read);
+        MiddlePanelActions.changeRead(this.props.category_id,
+                this.props.feed_id, this.props.article_id, !this.state.read);
     },
     toogleLike: function() {
         this.setState({liked: !this.state.liked});
-        MiddlePanelActions.changeLike(this.props.article_id, !this.state.liked);
+        MiddlePanelActions.changeLike(this.props.category_id,
+                this.props.feed_id, this.props.article_id, !this.state.liked);
     },
 });
 
@@ -100,6 +102,8 @@ var MiddlePanel = React.createClass({
                                         liked={article.liked}
                                         date={article.date}
                                         article_id={article.article_id}
+                                        feed_id={article.feed_id}
+                                        category_id={article.category_id}
                                         feed_title={article.feed_title} />);})}
                     </ListGroup>
                 </Row>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 422b8e5b..d195dc08 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -58,7 +58,6 @@ var RightPanel = React.createClass({
         return <div />;
     },
     componentDidMount: function() {
-        RightPanelActions.reload();
         RightPanelStore.addChangeListener(this._onChange);
     },
     componentWillUnmount: function() {
-- 
cgit 


From df8d1742d7e8ac6a7d238799dda05557fd0d17a9 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 26 Jan 2016 22:43:18 +0100
Subject: optim on filter, not rerendering

---
 src/web/js/components/Menu.react.js        | 21 +++++++--------------
 src/web/js/components/MiddlePanel.react.js | 19 +++++++------------
 2 files changed, 14 insertions(+), 26 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 3e5f4156..09250706 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -121,34 +121,27 @@ var MenuFilter = React.createClass({
         var error_button = null;
         if (this.state.feed_in_error) {
             error_button = (<Button active={this.state.filter == "error"}
-                                onMouseDown={MenuActions.setFilterError}
+                                onMouseDown={() => this.setFilter("error")}
                                 bsSize="small" bsStyle="warning">Error</Button>
             );
         }
         return (<Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={MenuActions.setFilterAll}
+                                onMouseDown={() => this.setFilter("all")}
                                 bsSize="small">All</Button>
                         <Button active={this.state.filter == "unread"}
-                                onMouseDown={MenuActions.setFilterUnread}
+                                onMouseDown={() => this.setFilter("unread")}
                                 bsSize="small">Unread</Button>
                         {error_button}
                     </ButtonGroup>
                 </Row>
         );
     },
-    componentDidMount: function() {
-        MenuStore.addChangeListener(this._onChange);
-    },
-    componentWillUnmount: function() {
-        MenuStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var datas = MenuStore.getAll();
-        this.setState({filter: datas.filter,
-                       feed_in_error: datas.feed_in_error});
-    },
+    setFilter: function(filter) {
+        this.setState({filter: filter});
+        MenuActions.setFilter(filter);
+    }
 });
 
 var Menu = React.createClass({
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 741af5e9..e0ea8110 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -64,27 +64,22 @@ var MiddlePanelFilter = React.createClass({
         return (<Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={MiddlePanelActions.setFilterAll}
+                                onMouseDown={() => this.setFilter("all")}
                                 bsSize="small">All</Button>
                         <Button active={this.state.filter == "unread"}
-                                onMouseDown={MiddlePanelActions.setFilterUnread}
+                                onMouseDown={() => this.setFilter("unread")}
                                 bsSize="small">Unread</Button>
                         <Button active={this.state.filter == "liked"}
-                                onMouseDown={MiddlePanelActions.setFilterLiked}
+                                onMouseDown={() => this.setFilter("liked")}
                                 bsSize="small">Liked</Button>
                     </ButtonGroup>
                 </Row>
         );
     },
-    componentDidMount: function() {
-        MiddlePanelStore.addChangeListener(this._onChange);
-    },
-    componentWillUnmount: function() {
-        MiddlePanelStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        this.setState({filter: MiddlePanelStore._datas.filter});
-    },
+    setFilter: function(filter) {
+        this.setState({filter: filter});
+        MiddlePanelActions.setFilter(filter);
+    }
 });
 
 var MiddlePanel = React.createClass({
-- 
cgit 


From f3578d10239ffa716450c0089bcbc8d2826f59fd Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 26 Jan 2016 23:23:42 +0100
Subject: mark all as read button

---
 src/web/js/components/MiddlePanel.react.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index e0ea8110..756a811b 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -73,6 +73,10 @@ var MiddlePanelFilter = React.createClass({
                                 onMouseDown={() => this.setFilter("liked")}
                                 bsSize="small">Liked</Button>
                     </ButtonGroup>
+                    <ButtonGroup>
+                        <Button onMouseDown={MiddlePanelActions.markAllAsRead}
+                                bsSize="small">Mark all as read</Button>
+                    </ButtonGroup>
                 </Row>
         );
     },
-- 
cgit 


From fdbd077952abe34cde4f9888adaf719a6df7e298 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Wed, 27 Jan 2016 00:40:44 +0100
Subject: revert optimize for menu

can't not rerender on load menu, but it never happens anyway
---
 src/web/js/components/Menu.react.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 09250706..becc7a2e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -141,7 +141,16 @@ var MenuFilter = React.createClass({
     setFilter: function(filter) {
         this.setState({filter: filter});
         MenuActions.setFilter(filter);
-    }
+    },
+    componentDidMount: function() {
+        MenuStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MenuStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        this.setState({feed_in_error: MenuStore._datas.feed_in_error});
+    },
 });
 
 var Menu = React.createClass({
-- 
cgit 


From 370d51244922ba6634831a406e268a6537053a3d Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Wed, 27 Jan 2016 12:36:35 +0100
Subject: bumping react and removing react-bootstrap listgroup which are not
 working wit last react version

---
 src/web/js/components/MainApp.react.js     |  13 +--
 src/web/js/components/Menu.react.js        | 148 ++++++++++++++++-------------
 src/web/js/components/MiddlePanel.react.js |  24 ++---
 3 files changed, 99 insertions(+), 86 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index bd643be1..816e8c82 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/lib/Col');
-var Grid = require('react-bootstrap/lib/Grid');
+var Col = require('react-bootstrap/Col');
+var Row = require('react-bootstrap/Row');
 
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
@@ -9,11 +9,8 @@ var RightPanel = require('./RightPanel.react');
 
 var MainApp = React.createClass({
     render: function() {
-        return (<Grid fluid>
-                    <Col xsHidden smHidden md={3} lg={2}>
-                        <Menu.MenuFilter />
-                        <Menu.Menu />
-                    </Col>
+        return (<Row>
+                    <Menu />
                     <Col xs={2} sm={2} md={4} lg={4}>
                         <MiddlePanel.MiddlePanelFilter />
                         <MiddlePanel.MiddlePanel />
@@ -22,7 +19,7 @@ var MainApp = React.createClass({
                         <RightPanel.RightPanelMenu />
                         <RightPanel.RightPanel />
                     </Col>
-                </Grid>
+                </Row>
        );
     },
 });
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index becc7a2e..4b8c167c 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,11 +1,9 @@
 var React = require('react');
-var Row = require('react-bootstrap/lib/Row');
-var Badge = require('react-bootstrap/lib/Badge');
-var Button = require('react-bootstrap/lib/Button');
-var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
-var ListGroup = require('react-bootstrap/lib/ListGroup');
-var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
-var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Col = require('react-bootstrap/Col');
+var Badge = require('react-bootstrap/Badge');
+var Button = require('react-bootstrap/Button');
+var ButtonGroup = require('react-bootstrap/ButtonGroup');
+var Glyphicon = require('react-bootstrap/Glyphicon');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
@@ -36,10 +34,9 @@ var FeedItem = React.createClass({
         } else if(this.props.error_count > 3) {
             style = "warning";
         }
-        return (<ListGroupItem onMouseDown={this.handleClick} bsStyle={style}
-                               href="#" active={this.props.active}>
+        return (<li onClick={this.handleClick}>
                     {icon}{this.props.title}{badge_unread}
-                </ListGroupItem>
+                </li>
         );
     },
     handleClick: function() {
@@ -48,6 +45,34 @@ var FeedItem = React.createClass({
 });
 
 var Category = React.createClass({
+    propTypes: {category_id: React.PropTypes.number.isRequired,
+                filter: React.PropTypes.string.isRequired,
+                active_type: React.PropTypes.string,
+                active_id: React.PropTypes.number},
+    render: function() {
+        if(this.props.active_type == 'active_id'
+           && this.props.active_id == this.props.category_id) {
+            var classes = "success active";
+        } else {
+            var classes = "success";
+        }
+        return (<li className={classes}>
+                    <h4 onClick={this.handleClick}>
+                        {this.props.children}
+                    </h4>
+                </li>
+        );
+    },
+    handleClick: function() {
+        if(this.props.category_id != null) {
+            MiddlePanelActions.setCategoryFilter(this.props.category_id);
+        } else {
+            MiddlePanelActions.removeParentFilter();
+        }
+    },
+});
+
+var CategoryGroup = React.createClass({
     propTypes: {cat_id: React.PropTypes.number.isRequired,
                 filter: React.PropTypes.string.isRequired,
                 active_type: React.PropTypes.string,
@@ -89,19 +114,18 @@ var Category = React.createClass({
         if(this.props.unread){
             unread = <Badge pullRight>{this.props.unread}</Badge>;
         }
-        var active = a_type == 'category_id' && a_id == this.props.cat_id;
         var ctrl = (<Glyphicon onMouseDown={this.toggleFolding} pullLeft
                         glyph={this.state.unfolded?"menu-down":"menu-right"} />
                     );
 
-        return (<ListGroup>
-                    <ListGroupItem href="#" bsStyle="success"
-                                   active={active}
-                                   onMouseDown={this.handleClick}>
+        return (<ul className="nav nav-sidebar">
+                    <Category category_id={this.props.cat_id}
+                              active_type={this.props.active_id}
+                              active_type={this.props.active_type}>
                         {ctrl} <strong>{this.props.name}</strong> {unread}
-                    </ListGroupItem>
+                    </Category>
                     {feeds}
-                </ListGroup>
+                </ul>
         );
     },
     handleClick: function() {
@@ -114,43 +138,27 @@ var Category = React.createClass({
 });
 
 var MenuFilter = React.createClass({
-    getInitialState: function() {
-        return {filter: 'all', feed_in_error: false};
-    },
+    propTypes: {feed_in_error: React.PropTypes.bool,
+                filter: React.PropTypes.string.isRequired},
     render: function() {
         var error_button = null;
-        if (this.state.feed_in_error) {
-            error_button = (<Button active={this.state.filter == "error"}
-                                onMouseDown={() => this.setFilter("error")}
+        if (this.props.feed_in_error) {
+            error_button = (<Button active={this.props.filter == "error"}
+                                onMouseDown={() => MenuActions.setFilter("error")}
                                 bsSize="small" bsStyle="warning">Error</Button>
             );
         }
-        return (<Row className="show-grid">
-                    <ButtonGroup>
-                        <Button active={this.state.filter == "all"}
-                                onMouseDown={() => this.setFilter("all")}
-                                bsSize="small">All</Button>
-                        <Button active={this.state.filter == "unread"}
-                                onMouseDown={() => this.setFilter("unread")}
-                                bsSize="small">Unread</Button>
-                        {error_button}
-                    </ButtonGroup>
-                </Row>
+        return (<ButtonGroup className="nav nav-sidebar">
+                    <Button active={this.props.filter == "all"}
+                            onMouseDown={() => MenuActions.setFilter("all")}
+                            bsSize="small">All</Button>
+                    <Button active={this.props.filter == "unread"}
+                            onMouseDown={() => MenuActions.setFilter("unread")}
+                            bsSize="small">Unread</Button>
+                    {error_button}
+                </ButtonGroup>
         );
     },
-    setFilter: function(filter) {
-        this.setState({filter: filter});
-        MenuActions.setFilter(filter);
-    },
-    componentDidMount: function() {
-        MenuStore.addChangeListener(this._onChange);
-    },
-    componentWillUnmount: function() {
-        MenuStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        this.setState({feed_in_error: MenuStore._datas.feed_in_error});
-    },
 });
 
 var Menu = React.createClass({
@@ -160,25 +168,36 @@ var Menu = React.createClass({
     },
     render: function() {
         var state = this.state;
-        var rmPrntFilt = (<ListGroupItem href="#" bsStyle="success"
-                active={this.state.active_type == null
-                        || this.state.active_id == null}
-                onMouseDown={MiddlePanelActions.removeParentFilter}
-                header="All"></ListGroupItem>);
+        if (this.state.active_type == null || this.state.active_id == null) {
+            var all_classname = "success active";
+        } else {
+            var all_classname = "success";
+        }
+        var rmPrntFilt = (
+                <ul className="nav nav-sidebar">
+                    <Category category_id={null}
+                              active_type={this.props.active_id}
+                              active_type={this.props.active_type}>
+                        <strong>All</strong>
+                    </Category>
+                </ul>
+        );
 
-        return (<Row className="show-grid">
-                    <ListGroup>{rmPrntFilt}</ListGroup>
+        return (<Col xsHidden smHidden md={3} lg={2} className="show-grid sidebar">
+                    <MenuFilter filter={this.state.filter}
+                                feed_in_error={this.state.feed_in_error} />
+                    {rmPrntFilt}
                     {this.state.categories.map(function(category){
-                        return (<Category key={"c" + category.id}
-                                            filter={state.filter}
-                                            active_type={state.active_type}
-                                            active_id={state.active_id}
-                                            cat_id={category.id}
-                                            feeds={category.feeds}
-                                            name={category.name}
-                                            unread={category.unread} />);
+                        return (<CategoryGroup key={"c" + category.id}
+                                               filter={state.filter}
+                                               active_type={state.active_type}
+                                               active_id={state.active_id}
+                                               cat_id={category.id}
+                                               feeds={category.feeds}
+                                               name={category.name}
+                                               unread={category.unread} />);
                         })}
-                </Row>
+                </Col>
         );
     },
     componentDidMount: function() {
@@ -194,8 +213,9 @@ var Menu = React.createClass({
                        categories: datas.categories,
                        active_type: datas.active_type,
                        active_id: datas.active_id,
+                       feed_in_error: datas.feed_in_error,
                        all_unread_count: datas.all_unread_count});
     },
 });
 
-module.exports = {Menu: Menu, MenuFilter: MenuFilter};
+module.exports = Menu;
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 756a811b..0a1dad45 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,10 +1,8 @@
 var React = require('react');
-var Row = require('react-bootstrap/lib/Row');
-var Button = require('react-bootstrap/lib/Button');
-var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
-var ListGroup = require('react-bootstrap/lib/ListGroup');
-var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
-var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Row = require('react-bootstrap/Row');
+var Button = require('react-bootstrap/Button');
+var ButtonGroup = require('react-bootstrap/ButtonGroup');
+var Glyphicon = require('react-bootstrap/Glyphicon');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
@@ -36,12 +34,10 @@ var TableLine = React.createClass({
                                onClick={this.toogleRead} />);
         var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                 onClick={this.toogleLike} />);
-        return (
-                <ListGroupItem header={title}>
-                            {read}
-                            {liked}
-                    {this.props.title}
-                </ListGroupItem>
+        return (<div className="list-group-item">
+                    <h4>{title}</h4>
+                    {read} {liked} {this.props.title}
+                </div>
         );
     },
     toogleRead: function() {
@@ -92,7 +88,7 @@ var MiddlePanel = React.createClass({
     },
     render: function() {
         return (<Row className="show-grid">
-                    <ListGroup>
+                    <div className="list-group">
                     {this.state.articles.map(function(article){
                         return (<TableLine key={"a" + article.article_id}
                                         title={article.title}
@@ -104,7 +100,7 @@ var MiddlePanel = React.createClass({
                                         feed_id={article.feed_id}
                                         category_id={article.category_id}
                                         feed_title={article.feed_title} />);})}
-                    </ListGroup>
+                    </div>
                 </Row>
         );
     },
-- 
cgit 


From c3d6c25e52e37d772286f293f94a5dd7e1059529 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Wed, 27 Jan 2016 17:14:23 +0100
Subject: redoing UI and finishing up sidebar

---
 src/web/js/components/MainApp.react.js |  6 ++-
 src/web/js/components/Menu.react.js    | 92 ++++++++++++++++++----------------
 2 files changed, 52 insertions(+), 46 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 816e8c82..72504d89 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -11,11 +11,13 @@ var MainApp = React.createClass({
     render: function() {
         return (<Row>
                     <Menu />
-                    <Col 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 xs={10} sm={10} md={8} lg={8}>
+                    <Col id="right-panel"
+                        xs={10} sm={10} md={8} lg={8}>
                         <RightPanel.RightPanelMenu />
                         <RightPanel.RightPanel />
                     </Col>
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 4b8c167c..75255d41 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -29,13 +29,18 @@ var FeedItem = React.createClass({
         if(this.props.unread){
             badge_unread = <Badge pullRight>{this.props.unread}</Badge>;
         }
+        var classes = "nav-feed";
+        if(this.props.active) {
+            classes += " bg-primary";
+        }
         if(this.props.error_count == 6) {
-            style = "danger";
+            classes += " bg-danger";
         } else if(this.props.error_count > 3) {
-            style = "warning";
+            classes += " bg-warning";
         }
-        return (<li onClick={this.handleClick}>
-                    {icon}{this.props.title}{badge_unread}
+        var title = <span className="title">{this.props.title}</span>;
+        return (<li className={classes} onClick={this.handleClick}>
+                    {icon}{title}{badge_unread}
                 </li>
         );
     },
@@ -45,25 +50,26 @@ var FeedItem = React.createClass({
 });
 
 var Category = React.createClass({
-    propTypes: {category_id: React.PropTypes.number.isRequired,
-                filter: React.PropTypes.string.isRequired,
+    propTypes: {category_id: React.PropTypes.number,
                 active_type: React.PropTypes.string,
-                active_id: React.PropTypes.number},
+                active_id: React.PropTypes.number,
+                glyph: React.PropTypes.object},
     render: function() {
-        if(this.props.active_type == 'active_id'
+        var classes = "nav-cat";
+        if((this.props.active_type == 'category_id'
+            || this.props.category_id == null)
            && this.props.active_id == this.props.category_id) {
-            var classes = "success active";
-        } else {
-            var classes = "success";
+            classes += " bg-primary";
         }
         return (<li className={classes}>
+                    {this.props.glyph}
                     <h4 onClick={this.handleClick}>
                         {this.props.children}
                     </h4>
                 </li>
         );
     },
-    handleClick: function() {
+    handleClick: function(evnt) {
         if(this.props.category_id != null) {
             MiddlePanelActions.setCategoryFilter(this.props.category_id);
         } else {
@@ -88,25 +94,25 @@ var CategoryGroup = React.createClass({
         var filter = this.props.filter;
         var a_type = this.props.active_type;
         var a_id = this.props.active_id;
-        // filtering according to this.props.filter
         if(this.state.unfolded) {
-        var feeds = this.props.feeds.filter(function(feed) {
-            if (filter == 'unread' && feed.unread <= 0) {
-                return false;
-            } else if (filter == 'error' && feed.error_count <= 3) {
-                return false;
-            }
-            return true;
-        }).sort(function(feed_a, feed_b){
-            return feed_b.unread - feed_a.unread;
-        }).map(function(feed) {
-            return (<FeedItem key={"f" + feed.id} feed_id={feed.id}
-                              title={feed.title} unread={feed.unread}
-                              error_count={feed.error_count}
-                              active={a_type == 'feed_id' && a_id == feed.id}
-                              icon_url={feed.icon_url} />
-            );
-        });
+            // filtering according to this.props.filter
+            var feeds = this.props.feeds.filter(function(feed) {
+                if (filter == 'unread' && feed.unread <= 0) {
+                    return false;
+                } else if (filter == 'error' && feed.error_count <= 3) {
+                    return false;
+                }
+                return true;
+            }).sort(function(feed_a, feed_b){
+                return feed_b.unread - feed_a.unread;
+            }).map(function(feed) {
+                return (<FeedItem key={"f" + feed.id} feed_id={feed.id}
+                                title={feed.title} unread={feed.unread}
+                                error_count={feed.error_count}
+                                active={a_type == 'feed_id' && a_id == feed.id}
+                                icon_url={feed.icon_url} />
+                );
+            });
         } else {
             var feeds = [];
         }
@@ -120,9 +126,10 @@ var CategoryGroup = React.createClass({
 
         return (<ul className="nav nav-sidebar">
                     <Category category_id={this.props.cat_id}
-                              active_type={this.props.active_id}
-                              active_type={this.props.active_type}>
-                        {ctrl} <strong>{this.props.name}</strong> {unread}
+                              active_id={this.props.active_id}
+                              active_type={this.props.active_type}
+                              glyph={ctrl}>
+                        <strong>{this.props.name}</strong> {unread}
                     </Category>
                     {feeds}
                 </ul>
@@ -143,9 +150,10 @@ var MenuFilter = React.createClass({
     render: function() {
         var error_button = null;
         if (this.props.feed_in_error) {
-            error_button = (<Button active={this.props.filter == "error"}
-                                onMouseDown={() => MenuActions.setFilter("error")}
-                                bsSize="small" bsStyle="warning">Error</Button>
+            error_button = (
+                    <Button active={this.props.filter == "error"}
+                            onMouseDown={() => MenuActions.setFilter("error")}
+                            bsSize="small" bsStyle="warning">Error</Button>
             );
         }
         return (<ButtonGroup className="nav nav-sidebar">
@@ -168,22 +176,18 @@ var Menu = React.createClass({
     },
     render: function() {
         var state = this.state;
-        if (this.state.active_type == null || this.state.active_id == null) {
-            var all_classname = "success active";
-        } else {
-            var all_classname = "success";
-        }
         var rmPrntFilt = (
                 <ul className="nav nav-sidebar">
                     <Category category_id={null}
-                              active_type={this.props.active_id}
-                              active_type={this.props.active_type}>
+                              active_id={this.state.active_id}
+                              active_type={this.state.active_type}>
                         <strong>All</strong>
                     </Category>
                 </ul>
         );
 
-        return (<Col xsHidden smHidden md={3} lg={2} className="show-grid sidebar">
+        return (<Col xsHidden smHidden md={3} lg={2} data-spy="affix"
+                     id="menu" className="show-grid sidebar">
                     <MenuFilter filter={this.state.filter}
                                 feed_in_error={this.state.feed_in_error} />
                     {rmPrntFilt}
-- 
cgit 


From 9ac90ba4bb85e2fab5cfc73ad9d6f3ec71c5b854 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 11:44:20 +0100
Subject: restoring build command

---
 src/web/js/components/Menu.react.js        | 16 ++++++++++++----
 src/web/js/components/MiddlePanel.react.js | 22 +++++++++++++++-------
 2 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 75255d41..f699f92e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -20,7 +20,6 @@ var FeedItem = React.createClass({
     render: function() {
         var icon = null;
         var badge_unread = null;
-        var style = null;
         if(this.props.icon_url){
             icon = (<img width="16px" src={this.props.icon_url} />);
         } else {
@@ -152,21 +151,30 @@ var MenuFilter = React.createClass({
         if (this.props.feed_in_error) {
             error_button = (
                     <Button active={this.props.filter == "error"}
-                            onMouseDown={() => MenuActions.setFilter("error")}
+                            onMouseDown={this.setErrorFilter}
                             bsSize="small" bsStyle="warning">Error</Button>
             );
         }
         return (<ButtonGroup className="nav nav-sidebar">
                     <Button active={this.props.filter == "all"}
-                            onMouseDown={() => MenuActions.setFilter("all")}
+                            onMouseDown={this.setAllFilter}
                             bsSize="small">All</Button>
                     <Button active={this.props.filter == "unread"}
-                            onMouseDown={() => MenuActions.setFilter("unread")}
+                            onMouseDown={this.setUnreadFilter}
                             bsSize="small">Unread</Button>
                     {error_button}
                 </ButtonGroup>
         );
     },
+    setAllFilter: function() {
+        MenuActions.setFilter("all");
+    },
+    setUnreadFilter: function() {
+        MenuActions.setFilter("unread");
+    },
+    setErrorFilter: function() {
+        MenuActions.setFilter("error");
+    },
 });
 
 var Menu = React.createClass({
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 0a1dad45..01c8b696 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -60,13 +60,13 @@ var MiddlePanelFilter = React.createClass({
         return (<Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={() => this.setFilter("all")}
+                                onMouseDown={this.setAllFilter}
                                 bsSize="small">All</Button>
                         <Button active={this.state.filter == "unread"}
-                                onMouseDown={() => this.setFilter("unread")}
+                                onMouseDown={this.setUnreadFilter}
                                 bsSize="small">Unread</Button>
                         <Button active={this.state.filter == "liked"}
-                                onMouseDown={() => this.setFilter("liked")}
+                                onMouseDown={this.setLikedFilter}
                                 bsSize="small">Liked</Button>
                     </ButtonGroup>
                     <ButtonGroup>
@@ -76,10 +76,18 @@ var MiddlePanelFilter = React.createClass({
                 </Row>
         );
     },
-    setFilter: function(filter) {
-        this.setState({filter: filter});
-        MiddlePanelActions.setFilter(filter);
-    }
+    setAllFilter: function() {
+        this.setState({filter: 'all'});
+        MiddlePanelActions.setFilter('all');
+    },
+    setUnreadFilter: function() {
+        this.setState({filter: 'unread'});
+        MiddlePanelActions.setFilter('unread');
+    },
+    setLikedFilter: function() {
+        this.setState({filter: 'liked'});
+        MiddlePanelActions.setFilter('liked');
+    },
 });
 
 var MiddlePanel = React.createClass({
-- 
cgit 


From 5c8f9fd0376afc034251a73023e43ada4041aa34 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 14:36:26 +0100
Subject: implementing search through articles

---
 src/web/js/components/MiddlePanel.react.js | 84 ++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 3 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 01c8b696..b2107383 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -52,12 +52,75 @@ var TableLine = React.createClass({
     },
 });
 
+var MiddlePanelSearchRow = React.createClass({
+    getInitialState: function() {
+        return {query: MiddlePanelStore._datas.query,
+                search_title: MiddlePanelStore._datas.search_title,
+                search_content: MiddlePanelStore._datas.search_content,
+        };
+    },
+    render: function() {
+        return (<Row>
+                    <form onSubmit={this.launchSearch}>
+                    <div className="input-group input-group-sm">
+                        <span className="input-group-addon">
+                            <span onClick={this.toogleSTitle}>Title</span>
+                            <input id="search-title" type="checkbox"
+                                   onChange={this.toogleSTitle}
+                                   checked={this.state.search_title}
+                                   aria-label="Search title" />
+                        </span>
+                        <span className="input-group-addon">
+                            <span onClick={this.toogleSContent}>Content</span>
+                            <input id="search-content" type="checkbox"
+                                   onChange={this.toogleSContent}
+                                   checked={this.state.search_content}
+                                   aria-label="Search content" />
+                        </span>
+                        <input type="text" className="form-control"
+                               onChange={this.setQuery}
+                               placeholder="Search text" />
+                    </div>
+                    </form>
+                </Row>
+        );
+    },
+    setQuery: function(evnt) {
+        this.setState({query: evnt.target.value});
+    },
+    toogleSTitle: function() {
+        this.setState({search_title: !this.state.search_title},
+                      this.launchSearch);
+    },
+    toogleSContent: function() {
+        this.setState({search_content: !this.state.search_content},
+                      this.launchSearch);
+    },
+    launchSearch: function(evnt) {
+        if(this.state.query && (this.state.search_title
+                             || this.state.search_content)) {
+            MiddlePanelActions.search({query: this.state.query,
+                                       title: this.state.search_title,
+                                       content: this.state.search_content});
+        }
+        if(evnt) {
+            evnt.preventDefault();
+        }
+    },
+});
+
 var MiddlePanelFilter = React.createClass({
     getInitialState: function() {
-        return {filter: MiddlePanelStore._datas.filter};
+        return {filter: MiddlePanelStore._datas.filter,
+                display_search: MiddlePanelStore._datas.display_search};
     },
     render: function() {
-        return (<Row className="show-grid">
+        var search_row = null;
+        if(this.state.display_search) {
+            search_row = <MiddlePanelSearchRow />
+        }
+        return (<div>
+                <Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
                                 onMouseDown={this.setAllFilter}
@@ -67,13 +130,22 @@ var MiddlePanelFilter = React.createClass({
                                 bsSize="small">Unread</Button>
                         <Button active={this.state.filter == "liked"}
                                 onMouseDown={this.setLikedFilter}
-                                bsSize="small">Liked</Button>
+                                bsSize="small">
+                            <Glyphicon glyph="star" />
+                        </Button>
+                    </ButtonGroup>
+                    <ButtonGroup>
+                        <Button onMouseDown={this.toogleSearch} bsSize="small">
+                            <Glyphicon glyph="search" />
+                        </Button>
                     </ButtonGroup>
                     <ButtonGroup>
                         <Button onMouseDown={MiddlePanelActions.markAllAsRead}
                                 bsSize="small">Mark all as read</Button>
                     </ButtonGroup>
                 </Row>
+                {search_row}
+                </div>
         );
     },
     setAllFilter: function() {
@@ -88,6 +160,12 @@ var MiddlePanelFilter = React.createClass({
         this.setState({filter: 'liked'});
         MiddlePanelActions.setFilter('liked');
     },
+    toogleSearch: function() {
+        if(this.state.display_search) {
+            MiddlePanelActions.search_off();
+        }
+        this.setState({display_search: !this.state.display_search});
+    },
 });
 
 var MiddlePanel = React.createClass({
-- 
cgit 


From bf2d4e57c2883ff241e73b156bc16dea10893387 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 16:03:11 +0100
Subject: pretty icons

---
 src/web/js/components/Menu.react.js        | 18 +++++++++++++-----
 src/web/js/components/MiddlePanel.react.js | 22 +++++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index f699f92e..91e9ff9e 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -32,7 +32,7 @@ var FeedItem = React.createClass({
         if(this.props.active) {
             classes += " bg-primary";
         }
-        if(this.props.error_count == 6) {
+        if(this.props.error_count >= 6) {
             classes += " bg-danger";
         } else if(this.props.error_count > 3) {
             classes += " bg-warning";
@@ -151,17 +151,25 @@ var MenuFilter = React.createClass({
         if (this.props.feed_in_error) {
             error_button = (
                     <Button active={this.props.filter == "error"}
+                            title="Some of your feeds are in error, click here to list them"
                             onMouseDown={this.setErrorFilter}
-                            bsSize="small" bsStyle="warning">Error</Button>
+                            bsSize="small" bsStyle="warning">
+                        <Glyphicon glyph="exclamation-sign" />
+                    </Button>
             );
         }
         return (<ButtonGroup className="nav nav-sidebar">
                     <Button active={this.props.filter == "all"}
-                            onMouseDown={this.setAllFilter}
-                            bsSize="small">All</Button>
+                            title="Display all feeds"
+                            onMouseDown={this.setAllFilter} bsSize="small">
+                        <Glyphicon glyph="menu-hamburger" />
+                    </Button>
                     <Button active={this.props.filter == "unread"}
+                            title="Display only feed with unread article"
                             onMouseDown={this.setUnreadFilter}
-                            bsSize="small">Unread</Button>
+                            bsSize="small">
+                        <Glyphicon glyph="unchecked" />
+                    </Button>
                     {error_button}
                 </ButtonGroup>
         );
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index b2107383..d2c4df5b 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -119,29 +119,41 @@ var MiddlePanelFilter = React.createClass({
         if(this.state.display_search) {
             search_row = <MiddlePanelSearchRow />
         }
+        var delay = 750;
         return (<div>
                 <Row className="show-grid">
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
-                                onMouseDown={this.setAllFilter}
-                                bsSize="small">All</Button>
+                                title="Display all articles"
+                                onMouseDown={this.setAllFilter} bsSize="small">
+                            <Glyphicon glyph="menu-hamburger" />
+                        </Button>
                         <Button active={this.state.filter == "unread"}
+                                title="Display only unread article"
                                 onMouseDown={this.setUnreadFilter}
-                                bsSize="small">Unread</Button>
+                                bsSize="small">
+                            <Glyphicon glyph="unchecked" />
+                        </Button>
                         <Button active={this.state.filter == "liked"}
+                                title="Filter only liked articles"
                                 onMouseDown={this.setLikedFilter}
                                 bsSize="small">
                             <Glyphicon glyph="star" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
-                        <Button onMouseDown={this.toogleSearch} bsSize="small">
+                        <Button onMouseDown={this.toogleSearch}
+                                title="Search through displayed articles"
+                                bsSize="small">
                             <Glyphicon glyph="search" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
                         <Button onMouseDown={MiddlePanelActions.markAllAsRead}
-                                bsSize="small">Mark all as read</Button>
+                                title="Mark all displayed article as read"
+                                bsSize="small">
+                            <Glyphicon glyph="trash" />
+                        </Button>
                     </ButtonGroup>
                 </Row>
                 {search_row}
-- 
cgit 


From 0e3971f287bd674445ac37b57e93197a5fff955a Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 18:27:03 +0100
Subject: fixing menu folding

---
 src/web/js/components/Menu.react.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 91e9ff9e..32197b3d 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -51,8 +51,7 @@ var FeedItem = React.createClass({
 var Category = React.createClass({
     propTypes: {category_id: React.PropTypes.number,
                 active_type: React.PropTypes.string,
-                active_id: React.PropTypes.number,
-                glyph: React.PropTypes.object},
+                active_id: React.PropTypes.number},
     render: function() {
         var classes = "nav-cat";
         if((this.props.active_type == 'category_id'
@@ -60,19 +59,19 @@ var Category = React.createClass({
            && this.props.active_id == this.props.category_id) {
             classes += " bg-primary";
         }
-        return (<li className={classes}>
-                    {this.props.glyph}
-                    <h4 onClick={this.handleClick}>
-                        {this.props.children}
-                    </h4>
+        return (<li className={classes} onClick={this.handleClick}>
+                    {this.props.children}
                 </li>
         );
     },
     handleClick: function(evnt) {
-        if(this.props.category_id != null) {
-            MiddlePanelActions.setCategoryFilter(this.props.category_id);
-        } else {
-            MiddlePanelActions.removeParentFilter();
+        // hack to avoid selection when clicking on folding icon
+        if(!evnt.target.classList.contains('glyphicon')) {
+            if(this.props.category_id != null) {
+                MiddlePanelActions.setCategoryFilter(this.props.category_id);
+            } else {
+                MiddlePanelActions.removeParentFilter();
+            }
         }
     },
 });
@@ -126,9 +125,8 @@ var CategoryGroup = React.createClass({
         return (<ul className="nav nav-sidebar">
                     <Category category_id={this.props.cat_id}
                               active_id={this.props.active_id}
-                              active_type={this.props.active_type}
-                              glyph={ctrl}>
-                        <strong>{this.props.name}</strong> {unread}
+                              active_type={this.props.active_type}>
+                        {ctrl}<h4>{this.props.name}</h4>{unread}
                     </Category>
                     {feeds}
                 </ul>
@@ -197,7 +195,7 @@ var Menu = React.createClass({
                     <Category category_id={null}
                               active_id={this.state.active_id}
                               active_type={this.state.active_type}>
-                        <strong>All</strong>
+                        <h4>All</h4>
                     </Category>
                 </ul>
         );
-- 
cgit 


From 577b79d1d2a8d4de949ffc5f312cfb90bd97ed26 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 21:18:38 +0100
Subject: slight redo of middle panel

---
 src/web/js/components/MiddlePanel.react.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index d2c4df5b..4fe14c09 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -35,20 +35,22 @@ var TableLine = React.createClass({
         var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                 onClick={this.toogleLike} />);
         return (<div className="list-group-item">
-                    <h4>{title}</h4>
-                    {read} {liked} {this.props.title}
+                    <h5><strong>{title}</strong></h5><div />
+                    <div>{read} {liked} {this.props.title}</div>
                 </div>
         );
     },
     toogleRead: function() {
-        this.setState({read: !this.state.read});
-        MiddlePanelActions.changeRead(this.props.category_id,
-                this.props.feed_id, this.props.article_id, !this.state.read);
+        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));
     },
     toogleLike: function() {
-        this.setState({liked: !this.state.liked});
-        MiddlePanelActions.changeLike(this.props.category_id,
-                this.props.feed_id, this.props.article_id, !this.state.liked);
+        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));
     },
 });
 
-- 
cgit 


From 8e942f6f5695c4788328b4959527b30ff31e771d Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Thu, 28 Jan 2016 22:47:36 +0100
Subject: redoing menu, sorting in place and not in python

---
 src/web/js/components/Menu.react.js | 39 ++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 32197b3d..d0bd719d 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -132,9 +132,6 @@ var CategoryGroup = React.createClass({
                 </ul>
         );
     },
-    handleClick: function() {
-        MiddlePanelActions.setCategoryFilter(this.props.cat_id);
-    },
     toggleFolding: function(evnt) {
         this.setState({unfolded: !this.state.unfolded});
         evnt.stopPropagation();
@@ -185,11 +182,11 @@ var MenuFilter = React.createClass({
 
 var Menu = React.createClass({
     getInitialState: function() {
-        return {filter: 'all', categories: [], all_unread_count: 0,
+        return {filter: 'all', categories: {}, feeds: {},
                 active_type: null, active_id: null};
     },
     render: function() {
-        var state = this.state;
+        var feed_in_error = false;
         var rmPrntFilt = (
                 <ul className="nav nav-sidebar">
                     <Category category_id={null}
@@ -199,22 +196,29 @@ var Menu = React.createClass({
                     </Category>
                 </ul>
         );
+        var categories = [];
+        for(var cat_id in this.state.categories) {
+            var feeds = [];
+            var unread = 0;
+            this.state.categories[cat_id].feeds.map(function(feed_id) {
+                unread += this.state.feeds[feed_id].unread;
+                feeds.push(this.state.feeds[feed_id]);
+            }.bind(this));
+            categories.push(<CategoryGroup key={"c" + cat_id} feeds={feeds}
+                                    filter={this.state.filter}
+                                    active_type={this.state.active_type}
+                                    active_id={this.state.active_id}
+                                    name={this.state.categories[cat_id].name}
+                                    cat_id={this.state.categories[cat_id].id}
+                                    unread={unread} />);
+        }
 
         return (<Col xsHidden smHidden md={3} lg={2} data-spy="affix"
                      id="menu" className="show-grid sidebar">
                     <MenuFilter filter={this.state.filter}
                                 feed_in_error={this.state.feed_in_error} />
                     {rmPrntFilt}
-                    {this.state.categories.map(function(category){
-                        return (<CategoryGroup key={"c" + category.id}
-                                               filter={state.filter}
-                                               active_type={state.active_type}
-                                               active_id={state.active_id}
-                                               cat_id={category.id}
-                                               feeds={category.feeds}
-                                               name={category.name}
-                                               unread={category.unread} />);
-                        })}
+                    {categories}
                 </Col>
         );
     },
@@ -228,11 +232,10 @@ var Menu = React.createClass({
     _onChange: function() {
         var datas = MenuStore.getAll();
         this.setState({filter: datas.filter,
+                       feeds: datas.feeds,
                        categories: datas.categories,
                        active_type: datas.active_type,
-                       active_id: datas.active_id,
-                       feed_in_error: datas.feed_in_error,
-                       all_unread_count: datas.all_unread_count});
+                       active_id: datas.active_id});
     },
 });
 
-- 
cgit 


From 56ab5f6df51ff301a4dccc458eb83917bba49afc Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 00:27:47 +0100
Subject: wip right panel

---
 src/web/js/components/MainApp.react.js    |  16 ++--
 src/web/js/components/Menu.react.js       |   9 ++-
 src/web/js/components/RightPanel.react.js | 121 ++++++++++++++++++++++--------
 3 files changed, 101 insertions(+), 45 deletions(-)

(limited to 'src/web/js/components')

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;
-- 
cgit 


From 5eae4cb235abed7a6e8c6ab81226def9dddc0af2 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 13:02:49 +0100
Subject: correcting awful middle panel action handling

---
 src/web/js/components/MiddlePanel.react.js | 26 ++++++++++++++++----------
 src/web/js/components/RightPanel.react.js  |  2 +-
 2 files changed, 17 insertions(+), 11 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 4fe14c09..a46d7346 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -163,22 +163,28 @@ var MiddlePanelFilter = React.createClass({
         );
     },
     setAllFilter: function() {
-        this.setState({filter: 'all'});
-        MiddlePanelActions.setFilter('all');
+        this.setState({filter: 'all'}, function() {
+            MiddlePanelActions.setFilter('all');
+        }.bind(this));
     },
     setUnreadFilter: function() {
-        this.setState({filter: 'unread'});
-        MiddlePanelActions.setFilter('unread');
+        this.setState({filter: 'unread'}, function() {
+            MiddlePanelActions.setFilter('unread');
+        }.bind(this));
     },
     setLikedFilter: function() {
-        this.setState({filter: 'liked'});
-        MiddlePanelActions.setFilter('liked');
+        this.setState({filter: 'liked'}, function() {
+            MiddlePanelActions.setFilter('liked');
+        }.bind(this));
     },
     toogleSearch: function() {
-        if(this.state.display_search) {
-            MiddlePanelActions.search_off();
-        }
-        this.setState({display_search: !this.state.display_search});
+        this.setState({display_search: !this.state.display_search},
+            function() {
+                if(!this.state.display_search) {
+                    MiddlePanelActions.search_off();
+                }
+            }.bind(this)
+        );
     },
 });
 
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index a1e15e94..00e2dd54 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -21,7 +21,7 @@ var Feed = React.createClass({
         var header = (<h4>
                         {icon}<strong>Title:</strong> {this.props.feed.title}
                       </h4>);
-        return (<Panel header={header}>
+        return (<Panel collapsible defaultExpanded header={header}>
                     <dl className="dl-horizontal">
                         <dt>Description</dt>
                         <dd>{this.props.feed.description}</dd>
-- 
cgit 


From 4098a0de815013c521618b6419d91f997c986ef0 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 14:26:02 +0100
Subject: draft displaying article

---
 src/web/js/components/MiddlePanel.react.js | 12 ++++--
 src/web/js/components/RightPanel.react.js  | 64 ++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 23 deletions(-)

(limited to 'src/web/js/components')

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);
-- 
cgit 


From d1760c9c0f4cd23bf81d15f176f371fed08e6255 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 18:05:06 +0100
Subject: cleaning warnings

---
 src/web/js/components/MiddlePanel.react.js | 1 -
 src/web/js/components/RightPanel.react.js  | 1 -
 2 files changed, 2 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 199316e6..90e11859 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -127,7 +127,6 @@ var MiddlePanelFilter = React.createClass({
         if(this.state.display_search) {
             search_row = <MiddlePanelSearchRow />
         }
-        var delay = 750;
         return (<div>
                 <Row className="show-grid">
                     <ButtonGroup>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 328bc6b1..a18f0ac3 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -2,7 +2,6 @@ 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},
-- 
cgit 


From 4c5415754593986d1540820d13dfa34a34ffeed6 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 20:28:10 +0100
Subject: impact on menus when loading article

---
 src/web/js/components/MiddlePanel.react.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

(limited to 'src/web/js/components')

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}
-- 
cgit 


From 6d681cba9d4da213d3de727570f17d2361f599de Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Fri, 29 Jan 2016 21:08:31 +0100
Subject: displaying date on middle panel

---
 src/web/js/components/MiddlePanel.react.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/web/js/components')

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>
-- 
cgit 


From f334fb4b355d90cbf0b8d9e658a87ebeec7fbe90 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sat, 30 Jan 2016 01:44:13 +0100
Subject: wip redoing feed panel

---
 src/web/js/components/MiddlePanel.react.js |  12 +-
 src/web/js/components/RightPanel.react.js  | 252 +++++++++++++++++++++++------
 src/web/js/components/time.react.js        |  15 ++
 3 files changed, 224 insertions(+), 55 deletions(-)
 create mode 100644 src/web/js/components/time.react.js

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 6b3eb427..6bfdaaa9 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,6 +1,4 @@
 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');
@@ -11,8 +9,9 @@ var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
 var RightPanelActions = require('../actions/RightPanelActions');
 
+var JarrTime = require('./time.react');
+
 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,
@@ -49,11 +48,10 @@ var TableLine = React.createClass({
         }
         // 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>{date}
+                    <h5><strong>{title}</strong></h5>
+                    <JarrTime text={this.props.date}
+                              stamp={this.props.timestamp} />
                     <div>{read} {liked} {this.props.title}</div>
                 </div>
         );
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index a18f0ac3..2e2aac3e 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,70 +1,223 @@
 var React = require('react');
 var Col = require('react-bootstrap/Col');
-var Panel = require('react-bootstrap/Panel');
+var Glyphicon = require('react-bootstrap/Glyphicon');
+var Button = require('react-bootstrap/Button');
+var ButtonGroup = require('react-bootstrap/ButtonGroup');
+
 var RightPanelStore = require('../stores/RightPanelStore');
+var JarrTime = require('./time.react');
 
-var Article = React.createClass({
-    propTypes: {article: React.PropTypes.object.isRequired},
-    render: function() {
+var PanelMixin = {
+    propTypes: {obj: React.PropTypes.object.isRequired},
+    getHeader: function() {
         var icon = null;
-        if(this.props.article.icon_url){
-            icon = (<img width="16px" src={this.props.article.icon_url} />);
+        if(this.props.obj.icon_url){
+            icon = (<img width="16px" src={this.props.obj.icon_url} />);
+        }
+        var btn_grp = null;
+        if(this.isEditable() || this.isRemovable()) {
+            var edit_button = null;
+            if(this.isEditable()) {
+                edit_button = (<Button onClick={this.onClickEdit}>
+                                <Glyphicon glyph="pencil" />
+                               </Button>);
+            }
+            var rem_button = null;
+            if(this.isRemovable()) {
+                rem_button = (<Button onClick={this.onClickRemove}>
+                                <Glyphicon glyph="remove-sign" />
+                              </Button>);
+            }
+            btn_grp = (<ButtonGroup bsSize="small">
+                           {edit_button}
+                           {rem_button}
+                       </ButtonGroup>);
         }
-        var header = (<h4>
-                        {icon}<strong>Title:</strong> {this.props.article.title}
-                      </h4>);
-        return (<Panel header={header}>
-                    <div dangerouslySetInnerHTML={{__html: this.props.article.content}} />
-                </Panel>
+        return (<div id="right-panel-heading" className="panel-heading">
+                    <h4>{icon}<strong>Title:</strong> {this.getTitle()}</h4>
+                    {btn_grp}
+               </div>);
+    },
+    getKey: function(prefix, suffix) {
+        return ((this.state.edit_mode?'edit':'fix') + prefix
+                + '-' + this.props.obj.id + '-' + suffix);
+    },
+    getCore: function() {
+        var items = [];
+        var key;
+        if(!this.state.edit_mode) {
+        this.fields.map(function(field) {
+            key = this.getKey('dt', field.key);
+            items.push(<dt key={key}>{field.title}</dt>);
+            key = this.getKey('dd', field.key);
+            if(field.type == 'string') {
+                items.push(<dd key={key}>{this.props.obj[field.key]}</dd>);
+            } else if(field.type == 'bool') {
+                if(this.props.obj[field.key]) {
+                    items.push(<dd key={key}><Glyphicon glyph="ok" /></dd>);
+                } else {
+                    items.push(<dd key={key}><Glyphicon glyph="pause" /></dd>);
+                }
+            } else if (field.type == 'link') {
+                items.push(<dd key={key}>
+                              <a href={this.props.obj[field.key]}>
+                            {this.props.obj[field.key]}
+                              </a>
+                           </dd>);
+            }
+        }.bind(this));
+        } else {
+        this.fields.map(function(field) {
+            key = this.getKey('dd', field.key);
+            items.push(<dt key={key}>{field.title}</dt>);
+            key = this.getKey('dt', field.key);
+            if(field.type == 'string' || field.type == 'link') {
+                items.push(<dd key={key}><input type="text"
+                                    defaultValue={this.props.obj[field.key]} />
+                           </dd>);
+            } else if (field.type == 'bool') {
+                items.push(<dd key={key}><input type="checkbox"
+                           defaultChecked={this.props.obj[field.key]} /></dd>);
+            }
+        }.bind(this));
+            items.push(<dd key={this.getKey('dd', 'submit')}>
+                           <button className="btn btn-default">
+                               Submit
+                           </button>
+                       </dd>);
+        }
+        return (<dl className="dl-horizontal">{items}</dl>);
+    },
+    render: function() {
+        return (<div className="panel panel-default">
+                    {this.getHeader()}
+                    {this.getBody()}
+                </div>
         );
     },
+    onClickEdit: function() {
+        this.setState({edit_mode: !this.state.edit_mode});
+    },
+    onClickRemove: function() {
+    },
+};
+
+var Article = React.createClass({
+    mixins: [PanelMixin],
+    getInitialState: function() {return {edit_mode: false};},
+    fields: [],
+    isEditable: function() {return false;},
+    isRemovable: function() {return true;},
+    getTitle: function() {return this.props.obj.title;},
+    getBody: function() {
+        return (<div className="panel-body" dangerouslySetInnerHTML={
+                        {__html: this.props.obj.content}} />);
+    },
 });
 
 var Feed = React.createClass({
-    propTypes: {feed: React.PropTypes.object.isRequired},
-    render: function() {
-        var icon = null;
-        if(this.props.feed.icon_url){
-            icon = (<img width="16px" src={this.props.feed.icon_url} />);
+    mixins: [PanelMixin],
+    getInitialState: function() {
+        return {edit_mode: false, filters: this.props.obj.filters};
+    },
+    isEditable: function() {return true;},
+    isRemovable: function() {return true;},
+    fields: [{'title': 'Feed title', 'type': 'string', 'key': 'title'},
+             {'title': 'Description', 'type': 'string', 'key': 'description'},
+             {'title': 'Feed link', 'type': 'link', 'key': 'link'},
+             {'title': 'Site link', 'type': 'link', 'key': 'site_link'},
+             {'title': 'Enabled', 'type': 'bool', 'key': 'enabled'},
+    ],
+    getTitle: function() {return this.props.obj.title;},
+    getFilterRow: function(i, filter) {
+        return (<dd key={'d' + i + '-' + this.props.obj.id}
+                        className="input-group filter-row">
+                <span className="input-group-btn">
+                    <button className="btn btn-default" type="button"
+                            data-index={i} onClick={this.removeFilterRow}>
+                        <Glyphicon glyph='minus' />
+                    </button>
+                </span>
+                <select name="type" className="form-control"
+                        defaultValue={filter.type}>
+                    <option value='simple match'>simple match</option>
+                    <option value='regex'>regex</option>
+                </select>
+                <input type="text" className="form-control"
+                        name="pattern" defaultValue={filter.pattern} />
+                <select name="action_on" className="form-control"
+                        defaultValue={filter.action_on}>
+                    <option value="match">match</option>
+                    <option value="no match">no match</option>
+                </select>
+                <select name="action" className="form-control"
+                        defaultValue={filter.action}>
+                    <option value="mark as read">mark as read</option>
+                    <option value="mark as favorite">mark as favorite</option>
+                </select>
+            </dd>);
+    },
+    getBody: function() {
+        var filter_rows = [];
+        for(var i in this.state.filters) {
+            filter_rows.push(this.getFilterRow(i, this.state.filters[i]));
         }
-        var header = (<h4>
-                        {icon}<strong>Title:</strong> {this.props.feed.title}
-                      </h4>);
-        return (<Panel collapsible defaultExpanded header={header}>
+        return (<div className="panel-body">
                     <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><JarrTime stamp={this.props.obj.created_stamp}
+                                      text={this.props.obj.created_date} />
+                        </dd>
+                        <dt>Last fetched</dt>
+                        <dd><JarrTime stamp={this.props.obj.last_stamp}
+                                      text={this.props.obj.last_retrieved} />
                         </dd>
-                        <dt>Site link</dt>
+                    </dl>
+                    {this.getCore()}
+                    <dl className="dl-horizontal">
+                    <form>
+                        <dt>Filters</dt>
                         <dd>
-                            <a href={this.props.feed.site_link}>
-                                {this.props.feed.site_link}
-                            </a>
+                            <button className="btn btn-default"
+                                    type="button" onClick={this.addFilterRow}>
+                                <Glyphicon glyph='plus' />
+                            </button>
+                            <button className="btn btn-default">Submit
+                            </button>
                         </dd>
-                        <dt>Last fetched</dt>
-                        <dd>{this.props.feed.last_retrieved}</dd>
-                        <dt>Enabled</dt>
-                        <dd>{this.props.feed.enabled}</dd>
+                        {filter_rows}
+                    </form>
                     </dl>
-                </Panel>
+                </div>
         );
     },
+    addFilterRow: function() {
+        var filters = this.state.filters;
+        filters.push({action: null, action_on: null,
+                      type: null, pattern: null});
+        this.setState({filters: filters});
+    },
+    removeFilterRow: function(evnt) {
+        var filters = this.state.filters;
+        delete filters[evnt.target.getAttribute('data-index')];
+        this.setState({filters: filters});
+    },
 });
 
 var Category = React.createClass({
-    propTypes: {category: React.PropTypes.object.isRequired},
-    render: function() {
-        return (<Panel header={this.props.category.name}>
-                test
-                </Panel>
-        );
+    mixins: [PanelMixin],
+    getInitialState: function() {return {edit_mode: false};},
+    isEditable: function() {
+        if(this.props.obj.id != 0) {return true;}
+        else {return false;}
+    },
+    isRemovable: function() {return this.isEditable();},
+    fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}],
+    getTitle: function() {return this.props.obj.name;},
+    getBody: function() {
+        return (<div className="panel-body">
+                    {this.getCore()}
+                </div>);
     },
 });
 
@@ -112,18 +265,21 @@ var RightPanel = React.createClass({
                          </ol>);
         }
         if(this.state.current == 'article') {
-            var content = <Article article={this.state.article} />;
+            var cntnt = (<Article type='article' obj={this.state.article}
+                    key={this.state.article.id} />);
         } else if(this.state.current == 'feed') {
-            var content = <Feed feed={this.state.feed} />;
+            var cntnt = (<Feed type='feed' obj={this.state.feed}
+                    key={this.state.feed.id} />);
         } else if(this.state.current == 'category') {
-            var content = <Category category={this.state.category} />;
+            var cntnt = (<Category type='category' obj={this.state.category}
+                    key={this.state.category.id} />);
         }
 
         return (<Col id="right-panel" xsOffset={2} smOffset={2}
                                       mdOffset={7} lgOffset={6}
                                       xs={10} sm={10} md={5} lg={6}>
                     {breadcrum}
-                    {content}
+                    {cntnt}
                 </Col>
         );
     },
diff --git a/src/web/js/components/time.react.js b/src/web/js/components/time.react.js
new file mode 100644
index 00000000..8b4d47d9
--- /dev/null
+++ b/src/web/js/components/time.react.js
@@ -0,0 +1,15 @@
+var React = require('react');
+var ReactIntl = require('react-intl');
+
+var JarrTime = React.createClass({
+    mixins: [ReactIntl.IntlMixin],
+    propTypes: {stamp: React.PropTypes.number.isRequired,
+                text: React.PropTypes.string.isRequired},
+    render: function() {
+        return (<time dateTime={this.props.text} title={this.props.text}>
+                    {this.formatRelative(this.props.stamp)}
+                </time>);
+    },
+});
+
+module.exports = JarrTime;
-- 
cgit 


From 678af2747d6414379e81ee6856c7ec2f3cd5a890 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sat, 30 Jan 2016 23:17:03 +0100
Subject: registering modifications on feeds / categories

---
 src/web/js/components/RightPanel.react.js | 156 ++++++++++++++++++++----------
 1 file changed, 105 insertions(+), 51 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 2e2aac3e..fda7c976 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -4,11 +4,15 @@ var Glyphicon = require('react-bootstrap/Glyphicon');
 var Button = require('react-bootstrap/Button');
 var ButtonGroup = require('react-bootstrap/ButtonGroup');
 
+var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
 var JarrTime = require('./time.react');
 
 var PanelMixin = {
     propTypes: {obj: React.PropTypes.object.isRequired},
+    getInitialState: function() {
+        return {edit_mode: false, obj: this.props.obj};
+    },
     getHeader: function() {
         var icon = null;
         if(this.props.obj.icon_url){
@@ -46,7 +50,9 @@ var PanelMixin = {
         var items = [];
         var key;
         if(!this.state.edit_mode) {
-        this.fields.map(function(field) {
+        this.fields.filter(function(field) {
+            return field.type != 'ignore';
+        }).map(function(field) {
             key = this.getKey('dt', field.key);
             items.push(<dt key={key}>{field.title}</dt>);
             key = this.getKey('dd', field.key);
@@ -67,24 +73,30 @@ var PanelMixin = {
             }
         }.bind(this));
         } else {
-        this.fields.map(function(field) {
+        items.push(<dd key={this.getKey('dd', 'submit')}>
+                        <button className="btn btn-default"
+                                onClick={this.saveObj}>
+                            Submit
+                        </button>
+                    </dd>);
+        this.fields.filter(function(field) {
+            return field.type != 'ignore';
+        }).map(function(field) {
             key = this.getKey('dd', field.key);
             items.push(<dt key={key}>{field.title}</dt>);
             key = this.getKey('dt', field.key);
+            var input = null;
             if(field.type == 'string' || field.type == 'link') {
-                items.push(<dd key={key}><input type="text"
-                                    defaultValue={this.props.obj[field.key]} />
-                           </dd>);
+                input = (<input type="text" name={field.key}
+                                onChange={this.saveField}
+                                defaultValue={this.props.obj[field.key]} />);
             } else if (field.type == 'bool') {
-                items.push(<dd key={key}><input type="checkbox"
-                           defaultChecked={this.props.obj[field.key]} /></dd>);
+                input = (<input type="checkbox" name={field.key}
+                                onChange={this.saveField}
+                                defaultChecked={this.props.obj[field.key]} />);
             }
+            items.push(<dd key={key}>{input}</dd>);
         }.bind(this));
-            items.push(<dd key={this.getKey('dd', 'submit')}>
-                           <button className="btn btn-default">
-                               Submit
-                           </button>
-                       </dd>);
         }
         return (<dl className="dl-horizontal">{items}</dl>);
     },
@@ -99,15 +111,39 @@ var PanelMixin = {
         this.setState({edit_mode: !this.state.edit_mode});
     },
     onClickRemove: function() {
+        RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+    },
+    saveField: function(evnt) {
+        var obj = this.state.obj;
+        for(var i in this.fields) {
+            if(evnt.target.name == this.fields[i].key) {
+                if(this.fields[i].type == 'bool') {
+                    obj[evnt.target.name] = evnt.target.checked;
+                } else {
+                    obj[evnt.target.name] = evnt.target.value;
+                }
+                break;
+            }
+        }
+        this.setState({obj: obj});
+    },
+    saveObj: function() {
+        var to_push = {};
+        this.fields.map(function(field) {
+            to_push[field.key] = this.state.obj[field.key];
+        }.bind(this));
+        this.setState({edit_mode: false}, function() {
+            RightPanelActions.putObj(this.props.obj.id, this.obj_type, to_push);
+        }.bind(this));
     },
 };
 
 var Article = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {return {edit_mode: false};},
-    fields: [],
     isEditable: function() {return false;},
     isRemovable: function() {return true;},
+    fields: [],
+    obj_type: 'article',
     getTitle: function() {return this.props.obj.title;},
     getBody: function() {
         return (<div className="panel-body" dangerouslySetInnerHTML={
@@ -117,16 +153,15 @@ var Article = React.createClass({
 
 var Feed = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {
-        return {edit_mode: false, filters: this.props.obj.filters};
-    },
     isEditable: function() {return true;},
     isRemovable: function() {return true;},
+    obj_type: 'feed',
     fields: [{'title': 'Feed title', 'type': 'string', 'key': 'title'},
              {'title': 'Description', 'type': 'string', 'key': 'description'},
              {'title': 'Feed link', 'type': 'link', 'key': 'link'},
              {'title': 'Site link', 'type': 'link', 'key': 'site_link'},
              {'title': 'Enabled', 'type': 'bool', 'key': 'enabled'},
+             {'title': 'Filters', 'type': 'ignore', 'key': 'filters'},
     ],
     getTitle: function() {return this.props.obj.title;},
     getFilterRow: function(i, filter) {
@@ -138,30 +173,56 @@ var Feed = React.createClass({
                         <Glyphicon glyph='minus' />
                     </button>
                 </span>
+                <select name="action on" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
+                        defaultValue={filter['action on']}>
+                    <option value="match">match</option>
+                    <option value="no match">no match</option>
+                </select>
+                <input name="pattern" type="text" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
+                        defaultValue={filter.pattern} />
                 <select name="type" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
                         defaultValue={filter.type}>
                     <option value='simple match'>simple match</option>
                     <option value='regex'>regex</option>
                 </select>
-                <input type="text" className="form-control"
-                        name="pattern" defaultValue={filter.pattern} />
-                <select name="action_on" className="form-control"
-                        defaultValue={filter.action_on}>
-                    <option value="match">match</option>
-                    <option value="no match">no match</option>
-                </select>
                 <select name="action" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
                         defaultValue={filter.action}>
                     <option value="mark as read">mark as read</option>
                     <option value="mark as favorite">mark as favorite</option>
                 </select>
             </dd>);
     },
-    getBody: function() {
-        var filter_rows = [];
-        for(var i in this.state.filters) {
-            filter_rows.push(this.getFilterRow(i, this.state.filters[i]));
+    getFilterRows: function() {
+        var rows = [];
+        if(this.state.edit_mode) {
+            for(var i in this.state.obj.filters) {
+                rows.push(this.getFilterRow(i, this.state.obj.filters[i]));
+            }
+            return (<dl className="dl-horizontal">
+                        <dt>Filters</dt>
+                        <dd>
+                            <button className="btn btn-default"
+                                    type="button" onClick={this.addFilterRow}>
+                                <Glyphicon glyph='plus' />
+                            </button>
+                        </dd>
+                        {rows}
+                    </dl>);
         }
+        rows = [];
+        rows.push(<dt key={'d-title'}>Filters</dt>);
+        for(var i in this.state.obj.filters) {
+            rows.push(<dd key={'d' + i}>
+                    When {this.state.obj.filters[i]['action on']} on "{this.state.obj.filters[i].pattern}" ({this.state.obj.filters[i].type}) => {this.state.obj.filters[i].action}
+                    </dd>);
+        }
+        return <dl className="dl-horizontal">{rows}</dl>;
+    },
+    getBody: function() {
         return (<div className="panel-body">
                     <dl className="dl-horizontal">
                         <dt>Created on</dt>
@@ -174,44 +235,37 @@ var Feed = React.createClass({
                         </dd>
                     </dl>
                     {this.getCore()}
-                    <dl className="dl-horizontal">
-                    <form>
-                        <dt>Filters</dt>
-                        <dd>
-                            <button className="btn btn-default"
-                                    type="button" onClick={this.addFilterRow}>
-                                <Glyphicon glyph='plus' />
-                            </button>
-                            <button className="btn btn-default">Submit
-                            </button>
-                        </dd>
-                        {filter_rows}
-                    </form>
-                    </dl>
+                    {this.getFilterRows()}
                 </div>
         );
     },
     addFilterRow: function() {
-        var filters = this.state.filters;
-        filters.push({action: null, action_on: null,
-                      type: null, pattern: null});
-        this.setState({filters: filters});
+        var obj = this.state.obj;
+        obj.filters.push({action: "mark as read", 'action on': "match",
+                      type: "simple match", pattern: ""});
+        this.setState({obj: obj});
     },
     removeFilterRow: function(evnt) {
-        var filters = this.state.filters;
-        delete filters[evnt.target.getAttribute('data-index')];
-        this.setState({filters: filters});
+        var obj = this.state.obj;
+        delete obj.filters[evnt.target.getAttribute('data-index')];
+        this.setState({obj: obj});
+    },
+    saveFilterChange: function(evnt) {
+        var index = evnt.target.getAttribute('data-index');
+        var obj = this.state.obj;
+        obj.filters[index][evnt.target.name] = evnt.target.value;
+        this.setState({obj: obj});
     },
 });
 
 var Category = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {return {edit_mode: false};},
     isEditable: function() {
         if(this.props.obj.id != 0) {return true;}
         else {return false;}
     },
     isRemovable: function() {return this.isEditable();},
+    obj_type: 'category',
     fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}],
     getTitle: function() {return this.props.obj.name;},
     getBody: function() {
@@ -299,7 +353,7 @@ var RightPanel = React.createClass({
         RightPanelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(RightPanelStore._datas);
+        this.setState(RightPanelStore.getAll());
     },
 });
 
-- 
cgit 


From 9ca6a6989b0c87401f1a3903077723cd9a648a79 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 02:24:10 +0100
Subject: redoing navbar in react

---
 src/web/js/components/MainApp.react.js     | 26 +++++----
 src/web/js/components/Menu.react.js        | 10 ++--
 src/web/js/components/MiddlePanel.react.js |  8 +--
 src/web/js/components/Navbar.react.js      | 91 ++++++++++++++++++++++++++++++
 src/web/js/components/RightPanel.react.js  | 13 ++---
 5 files changed, 121 insertions(+), 27 deletions(-)
 create mode 100644 src/web/js/components/Navbar.react.js

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index b448f808..cbdc5833 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,7 +1,8 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Grid = require('react-bootstrap/Grid');
+var Col = require('react-bootstrap/lib/Col');
+var Grid = require('react-bootstrap/lib/Grid');
 
+var JarrNavBar = require('./Navbar.react');
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
 var RightPanel = require('./RightPanel.react');
@@ -9,15 +10,18 @@ var RightPanel = require('./RightPanel.react');
 
 var MainApp = React.createClass({
     render: function() {
-        return (<Grid fluid id="jarr-container">
-                    <Menu />
-                    <Col id="middle-panel" mdOffset={3} lgOffset={2}
-                                           xs={2} sm={2} md={4} lg={4}>
-                        <MiddlePanel.MiddlePanelFilter />
-                        <MiddlePanel.MiddlePanel />
-                    </Col>
-                    <RightPanel />
-                </Grid>
+        return (<div>
+                    <JarrNavBar />
+                    <Grid fluid id="jarr-container">
+                        <Menu />
+                        <Col id="middle-panel" mdOffset={3} lgOffset={2}
+                                            xs={4} sm={4} md={4} lg={4}>
+                            <MiddlePanel.MiddlePanelFilter />
+                            <MiddlePanel.MiddlePanel />
+                        </Col>
+                        <RightPanel />
+                    </Grid>
+                </div>
        );
     },
 });
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 0d739e4e..ad28015c 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,9 +1,9 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Badge = require('react-bootstrap/Badge');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
-var Glyphicon = require('react-bootstrap/Glyphicon');
+var Col = require('react-bootstrap/lib/Col');
+var Badge = require('react-bootstrap/lib/Badge');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 6bfdaaa9..fd291624 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,9 +1,9 @@
 var React = require('react');
 
-var Row = require('react-bootstrap/Row');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
-var Glyphicon = require('react-bootstrap/Glyphicon');
+var Row = require('react-bootstrap/lib/Row');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
new file mode 100644
index 00000000..56de178e
--- /dev/null
+++ b/src/web/js/components/Navbar.react.js
@@ -0,0 +1,91 @@
+var React = require('react');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Nav = require('react-bootstrap/lib/Nav');
+var NavItem = require('react-bootstrap/lib/NavItem');
+var Navbar = require('react-bootstrap/lib/Navbar');
+var NavDropdown = require('react-bootstrap/lib/NavDropdown');
+var MenuItem = require('react-bootstrap/lib/MenuItem');
+var Button = require('react-bootstrap/lib/Button');
+var Input = require('react-bootstrap/lib/Input');
+
+var MenuStore = require('../stores/MenuStore');
+
+JarrNavBar = React.createClass({
+    getInitialState: function() {
+        return {is_admin: MenuStore._datas.is_admin,
+                crawling_method: MenuStore._datas.crawling_method};
+    },
+    buttonFetch: function() {
+        if(this.state.is_admin && this.state.crawling_method != 'http') {
+            return <NavItem eventKey={2} href="/fetch"><Glyphicon glyph="import" />Fetch</NavItem>;
+        }
+    },
+    buttonAdmin: function() {
+        if(this.state.is_admin) {
+            return (<NavDropdown title={<Glyphicon glyph='cog' />}
+                            id='admin-dropdown'>
+                        <MenuItem href="/admin/dashboard">
+                            <Glyphicon glyph="dashboard" />Dashboard
+                        </MenuItem>
+                    </NavDropdown>);
+        }
+    },
+    render: function() {
+        var gl_title = (<span>
+                            <Glyphicon glyph="plus-sign" />Add a new feed
+                        </span>);
+        return (<Navbar fixedTop inverse className="navbar-custom">
+                    <Navbar.Header>
+                        <Navbar.Brand>
+                            <a href="/">JARR</a>
+                        </Navbar.Brand>
+                        <Navbar.Toggle />
+                    </Navbar.Header>
+                    <Nav pullRight>
+                        <Navbar.Form pullLeft>
+                            <form action="/feed/bookmarklet" method="GET">
+                            <Input name="url" type="text"
+                                   placeholder="Add a new feed" />
+                            <Button type="submit">Submit</Button>
+                            </form>
+                        </Navbar.Form>
+                        {this.buttonFetch()}
+                        <NavDropdown title="Feed" id="feed-mgmt-dropdown">
+                            <MenuItem href="/feeds/inactives">Inactive</MenuItem>
+                            <MenuItem href="/articles/history">History</MenuItem>
+                            <MenuItem href="/feeds/">All</MenuItem>
+                        </NavDropdown>
+                        {this.buttonAdmin()}
+                        <NavDropdown title={<Glyphicon glyph='user' />}
+                                id="user-dropdown">
+                            <MenuItem href="/user/profile">
+                                <Glyphicon glyph="user" />Profile
+                            </MenuItem>
+                            <MenuItem href="/user/management">
+                                <Glyphicon glyph="cog" />Your data
+                            </MenuItem>
+                            <MenuItem href="/about">
+                                <Glyphicon glyph="question-sign" />About
+                            </MenuItem>
+                            <MenuItem href="/logout">
+                                <Glyphicon glyph="log-out" />Logout
+                            </MenuItem>
+                        </NavDropdown>
+                    </Nav>
+                </Navbar>
+        );
+    },
+    componentDidMount: function() {
+        MenuStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+        MenuStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        var datas = MenuStore.getAll();
+        this.setState({is_admin: datas.is_admin,
+                       crawling_method: datas.crawling_method});
+    },
+});
+
+module.exports = JarrNavBar;
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index fda7c976..e9485511 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,8 +1,8 @@
 var React = require('react');
-var Col = require('react-bootstrap/Col');
-var Glyphicon = require('react-bootstrap/Glyphicon');
-var Button = require('react-bootstrap/Button');
-var ButtonGroup = require('react-bootstrap/ButtonGroup');
+var Col = require('react-bootstrap/lib/Col');
+var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var Button = require('react-bootstrap/lib/Button');
+var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
@@ -293,7 +293,6 @@ var RightPanel = React.createClass({
         return <li>{this.state.article.title}</li>;
     },
     render: function() {
-        var content = null;
         var brd_category = null;
         var brd_feed = null;
         var brd_article = null;
@@ -329,9 +328,9 @@ var RightPanel = React.createClass({
                     key={this.state.category.id} />);
         }
 
-        return (<Col id="right-panel" xsOffset={2} smOffset={2}
+        return (<Col id="right-panel" xsOffset={4} smOffset={4}
                                       mdOffset={7} lgOffset={6}
-                                      xs={10} sm={10} md={5} lg={6}>
+                                      xs={8} sm={8} md={5} lg={6}>
                     {breadcrum}
                     {cntnt}
                 </Col>
-- 
cgit 


From 6a4e5c8626476a3e24e4170b7b1c541ddcc9bbee Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 16:07:04 +0100
Subject: right redirect link handling

---
 src/web/js/components/MiddlePanel.react.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index fd291624..eca56541 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -35,7 +35,7 @@ var TableLine = React.createClass({
             icon = <Glyphicon glyph="ban-circle" />;
         }
         var title = (<a href={'/article/redirect/' + this.props.article_id}
-                        onClick={this.stopPropagation}>
+                        onClick={this.openRedirectLink}>
                         {icon} {this.props.feed_title}
                      </a>);
         var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
@@ -56,6 +56,11 @@ var TableLine = React.createClass({
                 </div>
         );
     },
+    openRedirectLink: function(evnt) {
+        if(!this.state.read) {
+            this.toogleRead(evnt);
+        }
+    },
     toogleRead: function(evnt) {
         this.setState({read: !this.state.read}, function() {
             MiddlePanelActions.changeRead(this.props.category_id,
-- 
cgit 


From caa301e8592812b1421040e7f6116d4a2d180da7 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 16:13:03 +0100
Subject: reset scrolling when setting right panel

---
 src/web/js/components/RightPanel.react.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index e9485511..42f8f8ef 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -293,6 +293,7 @@ var RightPanel = React.createClass({
         return <li>{this.state.article.title}</li>;
     },
     render: function() {
+        window.scrollTo(0, 0);
         var brd_category = null;
         var brd_feed = null;
         var brd_article = null;
-- 
cgit 


From eb74eca67026a62dac5d0f8cf92111fad6c73648 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 16:59:04 +0100
Subject: fixing breadcrum height

---
 src/web/js/components/RightPanel.react.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 42f8f8ef..b8f78050 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -299,20 +299,24 @@ var RightPanel = React.createClass({
         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>);
+            brd_category = (<li className="rp-crum">
+                                <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>);
+            brd_feed = (<li className="rp-crum">
+                            <a onClick={this.selectFeed} href="#">
+                                {this.state.feed.title}
+                            </a>
+                        </li>);
         }
         if(this.state.article) {
-            brd_article = <li>{this.state.article.title}</li>;
+            brd_article = <li className="rp-crum">{this.state.article.title}</li>;
         }
         if(brd_category || brd_feed || brd_article) {
-            breadcrum = (<ol className="breadcrumb">
+            breadcrum = (<ol className="breadcrumb" id="rp-breadcrum">
                             {brd_category}
                             {brd_feed}
                             {brd_article}
-- 
cgit 


From 5949bd6787f2a7fa910dea6036df0315e119b457 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 18:02:52 +0100
Subject: modal from nav

---
 src/web/js/components/Navbar.react.js | 69 +++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 15 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index 56de178e..295b4bb6 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -5,6 +5,7 @@ var NavItem = require('react-bootstrap/lib/NavItem');
 var Navbar = require('react-bootstrap/lib/Navbar');
 var NavDropdown = require('react-bootstrap/lib/NavDropdown');
 var MenuItem = require('react-bootstrap/lib/MenuItem');
+var Modal = require('react-bootstrap/lib/Modal');
 var Button = require('react-bootstrap/lib/Button');
 var Input = require('react-bootstrap/lib/Input');
 
@@ -13,11 +14,14 @@ var MenuStore = require('../stores/MenuStore');
 JarrNavBar = React.createClass({
     getInitialState: function() {
         return {is_admin: MenuStore._datas.is_admin,
-                crawling_method: MenuStore._datas.crawling_method};
+                crawling_method: MenuStore._datas.crawling_method,
+                showModal: false, modalType: null};
     },
     buttonFetch: function() {
         if(this.state.is_admin && this.state.crawling_method != 'http') {
-            return <NavItem eventKey={2} href="/fetch"><Glyphicon glyph="import" />Fetch</NavItem>;
+            return (<NavItem eventKey={2} href="/fetch">
+                        <Glyphicon glyph="import" />Fetch
+                    </NavItem>);
         }
     },
     buttonAdmin: function() {
@@ -30,11 +34,50 @@ JarrNavBar = React.createClass({
                     </NavDropdown>);
         }
     },
+    getModel: function() {
+        var heading = null;
+        var action = null;
+        var body = null;
+        if(this.state.modalType == 'addFeed') {
+            heading = 'Add a new feed';
+            action = '/feed/bookmarklet';
+            placeholder = "Site or feed url, we'll sort it out later ;)";
+            body = <Input name="url" type="text" placeholder={placeholder} />;
+        } else {
+            heading = 'Add a new category';
+            action = '/category/create';
+            body = <Input name="name" type="text"
+                          placeholder="Name, there isn't much more to it" />;
+        }
+        return (<Modal show={this.state.showModal} onHide={this.close}>
+                  <form action={action} method="POST">
+                    <Modal.Header closeButton>
+                      <Modal.Title>{heading}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                      {body}
+                    </Modal.Body>
+                    <Modal.Footer>
+                      <Button type="submit">Add</Button>
+                    </Modal.Footer>
+                  </form>
+                </Modal>);
+    },
+    close: function() {
+        this.setState({showModal: false, modalType: null});
+    },
+    openAddFeed: function() {
+        this.setState({showModal: true, modalType: 'addFeed'});
+    },
+    openAddCategory: function() {
+        this.setState({showModal: true, modalType: 'addCategory'});
+    },
     render: function() {
         var gl_title = (<span>
                             <Glyphicon glyph="plus-sign" />Add a new feed
                         </span>);
-        return (<Navbar fixedTop inverse className="navbar-custom">
+        return (<Navbar fixedTop inverse id="jarrnav">
+                    {this.getModel()}
                     <Navbar.Header>
                         <Navbar.Brand>
                             <a href="/">JARR</a>
@@ -42,19 +85,15 @@ JarrNavBar = React.createClass({
                         <Navbar.Toggle />
                     </Navbar.Header>
                     <Nav pullRight>
-                        <Navbar.Form pullLeft>
-                            <form action="/feed/bookmarklet" method="GET">
-                            <Input name="url" type="text"
-                                   placeholder="Add a new feed" />
-                            <Button type="submit">Submit</Button>
-                            </form>
-                        </Navbar.Form>
                         {this.buttonFetch()}
-                        <NavDropdown title="Feed" id="feed-mgmt-dropdown">
-                            <MenuItem href="/feeds/inactives">Inactive</MenuItem>
-                            <MenuItem href="/articles/history">History</MenuItem>
-                            <MenuItem href="/feeds/">All</MenuItem>
-                        </NavDropdown>
+                        <NavItem className="jarrnavitem"
+                                 onClick={this.openAddFeed} href="#">
+                            <Glyphicon glyph="plus-sign" />Add a new feed
+                        </NavItem>
+                        <NavItem className="jarrnavitem"
+                                 onClick={this.openAddCategory} href="#">
+                            <Glyphicon glyph="plus-sign" />Add a new category
+                        </NavItem>
                         {this.buttonAdmin()}
                         <NavDropdown title={<Glyphicon glyph='user' />}
                                 id="user-dropdown">
-- 
cgit 


From ef689ca6b6686cf73f887b285328d67e0add12db Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 18:33:21 +0100
Subject: saving categ

---
 src/web/js/components/RightPanel.react.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index b8f78050..009b40df 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -6,6 +6,7 @@ var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
+var MenuStore = require('../stores/MenuStore');
 var JarrTime = require('./time.react');
 
 var PanelMixin = {
@@ -162,6 +163,7 @@ var Feed = React.createClass({
              {'title': 'Site link', 'type': 'link', 'key': 'site_link'},
              {'title': 'Enabled', 'type': 'bool', 'key': 'enabled'},
              {'title': 'Filters', 'type': 'ignore', 'key': 'filters'},
+             {'title': 'Category', 'type': 'ignore', 'key': 'category_id'},
     ],
     getTitle: function() {return this.props.obj.title;},
     getFilterRow: function(i, filter) {
@@ -222,6 +224,30 @@ var Feed = React.createClass({
         }
         return <dl className="dl-horizontal">{rows}</dl>;
     },
+    getCategorySelect: function() {
+        var content = null;
+        if(this.state.edit_mode) {
+            var categ_options = [];
+            for(var cat_id in MenuStore._datas.categories) {
+                categ_options.push(
+                        <option value={cat_id}
+                                key={MenuStore._datas.categories[cat_id].id}>
+                            {MenuStore._datas.categories[cat_id].name}
+                        </option>);
+            }
+            content = (<select name="category_id" className="form-control"
+                               onChange={this.saveField}
+                               defaultValue={this.props.obj.category_id}>
+                            {categ_options}
+                       </select>);
+        } else {
+            content = MenuStore._datas.categories[this.props.obj.category_id].name;
+        }
+        return (<dl className="dl-horizontal">
+                  <dt>Category</dt><dd>{content}</dd>
+                </dl>);
+    },
+
     getBody: function() {
         return (<div className="panel-body">
                     <dl className="dl-horizontal">
@@ -234,6 +260,7 @@ var Feed = React.createClass({
                                       text={this.props.obj.last_retrieved} />
                         </dd>
                     </dl>
+                    {this.getCategorySelect()}
                     {this.getCore()}
                     {this.getFilterRows()}
                 </div>
-- 
cgit 


From 64964d2fcfa73e18b1316d788bacd11e2180bb7d Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 18:59:36 +0100
Subject: handling errors from  one page app

---
 src/web/js/components/Menu.react.js       |  8 ++++----
 src/web/js/components/RightPanel.react.js | 32 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 4 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index ad28015c..b68a84eb 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -32,9 +32,9 @@ var FeedItem = React.createClass({
         if(this.props.active) {
             classes += " bg-primary";
         }
-        if(this.props.error_count >= 6) {
+        if(this.props.error_count >= MenuStore._datas.max_error) {
             classes += " bg-danger";
-        } else if(this.props.error_count > 3) {
+        } else if(this.props.error_count > MenuStore._datas.error_threshold) {
             classes += " bg-warning";
         }
         var title = <span className="title">{this.props.title}</span>;
@@ -97,7 +97,7 @@ var CategoryGroup = React.createClass({
             var feeds = this.props.feeds.filter(function(feed) {
                 if (filter == 'unread' && feed.unread <= 0) {
                     return false;
-                } else if (filter == 'error' && feed.error_count <= 3) {
+                } else if (filter == 'error' && feed.error_count <= MenuStore._datas.error_threshold) {
                     return false;
                 }
                 return true;
@@ -201,7 +201,7 @@ 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) {
+                if(this.state.feeds[feed_id].error_count > MenuStore._datas.error_threshold) {
                     feed_in_error = true;
                 }
                 unread += this.state.feeds[feed_id].unread;
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 009b40df..bf352a61 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -247,7 +247,38 @@ var Feed = React.createClass({
                   <dt>Category</dt><dd>{content}</dd>
                 </dl>);
     },
+    getErrorFields: function() {
+        if(this.props.obj.error_count < MenuStore._datas.error_threshold) {
+            return;
+        }
+        if(this.props.obj.error_count < MenuStore._datas.max_error) {
+            return (<dl className="dl-horizontal">
+                        <dt>State</dt>
+                        <dd>The download of this feed has encountered some problems. However its error counter will be reinitialized at the next successful retrieving.</dd>
+                        <dt>Last error</dt>
+                        <dd>{this.props.obj.last_error}</dd>
+                    </dl>);
+        }
+    return (<dl className="dl-horizontal">
+                <dt>State</dt>
+                <dd>That feed has encountered too much consecutive errors and won't be retrieved anymore.</dd>
+
+                <dt>Last error</dt>
+                <dd>{this.props.obj.last_error}</dd>
+                <dd>
+                    <Button onClick={this.resetErrors}>Reset error count
+                    </Button>
+                </dd>
+            </dl>);
 
+    },
+    resetErrors: function() {
+        var obj = this.state.obj;
+        obj.error_count = 0;
+        this.setState({obj: obj}, function() {
+            RightPanelActions.resetErrors(this.props.obj.id);
+        }.bind(this));
+    },
     getBody: function() {
         return (<div className="panel-body">
                     <dl className="dl-horizontal">
@@ -260,6 +291,7 @@ var Feed = React.createClass({
                                       text={this.props.obj.last_retrieved} />
                         </dd>
                     </dl>
+                    {this.getErrorFields()}
                     {this.getCategorySelect()}
                     {this.getCore()}
                     {this.getFilterRows()}
-- 
cgit 


From db6e918ee5a92429738f2e87afb1af8f024d5053 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sun, 31 Jan 2016 22:32:10 +0100
Subject: enhancement: ordering categories and hidding empty 'no category'
 category

---
 src/web/js/components/Menu.react.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index b68a84eb..76304f9a 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -89,6 +89,10 @@ var CategoryGroup = React.createClass({
         return {unfolded: true};
     },
     render: function() {
+        // hidden the no category if empty
+        if(!this.props.cat_id && !this.props.feeds.length) {
+            return <ul className="hidden" />;
+        }
         var filter = this.props.filter;
         var a_type = this.props.active_type;
         var a_id = this.props.active_id;
@@ -197,7 +201,8 @@ var Menu = React.createClass({
                 </ul>
         );
         var categories = [];
-        for(var cat_id in this.state.categories) {
+        for(var index in this.state.categories_order) {
+            var cat_id = this.state.categories_order[index];
             var feeds = [];
             var unread = 0;
             this.state.categories[cat_id].feeds.map(function(feed_id) {
@@ -237,6 +242,7 @@ var Menu = React.createClass({
         this.setState({filter: datas.filter,
                        feeds: datas.feeds,
                        categories: datas.categories,
+                       categories_order: datas.categories_order,
                        active_type: datas.active_type,
                        active_id: datas.active_id});
     },
-- 
cgit 


From eb0b485e6bfbf7bba832c83ea96e43c004182aa9 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 21:20:19 +0100
Subject: readding feeds menu

---
 src/web/js/components/Navbar.react.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index 295b4bb6..4e246977 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -73,9 +73,6 @@ JarrNavBar = React.createClass({
         this.setState({showModal: true, modalType: 'addCategory'});
     },
     render: function() {
-        var gl_title = (<span>
-                            <Glyphicon glyph="plus-sign" />Add a new feed
-                        </span>);
         return (<Navbar fixedTop inverse id="jarrnav">
                     {this.getModel()}
                     <Navbar.Header>
@@ -94,6 +91,17 @@ JarrNavBar = React.createClass({
                                  onClick={this.openAddCategory} href="#">
                             <Glyphicon glyph="plus-sign" />Add a new category
                         </NavItem>
+                        <NavDropdown title="Feed" id="feed-dropdown">
+                            <MenuItem href="/feeds/inactives">
+                                Inactives
+                            </MenuItem>
+                            <MenuItem href="/articles/history">
+                                History
+                            </MenuItem>
+                            <MenuItem href="/feeds/">
+                                All
+                            </MenuItem>
+                        </NavDropdown>
                         {this.buttonAdmin()}
                         <NavDropdown title={<Glyphicon glyph='user' />}
                                 id="user-dropdown">
-- 
cgit 


From 699177d35fa766f5b9e0044909c363ad4babb2fd Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 21:22:34 +0100
Subject: ordering categories in the feed form

---
 src/web/js/components/RightPanel.react.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index bf352a61..3b625689 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -228,7 +228,8 @@ var Feed = React.createClass({
         var content = null;
         if(this.state.edit_mode) {
             var categ_options = [];
-            for(var cat_id in MenuStore._datas.categories) {
+            for(var index in MenuStore._datas.categories_order) {
+                var cat_id = MenuStore._datas.categories_order[index];
                 categ_options.push(
                         <option value={cat_id}
                                 key={MenuStore._datas.categories[cat_id].id}>
-- 
cgit 


From ded0971f5691ed2934e690c8d7bd480ed15402f7 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 21:55:57 +0100
Subject: updating unread count when fetching unread

---
 src/web/js/components/RightPanel.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 3b625689..1e66ce39 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -39,7 +39,7 @@ var PanelMixin = {
                        </ButtonGroup>);
         }
         return (<div id="right-panel-heading" className="panel-heading">
-                    <h4>{icon}<strong>Title:</strong> {this.getTitle()}</h4>
+                    <h4>{icon}{this.getTitle()}</h4>
                     {btn_grp}
                </div>);
     },
-- 
cgit 


From 19745c767b1ab300cff404397e97b791a1881558 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 22:05:08 +0100
Subject: adding a confirm modal for deletion

---
 src/web/js/components/Navbar.react.js     |  4 ++--
 src/web/js/components/RightPanel.react.js | 26 +++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index 4e246977..57c38900 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -34,7 +34,7 @@ JarrNavBar = React.createClass({
                     </NavDropdown>);
         }
     },
-    getModel: function() {
+    getModal: function() {
         var heading = null;
         var action = null;
         var body = null;
@@ -74,7 +74,7 @@ JarrNavBar = React.createClass({
     },
     render: function() {
         return (<Navbar fixedTop inverse id="jarrnav">
-                    {this.getModel()}
+                    {this.getModal()}
                     <Navbar.Header>
                         <Navbar.Brand>
                             <a href="/">JARR</a>
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 1e66ce39..9e341e5c 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -3,6 +3,7 @@ var Col = require('react-bootstrap/lib/Col');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
+var Modal = require('react-bootstrap/lib/Modal');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
@@ -12,7 +13,7 @@ var JarrTime = require('./time.react');
 var PanelMixin = {
     propTypes: {obj: React.PropTypes.object.isRequired},
     getInitialState: function() {
-        return {edit_mode: false, obj: this.props.obj};
+        return {edit_mode: false, obj: this.props.obj, showModal: false};
     },
     getHeader: function() {
         var icon = null;
@@ -39,9 +40,20 @@ var PanelMixin = {
                        </ButtonGroup>);
         }
         return (<div id="right-panel-heading" className="panel-heading">
+                    <Modal show={this.state.showModal} onHide={this.closeModal}>
+                        <Modal.Header closeButton>
+                            <Modal.Title>Are you sure ?</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Footer>
+                            <Button onClick={this.confirmDelete}>
+                                Confirm
+                            </Button>
+                        </Modal.Footer>
+                    </Modal>
+
                     <h4>{icon}{this.getTitle()}</h4>
                     {btn_grp}
-               </div>);
+                </div>);
     },
     getKey: function(prefix, suffix) {
         return ((this.state.edit_mode?'edit':'fix') + prefix
@@ -112,7 +124,15 @@ var PanelMixin = {
         this.setState({edit_mode: !this.state.edit_mode});
     },
     onClickRemove: function() {
-        RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+        this.setState({showModal: true});
+    },
+    closeModal: function() {
+        this.setState({showModal: false});
+    },
+    confirmDelete: function() {
+        this.setState({showModal: false}, function() {
+            RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+        }.bind(this));
     },
     saveField: function(evnt) {
         var obj = this.state.obj;
-- 
cgit 


From 83516a6449b863a6f9572f93c1e1a285a208ef2d Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 22:16:07 +0100
Subject: submit button on bottom

---
 src/web/js/components/RightPanel.react.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 9e341e5c..d2935253 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -86,12 +86,6 @@ var PanelMixin = {
             }
         }.bind(this));
         } else {
-        items.push(<dd key={this.getKey('dd', 'submit')}>
-                        <button className="btn btn-default"
-                                onClick={this.saveObj}>
-                            Submit
-                        </button>
-                    </dd>);
         this.fields.filter(function(field) {
             return field.type != 'ignore';
         }).map(function(field) {
@@ -113,6 +107,13 @@ var PanelMixin = {
         }
         return (<dl className="dl-horizontal">{items}</dl>);
     },
+    getSubmit: function() {
+        return (<dd key={this.getKey('dd', 'submit')}>
+                    <button className="btn btn-default" onClick={this.saveObj}>
+                        Submit
+                    </button>
+                </dd>);
+    },
     render: function() {
         return (<div className="panel panel-default">
                     {this.getHeader()}
@@ -316,6 +317,7 @@ var Feed = React.createClass({
                     {this.getCategorySelect()}
                     {this.getCore()}
                     {this.getFilterRows()}
+                    {this.state.edit_mode?this.getSubmit():null}
                 </div>
         );
     },
@@ -351,6 +353,7 @@ var Category = React.createClass({
     getBody: function() {
         return (<div className="panel-body">
                     {this.getCore()}
+                    {this.state.edit_mode?this.getSubmit():null}
                 </div>);
     },
 });
-- 
cgit 


From ff5a8d62ff5767bbcf677bf50089e7c51f77196e Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 22:22:49 +0100
Subject: displaying more informations on articles

---
 src/web/js/components/RightPanel.react.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index d2935253..7af0aa75 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -164,12 +164,17 @@ var Article = React.createClass({
     mixins: [PanelMixin],
     isEditable: function() {return false;},
     isRemovable: function() {return true;},
-    fields: [],
+    fields: [{'title': 'Date', 'type': 'string', 'key': 'date'},
+             {'title': 'Original link', 'type': 'link', 'key': 'link'},
+    ],
     obj_type: 'article',
     getTitle: function() {return this.props.obj.title;},
     getBody: function() {
-        return (<div className="panel-body" dangerouslySetInnerHTML={
-                        {__html: this.props.obj.content}} />);
+        return (<div className="panel-body">
+                    {this.getCore()}
+                    <div dangerouslySetInnerHTML={
+                        {__html: this.props.obj.content}} />
+                </div>);
     },
 });
 
-- 
cgit 


From 9ad36d04c3a352afc6f9a1322c7401200332877a Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Tue, 2 Feb 2016 23:05:16 +0100
Subject: reload and fold all button

---
 src/web/js/components/Menu.react.js        | 59 ++++++++++++++++++++++++------
 src/web/js/components/MiddlePanel.react.js | 10 ++---
 2 files changed, 52 insertions(+), 17 deletions(-)

(limited to 'src/web/js/components')

diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 76304f9a..60578f8a 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -84,9 +84,13 @@ var CategoryGroup = React.createClass({
                 name: React.PropTypes.string.isRequired,
                 feeds: React.PropTypes.array.isRequired,
                 unread: React.PropTypes.number.isRequired,
+                folded: React.PropTypes.bool.isRequired,
     },
     getInitialState: function() {
-        return {unfolded: true};
+        return {folded: this.props.folded};
+    },
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({folded: nextProps.folded});
     },
     render: function() {
         // hidden the no category if empty
@@ -96,7 +100,7 @@ var CategoryGroup = React.createClass({
         var filter = this.props.filter;
         var a_type = this.props.active_type;
         var a_id = this.props.active_id;
-        if(this.state.unfolded) {
+        if(!this.state.folded) {
             // filtering according to this.props.filter
             var feeds = this.props.feeds.filter(function(feed) {
                 if (filter == 'unread' && feed.unread <= 0) {
@@ -119,11 +123,11 @@ var CategoryGroup = React.createClass({
             var feeds = [];
         }
         var unread = null;
-        if(this.props.unread){
+        if(this.props.unread) {
             unread = <Badge pullRight>{this.props.unread}</Badge>;
         }
-        var ctrl = (<Glyphicon onMouseDown={this.toggleFolding} pullLeft
-                        glyph={this.state.unfolded?"menu-down":"menu-right"} />
+        var ctrl = (<Glyphicon onClick={this.toggleFolding} pullLeft
+                        glyph={this.state.folded?"menu-right":"menu-down"} />
                     );
 
         return (<ul className="nav nav-sidebar">
@@ -137,7 +141,7 @@ var CategoryGroup = React.createClass({
         );
     },
     toggleFolding: function(evnt) {
-        this.setState({unfolded: !this.state.unfolded});
+        this.setState({folded: !this.state.folded});
         evnt.stopPropagation();
     },
 });
@@ -145,32 +149,56 @@ var CategoryGroup = React.createClass({
 var MenuFilter = React.createClass({
     propTypes: {feed_in_error: React.PropTypes.bool,
                 filter: React.PropTypes.string.isRequired},
+    getInitialState: function() {
+        return {allFolded: false};
+    },
     render: function() {
         var error_button = null;
         if (this.props.feed_in_error) {
             error_button = (
                     <Button active={this.props.filter == "error"}
                             title="Some of your feeds are in error, click here to list them"
-                            onMouseDown={this.setErrorFilter}
+                            onClick={this.setErrorFilter}
                             bsSize="small" bsStyle="warning">
                         <Glyphicon glyph="exclamation-sign" />
                     </Button>
             );
         }
-        return (<ButtonGroup className="nav nav-sidebar">
+        if(this.state.allFolded) {
+            var foldBtnTitle = "Unfold all categories";
+            var foldBtnGlyph = "option-horizontal";
+        } else {
+            var foldBtnTitle = "Fold all categories";
+            var foldBtnGlyph = "option-vertical";
+        }
+        return (<div>
+                <ButtonGroup className="nav nav-sidebar">
                     <Button active={this.props.filter == "all"}
                             title="Display all feeds"
-                            onMouseDown={this.setAllFilter} bsSize="small">
+                            onClick={this.setAllFilter} bsSize="small">
                         <Glyphicon glyph="menu-hamburger" />
                     </Button>
                     <Button active={this.props.filter == "unread"}
                             title="Display only feed with unread article"
-                            onMouseDown={this.setUnreadFilter}
+                            onClick={this.setUnreadFilter}
                             bsSize="small">
                         <Glyphicon glyph="unchecked" />
                     </Button>
                     {error_button}
                 </ButtonGroup>
+                <ButtonGroup className="nav nav-sidebar">
+                    <Button onClick={MenuActions.reload}
+                            title="Refresh all feeds" bsSize="small">
+                        <Glyphicon glyph="refresh" />
+                    </Button>
+                </ButtonGroup>
+                <ButtonGroup className="nav nav-sidebar">
+                    <Button title={foldBtnTitle} bsSize="small"
+                            onClick={this.toggleFold}>
+                        <Glyphicon glyph={foldBtnGlyph} />
+                    </Button>
+                </ButtonGroup>
+                </div>
         );
     },
     setAllFilter: function() {
@@ -182,12 +210,17 @@ var MenuFilter = React.createClass({
     setErrorFilter: function() {
         MenuActions.setFilter("error");
     },
+    toggleFold: function() {
+        this.setState({allFolded: !this.state.allFolded}, function() {
+            MenuActions.toggleAllFolding(this.state.allFolded);
+        }.bind(this));
+    },
 });
 
 var Menu = React.createClass({
     getInitialState: function() {
         return {filter: 'all', categories: {}, feeds: {},
-                active_type: null, active_id: null};
+                all_folded: false, active_type: null, active_id: null};
     },
     render: function() {
         var feed_in_error = false;
@@ -218,6 +251,7 @@ var Menu = React.createClass({
                                     active_id={this.state.active_id}
                                     name={this.state.categories[cat_id].name}
                                     cat_id={this.state.categories[cat_id].id}
+                                    folded={this.state.all_folded}
                                     unread={unread} />);
         }
 
@@ -244,7 +278,8 @@ var Menu = React.createClass({
                        categories: datas.categories,
                        categories_order: datas.categories_order,
                        active_type: datas.active_type,
-                       active_id: datas.active_id});
+                       active_id: datas.active_id,
+                       all_folded: datas.all_folded});
     },
 });
 
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index eca56541..e251447e 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -158,31 +158,31 @@ var MiddlePanelFilter = React.createClass({
                     <ButtonGroup>
                         <Button active={this.state.filter == "all"}
                                 title="Display all articles"
-                                onMouseDown={this.setAllFilter} bsSize="small">
+                                onClick={this.setAllFilter} bsSize="small">
                             <Glyphicon glyph="menu-hamburger" />
                         </Button>
                         <Button active={this.state.filter == "unread"}
                                 title="Display only unread article"
-                                onMouseDown={this.setUnreadFilter}
+                                onClick={this.setUnreadFilter}
                                 bsSize="small">
                             <Glyphicon glyph="unchecked" />
                         </Button>
                         <Button active={this.state.filter == "liked"}
                                 title="Filter only liked articles"
-                                onMouseDown={this.setLikedFilter}
+                                onClick={this.setLikedFilter}
                                 bsSize="small">
                             <Glyphicon glyph="star" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
-                        <Button onMouseDown={this.toogleSearch}
+                        <Button onClick={this.toogleSearch}
                                 title="Search through displayed articles"
                                 bsSize="small">
                             <Glyphicon glyph="search" />
                         </Button>
                     </ButtonGroup>
                     <ButtonGroup>
-                        <Button onMouseDown={MiddlePanelActions.markAllAsRead}
+                        <Button onClick={MiddlePanelActions.markAllAsRead}
                                 title="Mark all displayed article as read"
                                 bsSize="small">
                             <Glyphicon glyph="trash" />
-- 
cgit