fix eslint

.eslintrc

@@ -1,11 +1,5 @@
 {
-  "parser": "babel-eslint",
-  "extends": [
-    "airbnb"
-  ],
-  "plugins": [
-    "babel"
-  ],
+  "extends": "eslint-config-topcoder/react",
   "env": {
     "browser": true,
     "mocha": true
@@ -17,27 +11,20 @@
     "google": true,
   },
   "rules": {
-    "global-require": 0,
-    "no-script-url": 0,
+    "import/no-unresolved": [2, { ignore: ['^components/', '^containers/', '^services/', '^layouts/', '^store/', '^api/', '^routes/'] }],
+
+    // temporary for in-progress features
+    "no-alert": 0,
+
+    // disable for unit tests
+    "no-unused-expressions": 0,
+
+    // relax rules
+    "no-magic-numbers": 0,
     "max-len": 0,
-    "new-cap": 0,
-    "object-curly-spacing": ["error", "always"],
     "react/jsx-no-bind": 0,
-    "no-mixed-operators": 0,
-    "arrow-parens": [
-      2,
-      "always"
-    ],
-    "import/extensions": 0,
-    "import/no-unresolved": 0,
-    "import/no-named-as-default": 0,
-    "import/no-extraneous-dependencies": 0,
-    "no-underscore-dangle": 0,
-    "react/forbid-prop-types": 0,
-    "no-unused-expressions": 0,
-    "jsx-a11y/anchor-has-content": 0,
-    "no-plusplus": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "no-use-before-define": ["error", { "functions": false, "classes": true }],
+    "import/order": 0,
+    "import/imports-first": 0,
+    "no-restricted-syntax": 0,
   }
 }

package.json

@@ -66,10 +66,7 @@
     "react-dropdown": "^1.2.0",
     "react-icheck": "^0.3.6",
     "react-input-range": "^0.9.3",
-    "react-modal": "^1.6.2",
-    "react-flexbox-grid": "^0.10.2",
     "react-highcharts": "^11.0.0",
-    "react-modal": "^1.5.2",
     "react-redux": "^4.0.0",
     "react-redux-toastr": "^4.2.2",
     "react-router": "^2.8.1",
