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 ( ); }, setAllFilter: function() { this.setState({filter: 'all'}); MiddlePanelActions.setFilter('all'); }, setUnreadFilter: function() { this.setState({filter: 'unread'}); MiddlePanelActions.setFilter('unread'); }, setLikedFilter: function() { this.setState({filter: 'liked'}); MiddlePanelActions.setFilter('liked'); }, }); 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};