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 = (
);
} else {
icon = ;
}
var title = (
{icon} {this.props.feed_title}
);
var read = ();
var liked = ();
return (
{title}
{read} {liked} {this.props.title}
);
},
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 (
);
},
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 (
{this.state.articles.map(function(article){
return (
);})}
);
},
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};