43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
/** @jsx React.DOM */
|
|
|
|
// TODO rename this nav.
|
|
|
|
var UnreadCount = React.createClass({
|
|
getInitialState: function() {
|
|
return {
|
|
unreadCount: {}
|
|
};
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
$.get(this.props.source, function(result) {
|
|
console.log('UnreadCount $.get', result);
|
|
this.setState({unreadCount: result});
|
|
}.bind(this));
|
|
},
|
|
|
|
render: function() {
|
|
var keys = Object.keys(this.state.unreadCount).sort();
|
|
console.log('unread keys', keys);
|
|
var lis = [];
|
|
for (var i in keys) {
|
|
var key = keys[i];
|
|
var value = this.state.unreadCount[key];
|
|
var dom = React.DOM.li({key: key}, React.DOM.a({href: '#'},
|
|
React.DOM.span({className: 'email-count'}, '(', value, ')'),
|
|
' ', key
|
|
));
|
|
lis.push(dom);
|
|
}
|
|
console.log('Found', lis);
|
|
// TODO rewrite as JSX template? How to handle repreating fields?
|
|
return React.DOM.div({id: 'nav', className: 'pure-u'},
|
|
React.DOM.div({className: 'nav-inner'},
|
|
React.DOM.div({
|
|
id: 'unread-list',
|
|
className: 'pure-menu pure-menu-open'
|
|
}, React.DOM.ul({},
|
|
lis))));
|
|
}
|
|
});
|