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
|
var React = require('react');
var Row = require('react-bootstrap/Row');
var Button = require('react-bootstrap/Button');
var ButtonGroup = require('react-bootstrap/ButtonGroup');
var Glyphicon = require('react-bootstrap/Glyphicon');
var MiddlePanelStore = require('../stores/MiddlePanelStore');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
var TableLine = React.createClass({
propTypes: {article_id: React.PropTypes.number.isRequired,
feed_title: React.PropTypes.string.isRequired,
icon_url: React.PropTypes.string,
title: React.PropTypes.string.isRequired,
date: React.PropTypes.string.isRequired,
read: React.PropTypes.bool.isRequired,
liked: React.PropTypes.bool.isRequired,
},
getInitialState: function() {
return {read: this.props.read, liked: this.props.liked};
},
render: function() {
var liked = this.state.liked ? 'l' : '';
var icon = null;
if(this.props.icon_url){
icon = (<img width="16px" src={this.props.icon_url} />);
} else {
icon = <Glyphicon glyph="ban-circle" />;
}
var title = (<a href={'/article/redirect/' + this.props.article_id}>
{icon} {this.props.feed_title}
</a>);
var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
onClick={this.toogleRead} />);
var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
onClick={this.toogleLike} />);
return (<div className="list-group-item">
<h4>{title}</h4>
{read} {liked} {this.props.title}
</div>
);
},
toogleRead: function() {
this.setState({read: !this.state.read});
MiddlePanelActions.changeRead(this.props.category_id,
this.props.feed_id, this.props.article_id, !this.state.read);
},
toogleLike: function() {
this.setState({liked: !this.state.liked});
MiddlePanelActions.changeLike(this.props.category_id,
this.props.feed_id, this.props.article_id, !this.state.liked);
},
});
var MiddlePanelFilter = React.createClass({
getInitialState: function() {
return {filter: MiddlePanelStore._datas.filter};
},
render: function() {
return (<Row className="show-grid">
<ButtonGroup>
<Button active={this.state.filter == "all"}
onMouseDown={() => this.setFilter("all")}
bsSize="small">All</Button>
<Button active={this.state.filter == "unread"}
onMouseDown={() => this.setFilter("unread")}
bsSize="small">Unread</Button>
<Button active={this.state.filter == "liked"}
onMouseDown={() => this.setFilter("liked")}
bsSize="small">Liked</Button>
</ButtonGroup>
<ButtonGroup>
<Button onMouseDown={MiddlePanelActions.markAllAsRead}
bsSize="small">Mark all as read</Button>
</ButtonGroup>
</Row>
);
},
setFilter: function(filter) {
this.setState({filter: filter});
MiddlePanelActions.setFilter(filter);
}
});
var MiddlePanel = React.createClass({
getInitialState: function() {
return {filter: MiddlePanelStore._datas.filter, articles: []};
},
render: function() {
return (<Row className="show-grid">
<div className="list-group">
{this.state.articles.map(function(article){
return (<TableLine key={"a" + article.article_id}
title={article.title}
icon_url={article.icon_url}
read={article.read}
liked={article.liked}
date={article.date}
article_id={article.article_id}
feed_id={article.feed_id}
category_id={article.category_id}
feed_title={article.feed_title} />);})}
</div>
</Row>
);
},
componentDidMount: function() {
MiddlePanelActions.reload();
MiddlePanelStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
MiddlePanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState({filter: MiddlePanelStore._datas.filter,
articles: MiddlePanelStore.getArticles()});
},
});
module.exports = {MiddlePanel: MiddlePanel,
MiddlePanelFilter: MiddlePanelFilter};
|
