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/actions/MenuActions.js          |  6 +--
 src/web/js/actions/MiddlePanelActions.js   |  6 +--
 src/web/js/components/Menu.react.js        | 70 +++++++++++++-----------------
 src/web/js/components/MiddlePanel.react.js | 29 +++++--------
 4 files changed, 47 insertions(+), 64 deletions(-)

(limited to 'src/web/js')

diff --git a/src/web/js/actions/MenuActions.js b/src/web/js/actions/MenuActions.js
index 558bd857..9502eb6d 100644
--- a/src/web/js/actions/MenuActions.js
+++ b/src/web/js/actions/MenuActions.js
@@ -14,19 +14,19 @@ var MenuActions = {
             });
         });
     },
-    setFilterMenuAll: function() {
+    setFilterAll: function() {
         JarrDispatcher.dispatch({
             component: 'menu',
             type: MenuActionTypes.MENU_FILTER_ALL,
         });
     },
-    setFilterMenuUnread: function() {
+    setFilterUnread: function() {
         JarrDispatcher.dispatch({
             component: 'menu',
             type: MenuActionTypes.MENU_FILTER_UNREAD,
         });
     },
-    setFilterMenuError: function() {
+    setFilterError: function() {
         JarrDispatcher.dispatch({
             type: MenuActionTypes.MENU_FILTER_ERROR,
         });
diff --git a/src/web/js/actions/MiddlePanelActions.js b/src/web/js/actions/MiddlePanelActions.js
index 42c18b58..f750c900 100644
--- a/src/web/js/actions/MiddlePanelActions.js
+++ b/src/web/js/actions/MiddlePanelActions.js
@@ -33,19 +33,19 @@ var MiddlePanelActions = {
             parent_id: feed_id,
         });
     },
-    setFilterMiddlePanelAll: function() {
+    setFilterAll: function() {
         JarrDispatcher.dispatch({
             component: 'middle_panel',
             type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_ALL,
         });
     },
-    setFilterMiddlePanelUnread: function() {
+    setFilterUnread: function() {
         JarrDispatcher.dispatch({
             component: 'middle_panel',
             type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_UNREAD,
         });
     },
-    setFilterMiddlePanelUnread: function() {
+    setFilterLiked: function() {
         JarrDispatcher.dispatch({
             type: MiddlePanelActionTypes.MIDDLE_PANEL_FILTER_LIKED,
         });
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