Merge pull request #140 from rstudner/es6-react-classes

ES6 all React stuff.

Author: justin808

client/.eslintrc

@@ -14,4 +14,4 @@ rules:
   indent: [1, 2, { SwitchCase: 1, VariableDeclarator: 2 }]
   react/sort-comp: 0
   react/jsx-quotes: 1
-  id-length: [2, {"exceptions": ["e", "i"]}]
+  id-length: [2, {"exceptions": ["e", "i", "_"]}]

client/app/components/Comment.jsx

@@ -1,13 +1,12 @@
 import React, { PropTypes } from 'react';
 import marked from 'marked';
 
-const Comment = React.createClass({
-  displayName: 'Comment',
-
-  propTypes: {
+class Comment extends React.Component {
+  static displayName = 'Comment';
+  static propTypes = {
     author: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
-  },
+  };
 
   render() {
     const { author, text } = this.props;
@@ -20,7 +19,7 @@ const Comment = React.createClass({
         <span dangerouslySetInnerHTML={{__html: rawMarkup}}/>
       </div>
     );
-  },
-});
+  }
+}
 
 export default Comment;

client/app/components/CommentBox.jsx

@@ -2,44 +2,51 @@ import React, { PropTypes } from 'react';
 
 import CommentForm from './CommentForm';
 import CommentList from './CommentList';
+import _ from 'lodash';
 
-const CommentBox = React.createClass({
-  displayName: 'CommentBox',
+class CommentBox extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {};
 
-  propTypes: {
+    _.bindAll(this, '_ajaxCounter', '_isSendingAjax');
+  }
+
+  static displayName = 'CommentBox';
+  static propTypes = {
     pollInterval: PropTypes.number.isRequired,
     actions: PropTypes.object.isRequired,
     data: PropTypes.object.isRequired,
-  },
+  };
 
   componentDidMount() {
     const { fetchComments } = this.props.actions;
     fetchComments();
     setInterval(fetchComments, this.props.pollInterval);
-  },
+  }
 
-  ajaxCounter() {
+  _ajaxCounter() {
     return this.props.data.get('ajaxCounter');
-  },
+  }
 
