meteor__simple-todos-react/App.jsx

// App component : represents the whole app.

App = React.createClass({

  // This mixin makes the getMeteorData work.
  mixins: [ReactMeteorData],

  getInitialState() {
    return {
      hideCompleted: false
    };
  },

  // Loads items from the Tasks collection and puts them on this.data.tasks.
  getMeteorData() {
    let query = {};

    const uncheckedQuery = { checked: { $ne: true} };

    if (this.state.hideCompleted) {
      // If hideCompleted is checked, filter tasks.
      query = uncheckedQuery;
    }
    let result = {
      tasks: Tasks.find(query, { sort: { createdAt: -1 }}).fetch(),
      // Since we already have the data in the client-side Minimongo collection,
      // adding this extra count doesn't involve asking the server for anything.
      incompleteCount: Tasks.find(uncheckedQuery).count(),
      currentUser: Meteor.user()
    };

    // Meteor._debug("result", result);
    return result;
  },

  renderTasks() {
    return this.data.tasks.map((task) => {
      // Meteor._debug(task._id);
      return <Task key={task._id} task={task} />;
    });
  },

  handleSubmit(event) {
    event.preventDefault();
    // Meteor._debug('refs', this.refs);

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

    Meteor.call("addTask", text);

    // Clear form to allow a new input.
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  },

  toggleHideCompleted() {
    this.setState({
      hideCompleted: !this.state.hideCompleted
    });
  },

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo list ({this.data.incompleteCount})</h1>

          <label className="hide-completed">
            <input type="checkbox" readOnly={true}
                   checked={this.state.hideCompleted}
                   onClick={this.toggleHideCompleted} />
            Hide completed
          </label>

          <AccountsUIWrapper />

          {/* These are JSX comments. */}
          { this.data.currentUser ?
            // Beware: for React, onsubmit is not the same as onSubmit, the former doesn't work.
            <form className="new-task" onSubmit={this.handleSubmit} >
            <input type="text" ref="textInput" placeholder="Type to add new tasks" />
            </form> : ''
          }
          </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
});