@@ -100,15 +97,13 @@
     "yargs": "^4.0.0"
   },
   "devDependencies": {
+    "babel-eslint": "^7.1.1",
     "chai": "^3.5.0",
     "css-modules-require-hook": "^4.0.5",
     "enzyme": "^2.6.0",
-    "eslint": "^3.7.1",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-babel": "^3.3.0",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^2.2.2",
-    "eslint-plugin-react": "^6.3.0",
+    "eslint-config-topcoder": "^1.8.0",
+    "eslint-plugin-babel": "^4.0.0",
+    "eslint-plugin-react": "^6.8.0",
     "jsdom": "^9.8.3",
     "mocha": "^3.2.0",
     "mocha-webpack": "^0.7.0",

server.js

@@ -1,10 +1,12 @@
+/* eslint import/no-commonjs: 0 */
+
 /**
  * Http server for serving the frontend files
  */
 
+const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
-const path = require('path');
 const config = require('config');
 const webpackConfig = require('./webpack.config');
 

setup-test.js

@@ -1,3 +1,5 @@
+/* eslint import/no-commonjs: 0 */
+
 const hook = require('css-modules-require-hook');
 const sass = require('node-sass');
 
@@ -7,7 +9,7 @@ const sass = require('node-sass');
 hook({
   extensions: ['.scss', '.css'],
   generateScopedName: '[local]___[hash:base64:5]',
-  preprocessCss: (data, file) => sass.renderSync({ file }).css,
+  preprocessCss: (data, file) => sass.renderSync({file}).css,
 });
 
 /*
@@ -20,7 +22,7 @@ const exposedProperties = ['window', 'navigator', 'document'];
 global.document = jsdom('');
 global.window = document.defaultView;
 Object.keys(document.defaultView).forEach((property) => {
-  if (typeof global[property] === 'undefined') {
+  if (!global[property]) {
     exposedProperties.push(property);
     global[property] = document.defaultView[property];
   }

src/components/Accordion/Accordion.jsx

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import uncontrollable from 'uncontrollable';
 import CSSModules from 'react-css-modules';
 import cn from 'classnames';
 import styles from './Accordion.scss';
 
-export const Accordion = ({ onToggleExpand, isExpanded, children, title }) => (
-  <div styleName={cn('accordion', { expanded: isExpanded })}>
+export const Accordion = ({onToggleExpand, isExpanded, children, title}) => (
+  <div styleName={cn('accordion', {expanded: isExpanded})}>
     <div styleName="title" onClick={() => onToggleExpand(!isExpanded)}>
       {title}
     </div>
@@ -20,6 +20,6 @@ Accordion.propTypes = {
   title: PropTypes.any,
 };
 
-export default uncontrollable(CSSModules(Accordion, styles, { allowMultiple: true }), {
+export default uncontrollable(CSSModules(Accordion, styles, {allowMultiple: true}), {
   isExpanded: 'onToggleExpand',
 });

src/components/Breadcrumb/Breadcrumb.jsx

@@ -1,9 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 import styles from './Breadcrumb.scss';
 
-export const Breadcrumb = ({ items }) => (
+export const Breadcrumb = ({items}) => (
   <ul styleName="breadcrumb">
     {items.map((item, index) => (
       <li styleName="item" key={index}>

src/components/Button/Button.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import _ from 'lodash';
 import cn from 'classnames';
@@ -21,4 +21,4 @@ Button.defaultProps = {
   size: 'normal',
 };
 
-export default CSSModules(Button, styles, { allowMultiple: true });
+export default CSSModules(Button, styles, {allowMultiple: true});

src/components/Checkbox/Checkbox.jsx

@@ -1,9 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import _ from 'lodash';
 import styles from './Checkbox.scss';
 
-const Checkbox = ({ children, className, id, ...props }) => (
+const Checkbox = ({children, className, id, ...props}) => (
   <div styleName="checkbox" className={className}>
     <input id={id} type="checkbox" {..._.pick(props, 'checked', 'onChange', 'defaultChecked')} />
     <label htmlFor={id}>

src/components/CountdownTimer/Countdown.jsx

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
 import DateBetween from './DateBetween';
 
 /**
@@ -9,7 +9,7 @@ export default class Countdown extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { remaining: null };
+    this.state = {remaining: null};
   }
 
   componentDidMount() {
@@ -25,7 +25,7 @@ export default class Countdown extends Component {
     const startDate = new Date();
     const endDate = new Date(this.props.options.endDate);
     const remaining = DateBetween(startDate, endDate);
-    this.setState({remaining });
+    this.setState({remaining});
   }
 
   render() {

src/components/CountdownTimer/CountdownTimer.jsx

@@ -1,22 +1,17 @@
-
-import React, { Component } from 'react';
+import React from 'react';
 import CSSModules from 'react-css-modules';
 import Countdown from './Countdown';
 
 import styles from './CountdownTimer.scss';
 
-class CountdownTimer extends Component {
-  componentDidMount() {
+const CountdownTimer = () => {
+  const OPTIONS = {endDate: '12/20/2016 12:12 AM', prefix: ''};
 
-  }
-  render() {
-    const OPTIONS = { endDate: '12/20/2016 12:12 AM', prefix: '' };
+  return (
+    <div>
+      <Countdown options={OPTIONS} />
+    </div>
+  );
+};
 
-    return (
-      <div>
-        <Countdown options={OPTIONS} />
-      </div>
-    );
-  }
-}
 export default CSSModules(CountdownTimer, styles);

src/components/CountdownTimer/DateBetween.js

@@ -11,7 +11,9 @@ function DateBetween(startDate, endDate) {
 
   function pad(num, size) {
     let s = String(num);
-    while (s.length < (size || 2)) { s = `0${s}`; }
+    while (s.length < (size || 2)) {
+      s = `0${s}`;
+    }
     return s;
   }
 
@@ -29,4 +31,4 @@ function DateBetween(startDate, endDate) {
   return between;
 }
 
-module.exports = DateBetween;
+export default DateBetween;

src/components/DatePicker/DatePicker.jsx

@@ -1,17 +1,17 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
-import { DateField, TransitionView, Calendar } from 'react-date-picker';
+import {DateField, TransitionView, Calendar} from 'react-date-picker';
 import styles from './DatePicker.scss';
 
-export const DatePicker = ({ onChange, value }) => (
+export const DatePicker = ({onChange, value}) => (
   <div styleName="date-picker">
     <DateField
       dateFormat="YYYY-MM-DD hh:mm:ss A"
       onChange={onChange}
       value={value}
     >
       <TransitionView>
-        <Calendar style={{ padding: 10 }} />
+        <Calendar style={{padding: 10}} />
       </TransitionView>
     </DateField>
   </div>

src/components/Dropdown/Dropdown.jsx

@@ -1,9 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
-import ReactDropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
+import ReactDropdown, {DropdownTrigger, DropdownContent} from 'react-simple-dropdown';
 import styles from './Dropdown.scss';
 
-export const Dropdown = ({ title, children }) => (
+export const Dropdown = ({title, children}) => (
   <div styleName="dropdown">
     <ReactDropdown>
       <DropdownTrigger className={styles.trigger}>{title}</DropdownTrigger>

src/components/FormField/FormField.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import cn from 'classnames';
 import styles from './FormField.scss';
@@ -19,4 +19,4 @@ FormField.propTypes = {
   children: PropTypes.any.isRequired,
 };
 
-export default CSSModules(FormField, styles, { allowMultiple: true });
+export default CSSModules(FormField, styles, {allowMultiple: true});