From 2fc084a866491aada0b44802e1e6f3ca5f48033b Mon Sep 17 00:00:00 2001 From: Thomas Hudspith-Tatham Date: Sat, 2 Dec 2017 22:15:41 +0000 Subject: [PATCH] more component linting --- .eslintrc | 42 +++++++++++++------ src/app/components/@FlashMessages/Msg.js | 8 +++- src/app/components/CodeSplit.js | 6 ++- src/app/routes/BarRoute/BarRoute.js | 5 ++- src/app/routes/HomeRoute/HomeRoute.js | 2 +- src/app/routes/NotFoundRoute/NotFoundRoute.js | 2 +- src/app/routes/PrivateRoute/PrivateRoute.js | 5 ++- src/server/components/Html.js | 4 +- src/server/components/StaticRouter.js | 3 +- src/server/middleware/handle-error.js | 2 +- test/test-helpers.js | 16 ++++--- 11 files changed, 63 insertions(+), 32 deletions(-) diff --git a/.eslintrc b/.eslintrc index 70ccd2f8..a84c569d 100644 --- a/.eslintrc +++ b/.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"], diff --git a/src/app/components/@FlashMessages/Msg.js b/src/app/components/@FlashMessages/Msg.js index 9ace92ce..244b13c9 100644 --- a/src/app/components/@FlashMessages/Msg.js +++ b/src/app/components/@FlashMessages/Msg.js @@ -23,7 +23,8 @@ export default class Msg extends React.Component { }; handleClick = () => { - this.props.onClickClose(this.props.msg.id) + const { onClickClose, msg } = this.props + onClickClose(msg.id) } render() { @@ -31,7 +32,10 @@ export default class Msg extends React.Component { return ( {msg.message} - diff --git a/src/app/components/CodeSplit.js b/src/app/components/CodeSplit.js index af3c00d3..d34e30a7 100644 --- a/src/app/components/CodeSplit.js +++ b/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) } } diff --git a/src/app/routes/BarRoute/BarRoute.js b/src/app/routes/BarRoute/BarRoute.js index c9e17f5c..7b1c8aec 100644 --- a/src/app/routes/BarRoute/BarRoute.js +++ b/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 {

Bar

This route is making an api request

If you change the response from server/api/bar endpoint

-

And then navigate away and back to this route, you'll see the changes immediately

+

And then navigate away and back to this route, you'll see the changes immediately

{bar.map((item, i) =>

{item}

diff --git a/src/app/routes/HomeRoute/HomeRoute.js b/src/app/routes/HomeRoute/HomeRoute.js index 471ac621..0f624355 100644 --- a/src/app/routes/HomeRoute/HomeRoute.js +++ b/src/app/routes/HomeRoute/HomeRoute.js @@ -5,7 +5,7 @@ export default class HomeRoute extends React.Component { return (
- + </DocumentMeta> <p>Welcome to breko-hub</p> <p>This app is intentionally minimal!</p> diff --git a/src/app/routes/NotFoundRoute/NotFoundRoute.js b/src/app/routes/NotFoundRoute/NotFoundRoute.js index 44f26de6..53f7afa8 100644 --- a/src/app/routes/NotFoundRoute/NotFoundRoute.js +++ b/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 + Doesn't exist 404, page not found
diff --git a/src/app/routes/PrivateRoute/PrivateRoute.js b/src/app/routes/PrivateRoute/PrivateRoute.js index 99eaadf7..4720a5ac 100644 --- a/src/app/routes/PrivateRoute/PrivateRoute.js +++ b/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() { diff --git a/src/server/components/Html.js b/src/server/components/Html.js index 1ce88840..46fb1fec 100644 --- a/src/server/components/Html.js +++ b/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 ( - + {helmet.title.toComponent()} {helmet.meta.toComponent()} diff --git a/src/server/components/StaticRouter.js b/src/server/components/StaticRouter.js index 7350970e..cffd1d56 100644 --- a/src/server/components/StaticRouter.js +++ b/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, }, } } diff --git a/src/server/middleware/handle-error.js b/src/server/middleware/handle-error.js index 8324983a..c73f58ec 100644 --- a/src/server/middleware/handle-error.js +++ b/src/server/middleware/handle-error.js @@ -29,6 +29,6 @@ export default async function handleError(ctx, next) { const ServerOops = () => (
- Oopsies! Broke'o-hub :( + Oopsies! Broke"o-hub :(
) diff --git a/test/test-helpers.js b/test/test-helpers.js index 0e58cb28..d8335f95 100644 --- a/test/test-helpers.js +++ b/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() }, } },