Prettier (#1)

* add prettier

* remove old config

Author: bernabe9

.eslintrc .eslintrc.js

@@ -1,31 +1,8 @@
-{
-  "extends": [
-    "eslint:recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "airbnb"
-  ],
-  "plugins": [
-    "react",
-    "react-hooks"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true
-    }
-  },
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jquery": true,
-    "jest": true
-  },
-  "rules": {
+module.exports = {
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['prettier', 'react-hooks'],
+  rules: {
+    "prettier/prettier": ["error"],
     "object-curly-newline": 0,
     "no-class-assign": 0,
     "no-param-reassign": 0,
@@ -39,7 +16,6 @@
     "no-console": [1, { "allow": ["warn", "error"] }],
     "no-debugger": 1,
     "no-var": 1,
-    "semi": [1, "always"],
     "no-trailing-spaces": 1,
     "eol-last": 1,
     "no-underscore-dangle": 0,
@@ -102,10 +78,23 @@
     "import/no-named-as-default": 0,
     "react-hooks/rules-of-hooks": "error"
   },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "paths": ["src"]
+  globals: {
+    window: true,
+    document: true,
+    page: true,
+    browser: true,
+    navigator: true,
+    fetch: true
+  },
+  env: {
+    es6: true,
+    jest: true
+  },
+  parser: 'babel-eslint',
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src']
       }
     }
   }

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

package.json

@@ -13,19 +13,26 @@
     "start": "npm-run-all --parallel open:src lint",
     "open:src": "babel-node tools/srcServer.js",
     "open:dist": "babel-node tools/distServer.js",
-    "lint:code": "eslint webpack/webpack.config.* src tools server --color",
+    "lint:code": "eslint webpack/webpack.config.* src",
     "lint:style": "stylelint \"src/styles/**/*.scss\"",
     "lint": "npm run lint:code && npm run lint:style",
+    "lint:fix": "eslint --fix webpack/webpack.config.* src",
     "clean-dist": "npm run remove-dist && mkdir dist",
     "remove-dist": "rimraf ./dist",
     "prebuild": "npm run clean-dist && npm run lint",
     "build": "babel-node tools/build.js",
+    "prettier": "prettier --write './src/**/*.js'",
     "test": "jest",
     "test:cover": "npm run test -- --coverage",
     "test:watch": "npm run test -- --watch",
     "deploy": "npm run build && babel-node tools/deployS3",
     "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn prettier --loglevel=silent && yarn lint:fix --quiet && git add . && yarn lint --quiet"
+    }
+  },
   "author": "Bernabe Gonzalez",
   "license": "MIT",
   "dependencies": {
@@ -77,15 +84,18 @@
     "dotenv-webpack": "1.5.7",
     "enzyme": "3.4.1",
     "enzyme-adapter-react-16": "1.5.0",
-    "eslint": "4.19.1",
-    "eslint-config-airbnb": "16.1.0",
-    "eslint-plugin-import": "2.11.0",
-    "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-react": "7.7.0",
+    "eslint": "5.15.3",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "1.0.0",
     "express": "4.16.3",
     "file-loader": "1.1.11",
     "html-webpack-plugin": "3.2.0",
+    "husky": "1.3.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
     "json-loader": "0.5.7",
@@ -97,6 +107,7 @@
     "opn": "5.3.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "postcss-loader": "3.0.0",
+    "prettier": "1.16.4",
     "prompt": "1.0.0",
     "react-hot-loader": "4.6.5",
     "react-test-renderer": "16.5.2",

src/components/App.js

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-import { ThemeProvider } from 'styled-components';
+import React, { Fragment } from 'react'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { Helmet } from 'react-helmet'
+import { ThemeProvider } from 'styled-components'
 
-import routes from '../routes';
-import theme from '../constants/theme';
+import routes from '../routes'
+import theme from '../constants/theme'
 
 const App = () => (
   <ThemeProvider theme={theme}>
@@ -14,16 +14,13 @@ const App = () => (
       </Helmet>
       <Router>
         <Switch>
-          {routes.map((route, index) =>
-            <Route
-              key={`route${index}`}
-              {...route}
-            />)
-          }
+          {routes.map((route, index) => (
+            <Route key={`route${index}`} {...route} />
+          ))}
         </Switch>
       </Router>
     </Fragment>
   </ThemeProvider>
-);
+)
 
-export default App;
+export default App

src/constants/routesPaths.js

@@ -2,6 +2,6 @@ const routes = {
   index: '/',
   login: '/login',
   signUp: '/sign-up'
-};
+}
 
-export default routes;
+export default routes

src/constants/theme.js

@@ -9,6 +9,6 @@ const theme = {
     normal: '400',
     bold: '700'
   }
-};
+}
 
-export default theme;
+export default theme

src/containers/HomePage/ExecutionRow.js

@@ -1,32 +1,40 @@
-import React, { Fragment, useState } from 'react';
-import { Separator } from 'mc-components';
+import React, { Fragment, useState } from 'react'
+import PropTypes from 'prop-types'
+import { Separator } from 'mc-components'
 
