/** @jsx React.DOM */

var NavView = React.createClass({
  getInitialState: function() {
    return {
      unreadCount: {}
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
        console.log('NavView $.get', result);
      this.setState({unreadCount: result});
    }.bind(this));
  },

  render: function() {
    var keys = Object.keys(this.state.unreadCount).sort();
    var lis = [];
    for (var i in keys) {
        var key = keys[i];
        var value = this.state.unreadCount[key];
        lis.push(<li key={key}><a href="#">{key}</a></li>);
    }
    return (
<div id="nav" className="pure-u">
    <div className="nav-inner">
        <button className="primary-button pure-button">Compose</button>
        <div id="unread-list" className="pure-menu pure-menu-open">
            <ul>{lis}</ul>
        </div>
    </div>
</div>
);
  }
});