ParseReact written in ES6.

ParseReact-written-in-ES6.js

import React from 'react/addons';
import QuestionListItem from './QuestionListItem.react';
import MessageComposer from './MessageComposer.react';
import { Parse } from 'parse';
import ParseReact from 'parse-react';
import ReactMixin from 'react-mixin';
import ActionCreators from '../../actions/ActionCreators';
import RouterContainer from '../../services/RouterContainer';
import QuestionStore from '../../stores/QuestionStore';

class QuestionSection extends React.Component {

  constructor(props) {
    super(props);
    this.state = {error: null};
    this.onClickQuestion = this.onClickQuestion.bind(this);
  }

  observe() {
    return { questions: (new Parse.Query('Question')).include('user').descending('createdAt').limit(10) };
  }

  render() {
    var questionListItems = this.data.questions.map(function(question) {

      //just after creating new question, question.objectId is empty. So put temp key.
      var key = question.objectId;
      if (key == null) {
        key = 'tempObjectId';
      }
      return (
        <QuestionListItem
          key={key}
          question={question}
          onClickQuestion={this.onClickQuestion}
        />
      );
    }, this);

    var content = (
      <div className='emptyTable'>
        <h2>no questions yet (´・ω・｀)</h2>
      </div>
    );
    if (this.data.questions.length) {
      content = <ul>{questionListItems}</ul>;
    } else if (QuestionStore.getQuestions().length > 0) {
      //Before finishing reloading, the question data pulld from store is used. 
      this.data.questions = QuestionStore.getQuestions();
      content = <ul>{questionListItems}</ul>;
    } else if (this.pendingQueries().length) {
      content = <div className='loading' />;
    }
    return (
      <div className="questionSection">
        <MessageComposer submit={this.submitQuestion} />
          {
            this.state.error ?
            <div className='row centered errors'>{this.state.error}</div> :
            null
          }
        <div className="q-list">
          {content}
        </div>
      </div>
    );
  }

  submitQuestion(message) {
    ParseReact.Mutation.Create('Question',
    {
      message: message,
      user: Parse.User.current()
    })
    .dispatch()
    .then(() => {/* You need do nothing. */})
    .fail((error) => this.setState({error: error.message}));//TODO:error handling
  }

  onClickQuestion(question) {
    ActionCreators.setCurrentQuestion(question);
    ActionCreators.setQuestions(this.data.questions);
    RouterContainer.get().transitionTo('/answer/:id', {id:question.objectId}, {});
  }

}

ReactMixin(QuestionSection.prototype, ParseReact.Mixin);
export default QuestionSection;