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 Glyphicon = require('react-bootstrap/lib/Glyphicon');
var MiddlePanelStore = require('../stores/MiddlePanelStore');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
var RightPanelActions = require('../actions/RightPanelActions');
var JarrTime = require('./time.react');
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,
timestamp: React.PropTypes.number.isRequired,
date: React.PropTypes.string.isRequired,
read: React.PropTypes.bool.isRequired,
selected: React.PropTypes.bool.isRequired,
liked: React.PropTypes.bool.isRequired,
},
getInitialState: function() {
return {read: this.props.read, liked: this.props.liked,
selected: false};
},
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 = ();
icon = ;
var clsses = "list-group-item";
if(this.props.selected) {
clsses += " active";
}
// FIXME https://github.com/yahoo/react-intl/issues/189
// use FormattedRelative when fixed, will have to upgrade to ReactIntlv2
return (
{title}
{read} {liked} {this.props.title}
);
},
openRedirectLink: function(evnt) {
if(!this.state.read) {
this.toogleRead(evnt);
}
},
toogleRead: function(evnt) {
this.setState({read: !this.state.read}, function() {
MiddlePanelActions.changeRead(this.props.category_id,
this.props.feed_id, this.props.article_id, this.state.read);
}.bind(this));
evnt.stopPropagation();
},
toogleLike: function(evnt) {
this.setState({liked: !this.state.liked}, function() {
MiddlePanelActions.changeLike(this.props.category_id,
this.props.feed_id, this.props.article_id, this.state.liked);
}.bind(this));
evnt.stopPropagation();
},
loadArticle: function() {
this.setState({selected: true, read: true}, function() {
RightPanelActions.loadArticle(
this.props.article_id, this.props.read);
}.bind(this));
},
stopPropagation: function(evnt) {
evnt.stopPropagation();
},
});
var MiddlePanelSearchRow = React.createClass({
getInitialState: function() {
return {query: MiddlePanelStore._datas.query,
search_title: MiddlePanelStore._datas.search_title,
search_content: MiddlePanelStore._datas.search_content,
};
},
render: function() {
return (
);
},
setQuery: function(evnt) {
this.setState({query: evnt.target.value});
},
toogleSTitle: function() {
this.setState({search_title: !this.state.search_title},
this.launchSearch);
},
toogleSContent: function() {
this.setState({search_content: !this.state.search_content},
this.launchSearch);
},
launchSearch: function(evnt) {
if(this.state.query && (this.state.search_title
|| this.state.search_content)) {
MiddlePanelActions.search({query: this.state.query,
title: this.state.search_title,
content: this.state.search_content});
}
if(evnt) {
evnt.preventDefault();
}
},
});
var MiddlePanelFilter = React.createClass({
getInitialState: function() {
return {filter: MiddlePanelStore._datas.filter,
display_search: MiddlePanelStore._datas.display_search};
},
render: function() {
var search_row = null;
if(this.state.display_search) {
search_row =
}
return (
{search_row}
);
},
setAllFilter: function() {
this.setState({filter: 'all'}, function() {
MiddlePanelActions.setFilter('all');
}.bind(this));
},
setUnreadFilter: function() {
this.setState({filter: 'unread'}, function() {
MiddlePanelActions.setFilter('unread');
}.bind(this));
},
setLikedFilter: function() {
this.setState({filter: 'liked'}, function() {
MiddlePanelActions.setFilter('liked');
}.bind(this));
},
toogleSearch: function() {
this.setState({display_search: !this.state.display_search},
function() {
if(!this.state.display_search) {
MiddlePanelActions.search_off();
}
}.bind(this)
);
},
});
var MiddlePanel = React.createClass({
getInitialState: function() {
return {filter: MiddlePanelStore._datas.filter, articles: []};
},
render: function() {
return (
{this.state.articles.map(function(article){
var key = "a" + article.article_id;
if(article.read) {key+="r";}
if(article.liked) {key+="l";}
if(article.selected) {key+="s";}
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};