Configured Prettier (#60)

* Apply prettier fixes for UI

* Integrate prettier into linting. Remove duplicate .prettierrc.

* Common .eslintignore. Removed reduntant prettier check

* Apply prettier on ui script

* Correct linting

* Duplicate plugin

* Common plugin

oracle/.eslintignore → .eslintignore

@@ -1,3 +1,4 @@
 node_modules
 submodules
 coverage
+lib

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "arrow-body-style": "off",
+    "func-names": "off",
+    "no-await-in-loop": "off",
+    "no-console": "off",
+    "no-else-return": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-restricted-syntax": "off",
+    "no-shadow": "off",
+    "no-use-before-define": ["error", { "functions": false }],
+    "import/no-dynamic-require": "off",
+    "prefer-template": "off",
+    "no-underscore-dangle": "off"
+  }
+}

monitor/.eslintrc

@@ -1,21 +1,11 @@
 {
-  "plugins": ["node", "prettier"],
+  "plugins": ["node"],
   "extends": [
     "plugin:node/recommended",
     "airbnb-base",
-    "plugin:prettier/recommended"
+    "../.eslintrc"
   ],
   "rules": {
-    "prettier/prettier": "error",
-    "arrow-body-style": "off",
-    "no-await-in-loop": "off",
-    "no-console": "off",
-    "no-else-return": "off",
-    "no-plusplus": "off",
-    "no-restricted-syntax": "off",
-    "no-shadow": "off",
-    "prefer-template": "off",
-    "no-use-before-define": "off",
-    "no-underscore-dangle": "off"
+    "no-use-before-define": "off"
   }
 }

monitor/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "node index.js",
-    "lint": "eslint .",
+    "lint": "eslint . --ignore-path ../.eslintignore",
     "lint:fix": "eslint . --fix"
   },
   "author": "",

oracle/.eslintrc

@@ -2,20 +2,8 @@
   "extends": [
     "plugin:node/recommended",
     "airbnb-base",
-    "plugin:prettier/recommended"
+    "../.eslintrc"
   ],
   "plugins": ["node"],
-  "rules": {
-    "arrow-body-style": "off",
-    "func-names": "off",
-    "no-await-in-loop": "off",
-    "no-console": "off",
-    "no-else-return": "off",
-    "no-param-reassign": "off",
-    "no-plusplus": "off",
-    "no-restricted-syntax": "off",
-    "no-shadow": "off",
-    "no-use-before-define": ["error", { "functions": false }],
-    "import/no-dynamic-require": "off"
-  }
+  "rules": {}
 }

oracle/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint . --ignore-path ../.eslintignore",
     "watcher:signature-request": "./scripts/start-worker.sh watcher signature-request-watcher",
     "watcher:collected-signatures": "./scripts/start-worker.sh watcher collected-signatures-watcher",
     "watcher:affirmation-request": "./scripts/start-worker.sh watcher affirmation-request-watcher",

ui/.eslintrc

@@ -1,5 +1,11 @@
 {
-  "extends": "react-app",
+  "extends": [
+    "react-app",
+    "../.eslintrc"
+  ],
+  "rules": {
+    "no-use-before-define": "off"
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "legacyDecorators": true

ui/config-overrides.js

@@ -1,10 +1,3 @@
-const {
-  addDecoratorsLegacy,
-  disableEsLint,
-  override
-} = require("customize-cra");
+const { addDecoratorsLegacy, disableEsLint, override } = require('customize-cra')
 
-module.exports = override(
-    addDecoratorsLegacy(),
-    disableEsLint()
-  );
+module.exports = override(addDecoratorsLegacy(), disableEsLint())

ui/package.json

@@ -32,7 +32,7 @@
     "web3-utils": "1.0.0-beta.30"
   },
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint . --ignore-path ../.eslintignore",
     "select-css-theme": "node scripts/selectTheme.js",
     "build-css": "node-sass-chokidar src/assets/stylesheets -o src/assets/stylesheets --output-style=compressed -m application*.css",
     "watch-css": "nodemon -e scss -x \"npm run build-css\"",

ui/scripts/selectTheme.js

@@ -1,17 +1,17 @@
-const path = require('path');
+const path = require('path')
 require('dotenv').config({
-    path: path.resolve(__dirname, '..', '.env')
-});
-const fs = require('fs');
+  path: path.resolve(__dirname, '..', '.env')
+})
+const fs = require('fs')
 
