Merge pull request shakacode#317 from shakacode/update-linter

Update Linter

Author: justin808

client/.eslintrc.yml

@@ -27,7 +27,15 @@ rules:
   no-underscore-dangle: 0
 
   ### Imports
+  # Can't do next one because of alias in webpack
   import/no-unresolved: 0
+  import/extensions: [2, { js: "never", jsx: "never" }]
+
+  # https://github.com/benmosher/eslint-plugin-import/issues/340
+  import/no-extraneous-dependencies: 0
+
+  # https://github.com/eslint/eslint/issues/6876 SFC's marked as invalid
+  new-cap: 0
 
   ### React
   jsx-quotes: [1, prefer-double]
@@ -47,7 +55,6 @@ rules:
   react/no-unknown-property: 2
   react/prop-types: 1
   react/react-in-jsx-scope: 2
-  react/require-extension: [1, { extensions: [.js, .jsx] }]
   react/self-closing-comp: 2
   react/sort-comp: 0                                                            # Should be 1. `statics` should be on top.
-  react/wrap-multilines: 2
+  react/jsx-wrap-multilines: 2

client/.jscsrc

@@ -10,6 +10,7 @@
     "node_modules/**"
   ],
   "esprima": "babel-jscs",
+  "requirePaddingNewLinesAfterBlocks": false,
   "validateQuoteMarks": {
     "mark": "'",
     "escape": true,

client/app/bundles/comments/components/CommentBox/CommentBox.jsx

@@ -1,9 +1,9 @@
+import BaseComponent from 'libs/components/BaseComponent';
 import React, { PropTypes } from 'react';
 
 import CommentForm from './CommentForm/CommentForm';
 import CommentList from './CommentList/CommentList';
 import css from './CommentBox.scss';
-import BaseComponent from 'libs/components/BaseComponent';
 
 export default class CommentBox extends BaseComponent {
   static propTypes = {

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import Input from 'react-bootstrap/lib/Input';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@@ -44,18 +43,29 @@ export default class CommentForm extends BaseComponent {
   _handleChange() {
     let comment;
 
-    if (this.state.formMode < 2) {
-      comment = {
-        author: this.refs.author.getValue(),
-        text: this.refs.text.getValue(),
-      };
-    } else {
-      comment = {
-        // This is different because the input is a native HTML element
-        // rather than a React element.
-        author: this.refs.inlineAuthor.value,
-        text: this.refs.inlineText.value,
-      };
+    switch (this.state.formMode) {
+      case 0:
+        comment = {
+          author: this.horizontalAuthorNode.getValue(),
+          text: this.horizontalTextNode.getValue(),
+        };
+        break;
+      case 1:
+        comment = {
+          author: this.stackedAuthorNode.getValue(),
+          text: this.stackedTextNode.getValue(),
+        };
+        break;
+      case 2:
+        comment = {
+          // This is different because the input is a native HTML element
+          // rather than a React element.
+          author: this.inlineAuthorNode.value,
+          text: this.inlineTextNode.value,
+        };
+        break;
+      default:
+        throw new Error(`Unexpected state.formMode ${this.state.formMode}`);
     }
 
     this.setState({ comment });
@@ -77,10 +87,18 @@ export default class CommentForm extends BaseComponent {
     this.setState({ comment });
 
     let ref;
-    if (this.state.formMode < 2) {
-      ref = this.refs.text.getInputDOMNode();
-    } else {
-      ref = ReactDOM.findDOMNode(this.refs.inlineText);
+    switch (this.state.formMode) {
+      case 0:
+        ref = this.horizontalTextNode.getInputDOMNode();
+        break;
+      case 1:
+        ref = this.stackedTextNode.getInputDOMNode();
+        break;
+      case 2:
+        ref = this.inlineTextNode;
+        break;
+      default:
+        throw new Error(`Unexpected state.formMode ${this.state.formMode}`);
     }
 
     ref.focus();
@@ -97,7 +115,7 @@ export default class CommentForm extends BaseComponent {
             placeholder="Your Name"
             labelClassName="col-sm-2"
             wrapperClassName="col-sm-10"
-            ref="author"
+            ref={node => { this.horizontalAuthorNode = node; }}
             value={this.state.comment.author}
             onChange={this._handleChange}
             disabled={this.props.isSaving}
@@ -108,7 +126,7 @@ export default class CommentForm extends BaseComponent {
             placeholder={textPlaceholder}
             labelClassName="col-sm-2"
             wrapperClassName="col-sm-10"
-            ref="text"
+            ref={node => { this.horizontalTextNode = node; }}
             value={this.state.comment.text}
             onChange={this._handleChange}
             disabled={this.props.isSaving}
@@ -137,7 +155,7 @@ export default class CommentForm extends BaseComponent {
             type="text"
             label="Name"
             placeholder="Your Name"
-            ref="author"
+            ref={node => { this.stackedAuthorNode = node; }}
             value={this.state.comment.author}
             onChange={this._handleChange}
             disabled={this.props.isSaving}
@@ -146,7 +164,7 @@ export default class CommentForm extends BaseComponent {
             type="textarea"
             label="Text"
             placeholder={textPlaceholder}
-            ref="text"
+            ref={node => { this.stackedTextNode = node; }}
             value={this.state.comment.text}
             onChange={this._handleChange}
             disabled={this.props.isSaving}
@@ -174,7 +192,7 @@ export default class CommentForm extends BaseComponent {
                   type="text"
                   className="form-control"
                   placeholder="Your Name"
-                  ref="inlineAuthor"
+                  ref={node => { this.inlineAuthorNode = node; }}
                   value={this.state.comment.author}
                   onChange={this._handleChange}
                   disabled={this.props.isSaving}
@@ -185,7 +203,7 @@ export default class CommentForm extends BaseComponent {
                   type="text"
                   className="form-control"
                   placeholder={textPlaceholder}
-                  ref="inlineText"
+                  ref={node => { this.inlineTextNode = node; }}
                   value={this.state.comment.text}
                   onChange={this._handleChange}
                   disabled={this.props.isSaving}

client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx

@@ -1,8 +1,8 @@
+import BaseComponent from 'libs/components/BaseComponent';
 import React, { PropTypes } from 'react';
-import marked from 'marked';
 
+import marked from 'marked';
 import css from './Comment.scss';
-import BaseComponent from 'libs/components/BaseComponent';
 
 export default class Comment extends BaseComponent {
   static propTypes = {

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react';
-import Immutable from 'immutable';
 import Alert from 'react-bootstrap/lib/Alert';
+import BaseComponent from 'libs/components/BaseComponent';
+import Immutable from 'immutable';
+import React, { PropTypes } from 'react';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import _ from 'lodash';
 
 import Comment from './Comment/Comment';
-import BaseComponent from 'libs/components/BaseComponent';
 
 export default class CommentList extends BaseComponent {
   static propTypes = {

client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react';
 
+import BaseComponent from 'libs/components/BaseComponent';
+
 import CommentBox from '../CommentBox/CommentBox';
 import css from './CommentScreen.scss';
-import BaseComponent from 'libs/components/BaseComponent';
 
 export default class CommentScreen extends BaseComponent {
 

client/app/bundles/comments/components/NavigationBar/CommentsCount.jsx

@@ -1,10 +1,10 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 
 const href = 'https://github.com/shakacode/react_on_rails/blob/master/README.md#multiple-react-' +
   'components-on-a-page-with-one-store';
 const CommentsCount = (props) => (
   <li>
-    <a id='js-comment-count' href={href}>
+    <a id="js-comment-count" href={href}>
       Comments: {props.commentsCount}
     </a>
   </li>

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -1,6 +1,9 @@
-import React, {PropTypes} from 'react';
-import ReactOnRails from 'react-on-rails';
+// https://github.com/eslint/eslint/issues/6876
+// eslint-disable new-cap
+
 import classNames from 'classnames';
+import React, { PropTypes } from 'react';
+
 import CommentsCount from './CommentsCount';
 import * as paths from '../../constants/paths';
 
@@ -18,9 +21,9 @@ const NavigationBar = (props) => {
             data-target="#bs-example-navbar-collapse-1"
           >
             <span className="sr-only">Toggle navigation</span>
-            <span className="icon-bar"/>
-            <span className="icon-bar"/>
-            <span className="icon-bar"/>
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+            <span className="icon-bar" />
           </button>
           <a className="navbar-brand" href="http://www.shakacode.com">ShakaCode</a>
         </div>
@@ -39,27 +42,33 @@ const NavigationBar = (props) => {
               <a href={paths.RAILS_PATH}>Classic Rails</a>
             </li>
             <li>
-              <a href={
+              <a
+                href={
                   'https://github.com/' +
                   'shakacode/react-webpack-rails-tutorial'
-               }>
+               }
+              >
                 Source on Github
               </a>
             </li>
             <li>
-              <a href={
+              <a
+                href={
                   'http://www.railsonmaui.com/' +
                   'blog/2014/10/03/integrating' +
                   '-webpack-and-the-es6-transpiler' +
                   '-into-an-existing-rails-project/'
-               }>Tutorials</a>
+               }
+              >Tutorials</a>
             </li>
             <li>
-              <a href={
+              <a
+                href={
                   'http://forum.shakacode.com/' +
                   't/fast-rich-client-rails-development' +
                   '-with-webpack-and-the-es6-transpiler/82/22'
-               }>Forum</a>
+               }
+              >Forum</a>
             </li>
             {commentsCount && CommentsCount({ commentsCount })}
           </ul>

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx

@@ -3,11 +3,12 @@ import Immutable from 'immutable';
 import request from 'axios';
 import _ from 'lodash';
 
+import BaseComponent from 'libs/components/BaseComponent';
 import metaTagsManager from 'libs/metaTagsManager';
+
 import CommentForm from '../CommentBox/CommentForm/CommentForm';
 import CommentList from '../CommentBox/CommentList/CommentList';
 import css from './SimpleCommentScreen.scss';
-import BaseComponent from 'libs/components/BaseComponent';
 
 export default class SimpleCommentScreen extends BaseComponent {
   constructor(props, context) {