Updated Eslint Packages and Fixed All Lint Errors

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

@@ -1,14 +1,16 @@
-import BaseComponent from 'libs/components/BaseComponent';
 import React, { PropTypes } from 'react';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import CommentForm from './CommentForm/CommentForm';
-import CommentList, { CommentPropTypes } from './CommentList/CommentList';
-import css from './CommentBox.scss';
 import Immutable from 'immutable';
 import ActionCable from 'actioncable';
-import { SelectLanguage } from 'libs/i18n/selectLanguage';
+import _ from 'lodash';
+import BaseComponent from 'libs/components/BaseComponent';
+import { injectIntl, intlShape } from 'react-intl';
+import SelectLanguage from 'libs/i18n/selectLanguage';
 import { defaultMessages, defaultLocale } from 'libs/i18n/default';
 
+import CommentForm from './CommentForm/CommentForm';
+import CommentList, { CommentPropTypes } from './CommentList/CommentList';
+import css from './CommentBox.scss';
+
 class CommentBox extends BaseComponent {
   static propTypes = {
     pollInterval: PropTypes.number.isRequired,
@@ -34,18 +36,21 @@ class CommentBox extends BaseComponent {
 
   subscribeChannel() {
     const { messageReceived } = this.props.actions;
-    const protocol = window.location.protocol === "https:" ? "wss://" : "ws://"
-    this.cable = ActionCable.createConsumer(protocol+window.location.hostname+":"+window.location.port+"/cable");
-    this.cable.subscriptions.create({channel: "CommentsChannel"}, {
+    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const cableUrl = `${protocol}${window.location.hostname}:${window.location.port}/cable`;
+    this.cable = ActionCable.createConsumer(cableUrl);
+
+    /* eslint no-console: ["error", { allow: ["log"] }] */
+    this.cable.subscriptions.create({ channel: 'CommentsChannel' }, {
       connected: () => {
-        console.log("connected")
+        console.log('connected');
       },
       disconnected: () => {
-        console.log("disconnected")
+        console.log('disconnected');
       },
       received: (comment) => {
         messageReceived(Immutable.fromJS(comment));
-      }
+      },
     });
   }
 
@@ -56,7 +61,7 @@ class CommentBox extends BaseComponent {
   }
 
   componentWillUnmount() {
-    this.cable.subscriptions.remove({ channel: "CommentsChannel" });
+    this.cable.subscriptions.remove({ channel: 'CommentsChannel' });
   }
 
   refreshComments() {
@@ -75,6 +80,7 @@ class CommentBox extends BaseComponent {
     };
     const locale = data.get('locale') || defaultLocale;
 
+    /* eslint-disable no-script-url */
     return (
       <div className="commentBox container">
         <h2>
@@ -84,11 +90,11 @@ class CommentBox extends BaseComponent {
         { SelectLanguage(actions.setLocale, locale) }
         <ul>
           <li>
-        {data.get('isFetching') && <br/> ||
-          <a href="javascript:void(0)" onClick={this.refreshComments}>
-            {formatMessage(defaultMessages.descriptionForceRefrech)}
-          </a>
-        }
+            { (data.get('isFetching') && <br />) ||
+              <a href="javascript:void(0)" onClick={this.refreshComments}>
+                {formatMessage(defaultMessages.descriptionForceRefrech)}
+              </a>
+            }
           </li>
           <li>{formatMessage(defaultMessages.descriptionSupportMarkdown)}</li>
           <li>{formatMessage(defaultMessages.descriptionDeleteRule)}</li>

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

@@ -294,7 +294,7 @@ class CommentForm extends BaseComponent {
     }, []);
 
     return (
-      <Alert bsStyle='danger' key='commentSubmissionError'>
+      <Alert bsStyle="danger" key="commentSubmissionError">
         <strong>Your comment was not saved!</strong>
         <ul>
           {errorElements}
@@ -336,7 +336,7 @@ class CommentForm extends BaseComponent {
           {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}>{formatMessage(defaultMessages.formHorizontal)}</NavItem>
           <NavItem eventKey={1}>{formatMessage(defaultMessages.formStacked)}</NavItem>
           <NavItem eventKey={2}>{formatMessage(defaultMessages.formInline)}</NavItem>

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

@@ -1,49 +1,17 @@
+import React from 'react';
 import request from 'axios';
 import Immutable from 'immutable';
 import _ from 'lodash';
-import React from 'react';
 import ReactOnRails from 'react-on-rails';
-import { IntlProvider, injectIntl, intlShape } from 'react-intl';
+import { IntlProvider, injectIntl } from 'react-intl';
 import BaseComponent from 'libs/components/BaseComponent';
+import SelectLanguage from 'libs/i18n/selectLanguage';
+import { defaultMessages, defaultLocale } from 'libs/i18n/default';
+import { translations } from 'libs/i18n/translations';
 
 import CommentForm from '../CommentBox/CommentForm/CommentForm';
 import CommentList from '../CommentBox/CommentList/CommentList';
 import css from './SimpleCommentScreen.scss';
-import { SelectLanguage } from 'libs/i18n/selectLanguage';
-import { defaultMessages, defaultLocale } from 'libs/i18n/default';
-import { translations } from 'libs/i18n/translations';
-
-export default class I18nWrapper extends BaseComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      locale: defaultLocale,
-    };
-
-    _.bindAll(this, 'handleSetLocale');
-  }
-
-  handleSetLocale(locale) {
-    this.setState({ locale: locale });
-  }
-
-  render() {
-    const { locale } = this.state;
-    const messages = translations[locale];
-    const InjectedSimpleCommentScreen = injectIntl(SimpleCommentScreen);
-
-    return (
-      <IntlProvider locale={locale} key={locale} messages={messages}>
-        <InjectedSimpleCommentScreen
-          {...this.props}
-          locale={locale}
-          handleSetLocale={this.handleSetLocale}
-        />
-      </IntlProvider>
-    );
-  }
-}
 
 class SimpleCommentScreen extends BaseComponent {
   constructor(props) {
@@ -113,7 +81,7 @@ class SimpleCommentScreen extends BaseComponent {
     };
 
     return (
-      <div className='commentBox container'>
+      <div className="commentBox container">
         <h2>
           {formatMessage(defaultMessages.comments)}
         </h2>
@@ -138,3 +106,35 @@ class SimpleCommentScreen extends BaseComponent {
     );
   }
 }
+
+export default class I18nWrapper extends BaseComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      locale: defaultLocale,
+    };
+
+    _.bindAll(this, 'handleSetLocale');
+  }
+
+  handleSetLocale(locale) {
+    this.setState({ locale });
+  }
+
+  render() {
+    const { locale } = this.state;
+    const messages = translations[locale];
+    const InjectedSimpleCommentScreen = injectIntl(SimpleCommentScreen);
+
+    return (
+      <IntlProvider locale={locale} key={locale} messages={messages}>
+        <InjectedSimpleCommentScreen
+          {...this.props}
+          locale={locale}
+          handleSetLocale={this.handleSetLocale}
+        />
+      </IntlProvider>
+    );
+  }
+}

client/app/bundles/comments/containers/NonRouterCommentsContainer.jsx

@@ -1,17 +1,16 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-
 import BaseComponent from 'libs/components/BaseComponent';
-
-import CommentScreen from '../components/CommentScreen/CommentScreen';
-import * as commentsActionCreators from '../actions/commentsActionCreators';
 import { IntlProvider } from 'react-intl';
 import { translations } from 'libs/i18n/translations';
 import { defaultLocale } from 'libs/i18n/default';
-
 // polyfill for server-side rendering, required by react-intl
 import Intl from 'intl';
+
+import CommentScreen from '../components/CommentScreen/CommentScreen';
+import * as commentsActionCreators from '../actions/commentsActionCreators';
+
 global.Intl = Intl;
 
 function select(state) {

client/app/bundles/comments/containers/RouterCommentsContainer.jsx

@@ -1,16 +1,15 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-
-import BaseComponent from 'libs/components/BaseComponent';
 import { IntlProvider } from 'react-intl';
+import Intl from 'intl';
+import { defaultLocale } from 'libs/i18n/default';
+import { translations } from 'libs/i18n/translations';
+import BaseComponent from 'libs/components/BaseComponent';
+
 import CommentScreen from '../components/CommentScreen/CommentScreen';
 import * as commentsActionCreators from '../actions/commentsActionCreators';
-import { translations } from 'libs/i18n/translations';
-import { defaultLocale } from 'libs/i18n/default';
 
-// polyfill for server-side rendering, required by react-intl
-import Intl from 'intl';
 global.Intl = Intl;
 
 function select(state) {

client/app/bundles/comments/startup/clientRegistration.jsx

@@ -1,18 +1,18 @@
 import ReactOnRails from 'react-on-rails';
 
+import { addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
+import de from 'react-intl/locale-data/de';
+import ja from 'react-intl/locale-data/ja';
+import zh from 'react-intl/locale-data/zh';
+
 import App from './App';
 import RouterApp from './ClientRouterApp';
 import SimpleCommentScreen from '../components/SimpleCommentScreen/SimpleCommentScreen';
 import routerCommentsStore from '../store/routerCommentsStore';
 import commentsStore from '../store/commentsStore';
 import NavigationBarApp from './NavigationBarApp';
 
-import { addLocaleData } from 'react-intl';
-import en from 'react-intl/locale-data/en';
-import de from 'react-intl/locale-data/de';
-import ja from 'react-intl/locale-data/ja';
-import zh from 'react-intl/locale-data/zh';
-
 // Initizalize all locales for react-intl.
 addLocaleData([...en, ...de, ...ja, ...zh]);
 

client/app/libs/components/BaseComponent.jsx

@@ -1,4 +1,4 @@
 import React from 'react';
 
-export default class BaseComponent extends React.PureComponent {
-};
+/* eslint-disable react/prefer-stateless-function */
+export default class BaseComponent extends React.PureComponent { }

client/app/libs/i18n/selectLanguage.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
+import { defaultLocale } from 'libs/i18n/default';
+
 const SelectLanguage = (onChange, locale = defaultLocale) => (
   <select onChange={(e) => onChange(e.target.value)} value={locale} >
-    <option value='en'>English</option>
-    <option value='de'>Deutsch</option>
-    <option value='ja'>日本語</option>
-    <option value='zh-CN'>简体中文</option>
-    <option value='zh-TW'>正體中文</option>
+    <option value="en">English</option>
+    <option value="de">Deutsch</option>
+    <option value="ja">日本語</option>
+    <option value="zh-CN">简体中文</option>
+    <option value="zh-TW">正體中文</option>
   </select>
 );
 
-export { SelectLanguage };
+export default SelectLanguage;

client/package.json

@@ -96,12 +96,12 @@
     "body-parser": "^1.15.2",
     "chai": "^3.5.0",
     "chai-immutable": "^1.6.0",
-    "eslint": "^3.10.2",
-    "eslint-config-shakacode": "^13.2.0-beta.1",
-    "eslint-import-resolver-webpack": "^0.7.0",
+    "eslint": "^3.18.0",
+    "eslint-config-shakacode": "^14.1.1",
+    "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
     "estraverse-fb": "^1.3.1",
     "express": "^4.14.0",
     "jsdom": "^9.8.3",

lib/tasks/linters.rake

@@ -38,7 +38,7 @@ if %w(development test).include? Rails.env
 
     desc "eslint"
     task :eslint do
-      cmd = "cd client && $(npm bin)/eslint . -- --ext .jsx,.js"
+      cmd = "npm run lint"
       puts "Running eslint via `#{cmd}`"
       sh cmd
     end