more component linting

.eslintrc

@@ -9,6 +9,9 @@
   "parserOptions": {
     "sourceType": "module",
   },
+  "extends": [
+    "plugin:jsx-a11y/recommended"
+  ],
   "rules": {
     "array-bracket-spacing": [2, "always"],
     "comma-dangle": [1, "always-multiline"],
@@ -39,18 +42,19 @@
     "operator-linebreak": ["error", "before"],
     "padded-blocks": ["error", "never"],
     "quotes": ["error", "single", { "allowTemplateLiterals": true }],
-    "react/jsx-no-undef": 2,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 2,
-    "react/jsx-wrap-multilines": [2, {
-      "declaration": "parens-new-line",
-      "assignment": "parens-new-line",
-      "return": "parens-new-line",
-      "arrow": "parens-new-line",
-      "condition": "parens-new-line",
-      "logical": "parens-new-line",
-      "prop": "parens-new-line"
-    }],
+    "react/boolean-prop-naming": 2,
+    "react/button-has-type": 2,
+    "react/destructuring-assignment": [2, "always"],
+    "react/no-access-state-in-setstate": 2,
+    "react/no-did-mount-set-state": 2,
+    "react/no-did-update-set-state": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-typos": 2,
+    "react/no-unescaped-entities": 2,
+    "react/no-unused-prop-types": 2,
+    "react/no-will-update-set-state": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 2,
     "react/jsx-closing-bracket-location": [1, {
       "selfClosing": "tag-aligned",
       "nonEmpty": "after-props"
@@ -59,12 +63,24 @@
     "react/jsx-equals-spacing": [2, "never"],
     "react/jsx-first-prop-new-line": [2, "multiline-multiprop"],
     "react/jsx-handler-names": 2,
-    "react/jsx-indent": [2, 2],
     "react/jsx-indent-props": [2, 2],
+    "react/jsx-indent": [2, 2],
     "react/jsx-key": 2,
     "react/jsx-max-props-per-line": [2, { "maximum": 2, "when": "always" }],
     "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
     "react/jsx-tag-spacing": 2,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 2,
+    "react/jsx-wrap-multilines": [2, {
+      "declaration": "parens-new-line",
+      "assignment": "parens-new-line",
+      "return": "parens-new-line",
+      "arrow": "parens-new-line",
+      "condition": "parens-new-line",
+      "logical": "parens-new-line",
+      "prop": "parens-new-line"
+    }],
     "require-yield": 0,
     "semi": [2, "never"],
     "space-before-blocks": [2, "always"],

src/app/components/@FlashMessages/Msg.js

@@ -23,15 +23,19 @@ export default class Msg extends React.Component {
   };
 
   handleClick = () => {
-    this.props.onClickClose(this.props.msg.id)
+    const { onClickClose, msg } = this.props
+    onClickClose(msg.id)
   }
 
   render() {
     const { msg, className, ...props } = this.props
     return (
       <span {...bem(null, msg.type, className)} {...cleanProps(props)}>
         {msg.message}
-        <button {...bem('close')} onClick={this.handleClick}>
+        <button
+          type='button'
+          {...bem('close')}
+          onClick={this.handleClick}>
           &times;
         </button>
       </span>

src/app/components/CodeSplit.js

@@ -18,11 +18,13 @@ export default class CodeSplit extends React.Component {
   };
 
   componentWillMount() {
-    if (hasWindow) this.callLoad(this.props.load)
+    const { load } = this.props
+    if (hasWindow) this.callLoad(load)
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.load !== this.props.load) {
+    const { load } = this.props
+    if (nextProps.load !== load) {
       this.callLoad(nextProps.load)
     }
   }

src/app/routes/BarRoute/BarRoute.js

@@ -15,7 +15,8 @@ export default class BarRoute extends React.Component {
   };
 
   componentDidMount() {
-    this.props.apiFetch()
+    const { apiFetch } = this.props
+    apiFetch()
   }
 
   render() {
@@ -28,7 +29,7 @@ export default class BarRoute extends React.Component {
         <h3>Bar</h3>
         <p>This route is making an api request</p>
         <p>If you change the response from <code>server/api/bar</code> endpoint</p>
-        <p>And then navigate away and back to this route, you'll see the changes immediately</p>
+        <p>And then navigate away and back to this route, you&apos;ll see the changes immediately</p>
         <div className={style.block}>
           {bar.map((item, i) =>
             <p key={i}>{item}</p>

src/app/routes/HomeRoute/HomeRoute.js

@@ -5,7 +5,7 @@ export default class HomeRoute extends React.Component {
     return (
       <section className='HomeRoute'>
         <DocumentMeta>
-          <title></title>
+          <title />
         </DocumentMeta>
         <p>Welcome to breko-hub</p>
         <p>This app is intentionally minimal!</p>

src/app/routes/NotFoundRoute/NotFoundRoute.js

@@ -5,7 +5,7 @@ export default class NotFoundRoute extends React.Component {
     return (
       <section className='NotFoundRoute'>
         <DocumentMeta>
-          <title>Doesn't exist</title>
+          <title>Doesn&apos;t exist</title>
         </DocumentMeta>
         404, page not found
       </section>

src/app/routes/PrivateRoute/PrivateRoute.js

@@ -7,8 +7,9 @@ import { addMessage } from 'app/modules/flash/flash.actions'
 @connect(null, { replace, addMessage })
 export default class PrivateRoute extends React.Component {
   componentWillMount() {
-    this.props.addMessage(privateRoute.denied, 'error')
-    this.props.replace('/')
+    const { addMessage, replace } = this.props
+    addMessage(privateRoute.denied, 'error')
+    replace('/')
   }
 
   render() {

src/server/components/Html.js

@@ -32,9 +32,9 @@ export default class Html extends React.Component {
       bodyStyles,
     } = this.props
     const helmet = Helmet.renderStatic()
-
+    const { lang, ...htmlAttrs } = helmet.htmlAttributes.toComponent()
     return (
-      <html {...helmet.htmlAttributes.toComponent()}>
+      <html lang={lang} {...htmlAttrs}>
         <head>
           {helmet.title.toComponent()}
           {helmet.meta.toComponent()}

src/server/components/StaticRouter.js

@@ -16,9 +16,10 @@ class StaticRouter extends React.Component {
   };
 
   getChildContext() {
+    const { history } = this.props
     return {
       router: {
-        staticContext: this.props.history,
+        staticContext: history,
       },
     }
   }

src/server/middleware/handle-error.js

@@ -29,6 +29,6 @@ export default async function handleError(ctx, next) {
 
 const ServerOops = () => (
   <div className='ServerOops'>
-    Oopsies! Broke'o-hub :(
+    Oopsies! Broke&quot;o-hub :(
   </div>
 )

test/test-helpers.js

@@ -58,22 +58,28 @@ const helpers = {
   createStorage() {
     return {
       length: 1,
-      state: {},
+      _store: {},
+      _updateLength() {
+        this.length = Object.keys(this._store).length
+      },
       getItem(key) {
-        return this.state[key] || null
+        return this._store[key] || null
       },
       setItem(key, value) {
-        this.state[key] = typeof value === 'string'
+        this._store[key] = typeof value === 'string'
           ? value
           : JSON.stringify(value)
+        this._updateLength()
       },
       removeItem(key) {
-        delete this.state[key]
+        delete this._store[key]
+        this._updateLength()
       },
       clear() {
-        for (const key in this.state) {
+        for (const key in this._store) {
           this.removeItem(key)
         }
+        this._updateLength()
       },
     }
   },