-const ExecutionRow = (props) => {
-  const [showData, setShowData] = useState(false);
+const ExecutionRow = props => {
+  const [showData, setShowData] = useState(false)
 
-  const onToggle = () => setShowData(!showData);
+  const onToggle = () => setShowData(!showData)
+  const { id, test, url, status, errorMessage } = props
 
   return (
     <Fragment>
       <div>
-        <p>{`Id: ${props.id}`}</p>
-        <p>{`Test: ${props.test}`}</p>
-        <p>{`URL: ${props.url}`}</p>
-        <p>{`Status: ${props.status}`}</p>
-        {props.errorMessage &&
+        <p>{`Id: ${id}`}</p>
+        <p>{`Test: ${test}`}</p>
+        <p>{`URL: ${url}`}</p>
+        <p>{`Status: ${status}`}</p>
+        {errorMessage && (
           <Fragment>
             <p>Error:</p>
-            <p>{unescape(props.errorMessage)}</p>
+            <p>{unescape(errorMessage)}</p>
           </Fragment>
-        }
+        )}
       </div>
       <a onClick={onToggle}>Toggle data</a>
-      {showData &&
-        <div>{JSON.stringify(props)}</div>
-      }
+      {showData && <div>{JSON.stringify(props)}</div>}
       <Separator />
     </Fragment>
-  );
-};
+  )
+}
 
-export default ExecutionRow;
+ExecutionRow.propTypes = {
+  id: PropTypes.string.isRequired,
+  test: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string
+}
+
+export default ExecutionRow

src/containers/HomePage/Executions.js

@@ -1,22 +1,29 @@
-import React from 'react';
-import { Separator } from 'mc-components';
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Separator } from 'mc-components'
 
-import ExecutionRow from './ExecutionRow';
+import ExecutionRow from './ExecutionRow'
 
 const Executions = ({ executions }) => {
-  const sortedExecutions = [...executions]
-    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+  const sortedExecutions = [...executions].sort(
+    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
+  )
 
   return (
     <div className="container mc-p-5 mc-invert mc-background--color-light">
       <h5 className="mc-text-h5">All Executions</h5>
       <Separator />
       <div>
-        {sortedExecutions.map(props =>
-          <ExecutionRow key={props.id} {...props} />)}
+        {sortedExecutions.map(({ id, ...props }) => (
+          <ExecutionRow key={id} id={id} {...props} />
+        ))}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Executions;
+Executions.propTypes = {
+  executions: PropTypes.array.isRequired
+}
+
+export default Executions

src/containers/HomePage/RunTest.js

@@ -1,51 +1,46 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Input, FormGroup, Button } from 'mc-components';
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { Input, FormGroup, Button } from 'mc-components'
 
-import { applyQueryParams } from 'utils/helpers';
+import { applyQueryParams } from 'utils/helpers'
 
 const RunTest = ({ onSuccess }) => {
-  const [url, setUrl] = useState('');
-  const [test, setTest] = useState('');
-  const [urlError, setUrlError] = useState('');
-  const [testError, setTestError] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [url, setUrl] = useState('')
+  const [test, setTest] = useState('')
+  const [urlError, setUrlError] = useState('')
+  const [testError, setTestError] = useState('')
+  const [loading, setLoading] = useState(false)
 
   const onSubmit = () => {
     if (!url) {
-      setUrlError("URL can't be empty ");
+      setUrlError("URL can't be empty ")
     }
     if (!test) {
-      setTestError("Test path can't be empty ");
+      setTestError("Test path can't be empty ")
     }
     if (!url || !test) {
-      return;
+      return
     }
-    setLoading(true);
-    const path = applyQueryParams(
-      `${process.env.API_URL}/trigger`,
-      { test, url }
-    );
+    setLoading(true)
+    const path = applyQueryParams(`${process.env.API_URL}/trigger`, {
+      test,
+      url
+    })
     fetch(path)
-      .then((res) => {
-        setLoading(false);
+      .then(res => {
+        setLoading(false)
         if (res.ok) {
-          onSuccess();
+          onSuccess()
         }
       })
-      .catch(() => setLoading(false));
-  };
+      .catch(() => setLoading(false))
+  }
 
   return (
     <div className="container mc-p-5 mc-invert mc-background--color-light">
       <h5 className="mc-text-h5">Run test</h5>
       <div className="mc-my-4">
-        <FormGroup
-          label="URL"
-          name="url"
-          error={urlError}
-          touched={!!urlError}
-        >
+        <FormGroup label="URL" name="url" error={urlError} touched={!!urlError}>
           <Input
             onChange={e => setUrl(e.target.value)}
             value={url}
@@ -69,14 +64,16 @@ const RunTest = ({ onSuccess }) => {
             touched={!!testError}
           />
         </FormGroup>
-        <Button onClick={onSubmit} loading={loading}>RUN</Button>
+        <Button onClick={onSubmit} loading={loading}>
+          RUN
+        </Button>
       </div>
     </div>
-  );
-};
+  )
+}
 
 RunTest.propTypes = {
   onSuccess: PropTypes.func.isRequired
-};
+}
 
-export default RunTest;
+export default RunTest