[#922] Adds eslint for react and es6 files

8 files changed, 61 insertions, 22 deletions

diff --git a/web-ui/.eslintrc.json b/web-ui/.eslintrc.json
new file mode 100644
index 00000000..4828136e
--- /dev/null
+++ b/web-ui/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "extends": "airbnb",
+    "plugins": [
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    "rules": {
+      "import/no-extraneous-dependencies": ["off"],
+      "import/extensions": ["off"],
+      "import/no-unresolved": ["off"],
+      "react/jsx-filename-extension": ["off"],
+      "jsx-quotes": ["error", "prefer-single"],
+      "no-undef": ["off"],
+      "comma-dangle": ["off"],
+      "semi": ["error", "never"]
+    }
+}
diff --git a/web-ui/package.json b/web-ui/package.json
index dba34e97..ab5d1b24 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -16,6 +16,11 @@
     "css-loader": "^0.26.1",
     "dompurify": "^0.8.4",
     "enzyme": "^2.7.1",
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.9.0",
     "expect": "^1.20.2",
     "file-loader": "^0.10.0",
     "font-awesome": "^4.7.0",
@@ -64,7 +69,7 @@
     "webpack": "^1.14.0"
   },
   "scripts": {
-    "test": "npm run jshint --silent && npm run build-statics --silent && npm run mocha-test && npm run karma-test",
+    "test": "npm run lint --silent && npm run build-statics --silent && npm run mocha-test && npm run karma-test",
     "mocha-test": "mocha-webpack --webpack-config webpack.test.config.js \"test/unit/**/*.spec.js\"",
     "mocha-watch": "mocha-webpack --watch --webpack-config webpack.test.config.js \"test/unit/**/*.spec.js\"",
     "karma-test": "karma start --single-run $GRUNT_OPTS",
@@ -80,7 +85,9 @@
     "build-prod": "npm run build-statics && webpack -p --config ./webpack.production.config.js",
     "build-js": "webpack --colors --progress",
     "build-js-watch": "webpack --colors --progress --watch",
+    "lint": "npm run jshint && npm run eslint",
     "jshint": "jshint --config=.jshintrc app test",
+    "eslint": "eslint src test/unit",
     "clean": "rm -rf dist/ app/js/generated/hbs/* app/css/*",
     "package": "PIXELATED_BUILD='package' npm run build-prod && npm run imagemin",
     "imagemin": "node config/imagemin.js",
diff --git a/web-ui/src/account_recovery/account_recovery.js b/web-ui/src/account_recovery/account_recovery.js
index 6c12e326..eac14bf7 100644
--- a/web-ui/src/account_recovery/account_recovery.js
+++ b/web-ui/src/account_recovery/account_recovery.js
@@ -20,16 +20,16 @@ import { render } from 'react-dom'
 import a11y from 'react-a11y'
 import { I18nextProvider } from 'react-i18next'
 
-import Page from './page'
-import i18n from '../i18n'
-
 import 'font-awesome/scss/font-awesome.scss'
 
-if(process.env.NODE_ENV === 'development') a11y(React);
+import PageWrapper from './page'
+import i18n from '../i18n'
+
+if (process.env.NODE_ENV === 'development') a11y(React)
 
 render(
-  <I18nextProvider i18n={ i18n }>
-    <Page/>
+  <I18nextProvider i18n={i18n}>
+    <PageWrapper />
   </I18nextProvider>,
   document.getElementById('root')
-);
+)
diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js
index d1bcb464..396788e7 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -32,8 +32,8 @@ export const Page = ({ t }) => (
       <InputField name='email' label={t('backup-account.input-label')} />
       <SubmitButton buttonText={t('backup-account.button')} />
       <div>
-        <a href="/">
-          <i className="fa fa-angle-left" aria-hidden="true"></i>
+        <a href='/'>
+          <i className='fa fa-angle-left' aria-hidden='true' />
           <span>{t('back-to-inbox')}</span>
         </a>
       </div>
@@ -41,4 +41,8 @@ export const Page = ({ t }) => (
   </div>
 )
 
+Page.propTypes = {
+  t: React.PropTypes.func.isRequired
+}
+
 export default translate('', { wait: true })(Page)
diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js
index 43899419..70d18618 100644
--- a/web-ui/src/common/input_field/input_field.js
+++ b/web-ui/src/common/input_field/input_field.js
@@ -26,4 +26,9 @@ const InputField = ({ label, name }) => (
   </div>
 )
 
+InputField.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string.isRequired
+}
+
 export default InputField
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 89cfc55b..ea1bbf26 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -23,4 +23,8 @@ const SubmitButton = ({ buttonText }) => (
   <input type='submit' className='submit-button' value={buttonText} />
 )
 
+SubmitButton.propTypes = {
+  buttonText: React.PropTypes.string.isRequired
+}
+
 export default SubmitButton
diff --git a/web-ui/src/i18n.js b/web-ui/src/i18n.js
index 9c6ad550..b68f17ae 100644
--- a/web-ui/src/i18n.js
+++ b/web-ui/src/i18n.js
@@ -16,15 +16,15 @@
  */
 import i18n from 'i18next'
 import i18nBackend from 'i18nextXHRBackend'
-import i18nDetector from 'i18nextBrowserLanguageDetector'
+import I18nDetector from 'i18nextBrowserLanguageDetector'
 
-const detector = new i18nDetector();
-const detect = detector.detect.bind(detector);
+const detector = new I18nDetector()
+const detect = detector.detect.bind(detector)
 
-detector.detect = function(detectionOrder)  {
-  let result = detect(detectionOrder);
-  return result.replace('-', '_');
-};
+detector.detect = (detectionOrder) => {
+  const result = detect(detectionOrder)
+  return result.replace('-', '_')
+}
 
 i18n
   .use(i18nBackend)
@@ -34,6 +34,6 @@ i18n
     backend: {
       loadPath: 'assets/locales/{{lng}}/{{ns}}.json'
     }
-  });
+  })
 
-export default i18n;
+export default i18n
diff --git a/web-ui/test/unit/account_recovery/page.spec.js b/web-ui/test/unit/account_recovery/page.spec.js
index 590d1de8..ec9fb844 100644
--- a/web-ui/test/unit/account_recovery/page.spec.js
+++ b/web-ui/test/unit/account_recovery/page.spec.js
@@ -4,11 +4,12 @@ import React from 'react'
 import { Page } from 'src/account_recovery/page'
 
 describe('Page', () => {
-  let mockT, page
+  let mockT
+  let page
 
   beforeEach(() => {
-    mockT = (key) => (key)
-    page = shallow(<Page t={mockT}/>)
+    mockT = key => key
+    page = shallow(<Page t={mockT} />)
   })
 
   it('renders backup email page title', () => {