var React = require('react');
var Row = require('react-bootstrap/lib/Row');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var ListGroup = require('react-bootstrap/lib/ListGroup');
var ListGroupItem = require('react-bootstrap/lib/ListGroupItem');
var Glyphicon = require('react-bootstrap/lib/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 (
{read}
{liked}
{this.props.title}
);
},
toogleRead: function() {
this.setState({read: !this.state.read});
MiddlePanelActions.changeRead(this.props.article_id, !this.state.read);
},
toogleLike: function() {
this.setState({liked: !this.state.liked});
MiddlePanelActions.changeLike(this.props.article_id, !this.state.liked);
},
});
var MiddlePanelFilter = React.createClass({
getInitialState: function() {
return {filter: MiddlePanelStore._datas.filter};
},
render: function() {
return (
);
},
componentDidMount: function() {
MiddlePanelStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
MiddlePanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState({filter: MiddlePanelStore._datas.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};