-const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets');
-const destinationFilename = 'application.css';
-let filename;
+const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets')
+const destinationFilename = 'application.css'
+let filename
 
 if (process.env.APP_STYLES === 'classic') {
-    filename = 'application.classic.css'
+  filename = 'application.classic.css'
 } else {
-    filename = 'application.core.css'
+  filename = 'application.core.css'
 }
 
-fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename));
+fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename))

ui/src/App.js

@@ -1,7 +1,16 @@
-import React from 'react';
-import { Header, Bridge, RelayEvents, Footer, SweetAlert, Loading, StatusPage, StatisticsPage } from './components';
+import React from 'react'
+import {
+  Header,
+  Bridge,
+  RelayEvents,
+  Footer,
+  SweetAlert,
+  Loading,
+  StatusPage,
+  StatisticsPage
+} from './components'
 import { Route } from 'react-router-dom'
-import './assets/stylesheets/application.css';
+import './assets/stylesheets/application.css'
 import { Disclaimer } from './components'
 import { ModalContainer } from './components'
 import { NoWallet } from './components'
@@ -16,43 +25,40 @@ export class App extends React.Component {
   componentDidMount() {
     const disclaimerDisplayed = getItem(DISCLAIMER_KEY)
 
-    if(!disclaimerDisplayed) {
+    if (!disclaimerDisplayed) {
       this.setState({ showDisclaimer: true })
     }
   }
 
   closeDisclaimer = () => {
     setItem(DISCLAIMER_KEY, true)
-    this.setState({showDisclaimer: false})
+    this.setState({ showDisclaimer: false })
   }
 
   toggleMobileMenu = () => {
-    this.setState(prevState => ({ showMobileMenu: !prevState.showMobileMenu}))
+    this.setState(prevState => ({ showMobileMenu: !prevState.showMobileMenu }))
   }
 
   render() {
     const { showDisclaimer, showMobileMenu } = this.state
     return (
       <div className={showMobileMenu ? 'mobile-menu-is-open' : ''}>
-        <Route component={Loading}/>
-        <Route component={SweetAlert}/>
-        <Route render={() =>
-          <Header
-            onMenuToggle={this.toggleMobileMenu}
-            showMobileMenu={showMobileMenu}
-          />
-        }/>
+        <Route component={Loading} />
+        <Route component={SweetAlert} />
+        <Route
+          render={() => (
+            <Header onMenuToggle={this.toggleMobileMenu} showMobileMenu={showMobileMenu} />
+          )}
+        />
         <div className="app-container">
-          {showMobileMenu && <Route render={() => <div className="mobile-menu-open"/>}/>}
-          <Route exact path="/" component={Bridge}/>
-          <Route exact path="/events" component={RelayEvents}/>
-          <Route exact path="/status" component={StatusPage}/>
-          <Route exact path="/statistics" component={StatisticsPage}/>
+          {showMobileMenu && <Route render={() => <div className="mobile-menu-open" />} />}
+          <Route exact path="/" component={Bridge} />
+          <Route exact path="/events" component={RelayEvents} />
+          <Route exact path="/status" component={StatusPage} />
+          <Route exact path="/statistics" component={StatisticsPage} />
         </div>
-        <Route component={Footer}/>
-        <ModalContainer
-          showModal={showDisclaimer}
-        >
+        <Route component={Footer} />
+        <ModalContainer showModal={showDisclaimer}>
           <Disclaimer onConfirmation={this.closeDisclaimer} />
         </ModalContainer>
         <NoWallet showModal={!showDisclaimer} />

ui/src/components/Authority.js

@@ -2,9 +2,9 @@ import React from 'react'
 
 export const Authority = ({ address, number, logoIndex }) => (
   <div className="authority">
-    <span className='authority-number'>{number}</span>
+    <span className="authority-number">{number}</span>
     <div className="separator" />
     <div className={`authority-logo authority-logo-${logoIndex}`} />
-    <span className='authority-address'>{address}</span>
+    <span className="authority-address">{address}</span>
   </div>
-);
+)