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};