App.jsx

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { Session } from 'meteor/session'
import { createContainer } from 'meteor/react-meteor-data';

import { Mailboxes } from '../api/mailboxes.js';
import { Mails } from '../api/mails.js';

import Mailbox from './Mailbox.jsx';
import Mail from './Mail.jsx';

import AccountsUIWrapper from './AccountsUIWrapper.jsx';

// App component - represents the whole app
export default class App extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      currentMailbox: 0
    };
  };

  handleSubmit(event) {
    event.preventDefault();

    // Find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.createMailbox_name).value.trim();

    Mailboxes.insert({
      name: text,
      length: 0,
      owner: Meteor.userId(),           // _id of logged in user
      username: Meteor.user().username,  // username of logged in user
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.createMailbox_name).value = '';
  }

  handleShowMailboxes(event) {
    event.preventDefault();
    $('.ui.sidebar')
      .sidebar('toggle')
    ;
  }

  handleSelectMailbox(event, i){
    event.preventDefault();
    //What the heck do I do put here?
    console.log('works' + i);
  }

  renderMailboxes() {
    return this.props.mailboxes.map(function(mailbox, i){
      var scope = this;
      return <Mailbox key={mailbox._id} onClick={scope.props.handleSelectMailbox.bind(this, i)} mailbox={mailbox} /> // Troubles with this too!
    });
  }

  renderMails() {
    return this.props.mails.map((mail) => (
      <Mail key={mail._id} mail={mail} />
    ));
  }

  render() {
    return (
      <div>
        <div className="ui sidebar vertical menu">
          {this.renderMailboxes()}
        </div>
        <div className="pusher">
          <div className="ui left fixed vertical menu mailmenu" style={{width:300 + 'px'}}>
            {this.renderMails()}
            <div className="item mailitem">
              <img className="ui avatar image" src="http://semantic-ui.com/images/avatar/small/stevie.jpg" />
              <div className="content">
                <div className="header">Stevie Feliciano</div>
                Concerning the yellow ape beh...
              </div>
            </div>
            <div className="item mailitem">
              <img className="ui avatar image" src="http://semantic-ui.com/images/avatar/small/elliot.jpg" />
              <div className="content">
                <div className="header">Elliot Fu</div>
                Whazzzzaaaap
              </div>
            </div>
            <div className="item">
              <button className="ui button" id="showMailboxes" onClick={this.handleShowMailboxes.bind(this)}>Show Mailboxes</button>
            </div>
          </div>
          <AccountsUIWrapper />
            { this.props.currentUser ?
              <form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
                <input
                  type="text"
                  ref="createMailbox_name"
                  placeholder="Mailbox Name"
                />
              </form> : ''
            }
        </div>
      </div>
    );
  }

  componentDidMount() {
    $('.ui.sidebar')
      .sidebar('setting', 'dimPage', false)
      .sidebar('setting', 'closeable', false)
      .sidebar('toggle')
    ;
  }
}

App.propTypes = {
  mailboxes: PropTypes.array.isRequired,
  mails: PropTypes.array.isRequired,
  currentMailbox: PropTypes.object.isRequired,
  currentUser: PropTypes.object,
};

export default createContainer(() => {
  return {
    mailboxes: Mailboxes.find({}).fetch(),
    mails: Mails.find({mailbox_id: Session.get('currentMailbox', 0)}).fetch(),
    currentMailbox: //What the heck do I do put here?
    currentUser: Meteor.user(),
  };
}, App);