-  isSendingAjax() {
-    return this.ajaxCounter() > 0;
-  },
+  _isSendingAjax() {
+    return this._ajaxCounter() > 0;
+  }
 
   render() {
     const { actions, data } = this.props;
 
     return (
       <div className="commentBox container">
         <h2>
-          Comments { this.isSendingAjax() && `SENDING AJAX REQUEST! Ajax Counter is ${this.ajaxCounter()}` }
+          Comments { this._isSendingAjax() && `SENDING AJAX REQUEST! Ajax Counter is ${this._ajaxCounter()}` }
         </h2>
         <p>
           Text take Github Flavored Markdown. Comments older than 24 hours are deleted.
           <b>Name</b> is preserved, <b>Text</b> is reset, between submits.
         </p>
         <CommentForm
-          ajaxSending={this.isSendingAjax()}
+          ajaxSending={this._isSendingAjax()}
           error={data.get('submitCommentError')}
           actions={actions}
         />
@@ -49,7 +56,7 @@ const CommentBox = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
 export default CommentBox;

client/app/components/CommentForm.jsx

@@ -6,35 +6,37 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
+import _ from 'lodash';
 
 const emptyComment = { author: '', text: '' };
 const textPlaceholder = 'Say something using markdown...';
 
-const CommentForm = React.createClass({
-  displayName: 'CommentForm',
+class CommentForm extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      formMode: 0,
+      comment: emptyComment,
+    };
+
+    _.bindAll(this, '_handleSelect', '_handleChange', '_handleSubmit', '_resetAndFocus');
+  }
+
+  static displayName = 'CommentForm';
 
-  propTypes: {
+  static propTypes = {
     ajaxSending: PropTypes.bool.isRequired,
     actions: PropTypes.object.isRequired,
     error: PropTypes.any,
-  },
-
-  getInitialState() {
-    return {
-      formMode: 0,
-      comment: emptyComment,
-    };
-  },
+  };
 
-  handleSelect(selectedKey) {
+  _handleSelect(selectedKey) {
     this.setState({ formMode: selectedKey });
-  },
+  }
 
-  handleChange() {
+  _handleChange() {
     let comment;
 
-    // This could also be done using ReactLink:
-    // http://facebook.github.io/react/docs/two-way-binding-helpers.html
     if (this.state.formMode < 2) {
       comment = {
         author: this.refs.author.getValue(),
@@ -50,17 +52,17 @@ const CommentForm = React.createClass({
     }
 
     this.setState({ comment });
-  },
+  }
 
-  handleSubmit(e) {
+  _handleSubmit(e) {
     e.preventDefault();
     const { actions } = this.props;
     actions
       .submitComment(this.state.comment)
-      .then(this.resetAndFocus);
-  },
+      .then(this._resetAndFocus);
+  }
 
-  resetAndFocus() {
+  _resetAndFocus() {
     // Don't reset a form that didn't submit, this results in data loss
     if (this.props.error) return;
 
@@ -75,13 +77,13 @@ const CommentForm = React.createClass({
     }
 
     ref.focus();
-  },
+  }
 
-  formHorizontal() {
+  _formHorizontal() {
     return (
       <div>
         <hr />
-        <form className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
+        <form className="commentForm form-horizontal" onSubmit={this._handleSubmit}>
           <Input
             type="text"
             label="Name"
@@ -90,7 +92,7 @@ const CommentForm = React.createClass({
             wrapperClassName="col-sm-10"
             ref="author"
             value={this.state.comment.author}
-            onChange={this.handleChange}
+            onChange={this._handleChange}
             disabled={this.props.ajaxSending}
           />
           <Input
@@ -101,7 +103,7 @@ const CommentForm = React.createClass({
             wrapperClassName="col-sm-10"
             ref="text"
             value={this.state.comment.text}
-            onChange={this.handleChange}
+            onChange={this._handleChange}
             disabled={this.props.ajaxSending}
           />
           <div className="form-group">
@@ -117,20 +119,20 @@ const CommentForm = React.createClass({
         </form>
       </div>
     );
-  },
+  }
 
-  formStacked() {
+  _formStacked() {
     return (
       <div>
         <hr />
-        <form className="commentForm form" onSubmit={this.handleSubmit}>
+        <form className="commentForm form" onSubmit={this._handleSubmit}>
           <Input
             type="text"
             label="Name"
             placeholder="Your Name"
             ref="author"
             value={this.state.comment.author}
-            onChange={this.handleChange}
+            onChange={this._handleChange}
             disabled={this.props.ajaxSending}
           />
           <Input
@@ -139,7 +141,7 @@ const CommentForm = React.createClass({
             placeholder={textPlaceholder}
             ref="text"
             value={this.state.comment.text}
-            onChange={this.handleChange}
+            onChange={this._handleChange}
             disabled={this.props.ajaxSending}
           />
           <input
@@ -151,13 +153,13 @@ const CommentForm = React.createClass({
         </form>
       </div>
     );
-  },
+  }
 
-  formInline() {
+  _formInline() {
     return (
       <div>
         <hr />
-        <form className="commentForm form" onSubmit={this.handleSubmit}>
+        <form className="commentForm form" onSubmit={this._handleSubmit}>
           <Input label="Inline Form" wrapperClassName="wrapper">
             <Row>
               <Col xs={3}>
@@ -167,7 +169,7 @@ const CommentForm = React.createClass({
                   placeholder="Your Name"
                   ref="inlineAuthor"
                   value={this.state.comment.author}
-                  onChange={this.handleChange}
+                  onChange={this._handleChange}
                   disabled={this.props.ajaxSending}
                 />
               </Col>
@@ -178,7 +180,7 @@ const CommentForm = React.createClass({
                   placeholder={textPlaceholder}
                   ref="inlineText"
                   value={this.state.comment.text}
-                  onChange={this.handleChange}
+                  onChange={this._handleChange}
                   disabled={this.props.ajaxSending}
                 />
               </Col>
@@ -195,9 +197,9 @@ const CommentForm = React.createClass({
         </form>
       </div>
     );
-  },
+  }
 
-  errorWarning() {
+  _errorWarning() {
     // If there is no error, there is nothing to add to the DOM
     if (!this.props.error) return undefined;
     return (
@@ -206,19 +208,19 @@ const CommentForm = React.createClass({
         A server error prevented your comment from being saved. Please try again.
       </Alert>
     );
-  },
+  }
 
   render() {
     let inputForm;
     switch (this.state.formMode) {
       case 0:
-        inputForm = this.formHorizontal();
+        inputForm = this._formHorizontal();
         break;
       case 1:
-        inputForm = this.formStacked();
+        inputForm = this._formStacked();
         break;
       case 2:
-        inputForm = this.formInline();
+        inputForm = this._formInline();
         break;
       default:
         throw new Error(`Unknown form mode: ${this.state.formMode}.`);
@@ -230,18 +232,18 @@ const CommentForm = React.createClass({
           transitionEnterTimeout={300}
           transitionLeaveTimeout={300}
         >
-          {this.errorWarning()}
+          {this._errorWarning()}
         </ReactCSSTransitionGroup>
 
-        <Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this.handleSelect}>
+        <Nav bsStyle="pills" activeKey={this.state.formMode} onSelect={this._handleSelect}>
           <NavItem eventKey={0}>Horizontal Form</NavItem>
           <NavItem eventKey={1}>Stacked Form</NavItem>
           <NavItem eventKey={2}>Inline Form</NavItem>
         </Nav>
         {inputForm}
       </div>
     );
-  },
-});
+  }
+}
 
 export default CommentForm;