aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components
diff options
context:
space:
mode:
authorFrançois Schmidts <francois.schmidts@gmail.com>2016-01-22 19:09:08 +0100
committerFrançois Schmidts <francois.schmidts@gmail.com>2016-01-26 23:47:09 +0100
commited74f6a2bfc9975092040c4379f459d4c9442d3f (patch)
tree9161b66ce5a00781e28bb64393a41911dc7dc2d8 /src/web/js/components
parentadding basic bootstrap (diff)
downloadnewspipe-ed74f6a2bfc9975092040c4379f459d4c9442d3f.tar.gz
newspipe-ed74f6a2bfc9975092040c4379f459d4c9442d3f.tar.bz2
newspipe-ed74f6a2bfc9975092040c4379f459d4c9442d3f.zip
renaming, proper usage of props and state, filtering left menu
Diffstat (limited to 'src/web/js/components')
-rw-r--r--src/web/js/components/Menu.react.js70
-rw-r--r--src/web/js/components/MiddlePanel.react.js29
2 files changed, 41 insertions, 58 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}
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">
bgstack15