diff options
Diffstat (limited to 'src/web/js')
-rw-r--r-- | src/web/js/actions/MenuActions.js | 6 | ||||
-rw-r--r-- | src/web/js/actions/MiddlePanelActions.js | 6 | ||||
-rw-r--r-- | src/web/js/components/Menu.react.js | 70 | ||||
-rw-r--r-- | src/web/js/components/MiddlePanel.react.js | 29 |
4 files changed, 47 insertions, 64 deletions
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"> |