1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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');
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,
},
render: function() {
var unread = undefined;
var icon = undefined;
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>
);
}
return (<li onMouseDown={this.handleClick}>
{icon} {this.props.title} {unread}
</li>
);
},
handleClick: function() {
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,
},
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}
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.props.name} {unread}
</h3>
<ul className="nav nav-sidebar">{feeds}</ul>
</div>
);
},
handleClick: function() {
MiddlePanelActions.setCategoryFilter(this.props.category_id);
},
});
var Menu = React.createClass({
getInitialState: function() {
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.setFilterAll}
bsSize="small">All</Button>
<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>
{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} />);
})}
</div>
);
},
componentDidMount: function() {
MenuActions.reload();
MenuStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
MenuStore.removeChangeListener(this._onChange);
},
_onChange: function() {
var datas = MenuStore.getAll();
this.setState({filter: datas.filter,
categories: datas.categories,
all_unread_count: datas.all_unread_count});
},
});
module.exports = Menu;
|
