renaming, proper usage of props and state, filtering left menu

1 files changed, 30 insertions, 40 deletions

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}