var React = require('react');
var Col = require('react-bootstrap/lib/Col');
var Badge = require('react-bootstrap/lib/Badge');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Glyphicon = require('react-bootstrap/lib/Glyphicon');
var MenuStore = require('../stores/MenuStore');
var MenuActions = require('../actions/MenuActions');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
var FeedItem = React.createClass({
propTypes: {feed_id: React.PropTypes.number.isRequired,
title: React.PropTypes.string.isRequired,
unread: React.PropTypes.number.isRequired,
error_count: React.PropTypes.number.isRequired,
icon_url: React.PropTypes.string,
active: React.PropTypes.bool.isRequired,
},
render: function() {
var icon = null;
var badge_unread = null;
if(this.props.icon_url){
icon = (
);
} else {
icon = ;
}
if(this.props.unread){
badge_unread = {this.props.unread};
}
var classes = "nav-feed";
if(this.props.active) {
classes += " bg-primary";
}
if(this.props.error_count >= MenuStore._datas.max_error) {
classes += " bg-danger";
} else if(this.props.error_count > MenuStore._datas.error_threshold) {
classes += " bg-warning";
}
var title = {this.props.title};
return (
{icon}{title}{badge_unread}
);
},
handleClick: function() {
MiddlePanelActions.setFeedFilter(this.props.feed_id);
},
});
var Category = React.createClass({
propTypes: {category_id: React.PropTypes.number,
active_type: React.PropTypes.string,
active_id: React.PropTypes.number},
render: function() {
var classes = "nav-cat";
if((this.props.active_type == 'category_id'
|| this.props.category_id == null)
&& this.props.active_id == this.props.category_id) {
classes += " bg-primary";
}
return (
{this.props.children}
);
},
handleClick: function(evnt) {
// hack to avoid selection when clicking on folding icon
if(!evnt.target.classList.contains('glyphicon')) {
if(this.props.category_id != null) {
MiddlePanelActions.setCategoryFilter(this.props.category_id);
} else {
MiddlePanelActions.removeParentFilter();
}
}
},
});
var CategoryGroup = React.createClass({
propTypes: {cat_id: React.PropTypes.number.isRequired,
filter: React.PropTypes.string.isRequired,
active_type: React.PropTypes.string,
active_id: React.PropTypes.number,
name: React.PropTypes.string.isRequired,
feeds: React.PropTypes.array.isRequired,
unread: React.PropTypes.number.isRequired,
folded: React.PropTypes.bool,
},
getInitialState: function() {
return {folded: false};
},
componentWillReceiveProps: function(nextProps) {
if(nextProps.folded != null) {
this.setState({folded: nextProps.folded});
}
},
render: function() {
// hidden the no category if empty
if(!this.props.cat_id && !this.props.feeds.length) {
return ;
}
var filter = this.props.filter;
var a_type = this.props.active_type;
var a_id = this.props.active_id;
if(!this.state.folded) {
// filtering according to this.props.filter
var feeds = this.props.feeds.filter(function(feed) {
if (filter == 'unread' && feed.unread <= 0) {
return false;
} else if (filter == 'error' && feed.error_count <= MenuStore._datas.error_threshold) {
return false;
}
return true;
}).sort(function(feed_a, feed_b){
return feed_b.unread - feed_a.unread;
}).map(function(feed) {
return (
);
});
} else {
var feeds = [];
}
var unread = null;
if(this.props.unread) {
unread = {this.props.unread};
}
var ctrl = (
);
return (
{ctrl}{this.props.name}
{unread}
{feeds}
);
},
toggleFolding: function(evnt) {
this.setState({folded: !this.state.folded});
evnt.stopPropagation();
},
});
var MenuFilter = React.createClass({
propTypes: {feed_in_error: React.PropTypes.bool,
filter: React.PropTypes.string.isRequired},
getInitialState: function() {
return {allFolded: false};
},
render: function() {
var error_button = null;
if (this.props.feed_in_error) {
error_button = (
);
}
if(this.state.allFolded) {
var foldBtnTitle = "Unfold all categories";
var foldBtnGlyph = "option-horizontal";
} else {
var foldBtnTitle = "Fold all categories";
var foldBtnGlyph = "option-vertical";
}
return (
{error_button}
);
},
setAllFilter: function() {
MenuActions.setFilter("all");
},
setUnreadFilter: function() {
MenuActions.setFilter("unread");
},
setErrorFilter: function() {
MenuActions.setFilter("error");
},
toggleFold: function() {
this.setState({allFolded: !this.state.allFolded}, function() {
MenuActions.toggleAllFolding(this.state.allFolded);
}.bind(this));
},
});
var Menu = React.createClass({
getInitialState: function() {
return {filter: 'all', categories: {}, feeds: {},
all_folded: false, active_type: null, active_id: null};
},
render: function() {
var feed_in_error = false;
var rmPrntFilt = (
);
var categories = [];
for(var index in this.state.categories_order) {
var cat_id = this.state.categories_order[index];
var feeds = [];
var unread = 0;
this.state.categories[cat_id].feeds.map(function(feed_id) {
if(this.state.feeds[feed_id].error_count > MenuStore._datas.error_threshold) {
feed_in_error = true;
}
unread += this.state.feeds[feed_id].unread;
feeds.push(this.state.feeds[feed_id]);
}.bind(this));
categories.push();
}
return (
{rmPrntFilt}
{categories}
);
},
componentDidMount: function() {
var setFilterFunc = null;
var id = null;
if(window.location.search.substring(1)) {
var args = window.location.search.substring(1).split('&');
args.map(function(arg) {
if (arg.split('=')[0] == 'at' && arg.split('=')[1] == 'c') {
setFilterFunc = MiddlePanelActions.setCategoryFilter;
} else if (arg.split('=')[0] == 'at' && arg.split('=')[1] == 'f') {
setFilterFunc = MiddlePanelActions.setFeedFilter;
} else if (arg.split('=')[0] == 'ai') {
id = parseInt(arg.split('=')[1]);
}
});
}
MenuActions.reload(setFilterFunc, id);
MenuStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
MenuStore.removeChangeListener(this._onChange);
},
_onChange: function() {
var datas = MenuStore.getAll();
this.setState({filter: datas.filter,
feeds: datas.feeds,
categories: datas.categories,
categories_order: datas.categories_order,
active_type: datas.active_type,
active_id: datas.active_id,
all_folded: datas.all_folded});
},
});
module.exports = Menu;