chore: replace tslint with eslint (#259)

* chore: replace tslint with eslint

* refactor: resolve style issues

* refactor: use object notation for dispatch props

* refactor: resolve more linter errors

* refactor: disable lint for return type on HOC

* feat: add lint:fix script

.eslintrc.json

@@ -0,0 +1,96 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "airbnb-base",
+    "airbnb/rules/react",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "semi": [
+      "error",
+      "never"
+    ],
+    "import/extensions": ["error", "ignorePackages", {
+      "ts": "never",
+      "tsx": "never",
+      "js": "never",
+      "jsx": "never",
+      "sass": "always",
+      "scss": "always"
+    }],
+    "import/no-extraneous-dependencies": "off",
+    "lines-between-class-members": [
+      "error",
+      "always",
+      {
+        "exceptAfterSingleLine": true
+      }
+    ],
+    "react/jsx-filename-extension": ["error", { "extensions": [".tsx", ".jsx"] }],
+    "react/static-property-placement": ["error", "static public field"],
+    "react/prop-types": "off",
+    "react/jsx-props-no-spreading": ["off"],
+    "@typescript-eslint/explicit-function-return-type": [
+      "warn",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/interface-name-prefix": [
+      "error",
+      "always"
+    ],
+    "@typescript-eslint/prefer-interface": "off",
+    "@typescript-eslint/array-type": [
+      "error",
+      {
+        "default": "array-simple"
+      }
+    ],
+    "@typescript-eslint/ban-ts-ignore": "warn",
+    "@typescript-eslint/unbound-method": "off"
+  },
+  "overrides": [
+    {
+        "files": ["**/*.spec.ts?(x)", "**/*.test.ts?(x)"],
+        "env": {
+            "jest": true
+        },
+        "rules": {
+            "@typescript-eslint/no-object-literal-type-assertion": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "no-underscore-dangle": "off",
+            "global-require": "off",
+            "@typescript-eslint/ban-ts-ignore": "off"
+        }
+    }
+],
+  "settings": {
+    "import/resolver": {
+        "node": {
+            "extensions": [".js", ".ts", ".d.ts", ".jsx", ".tsx"]
+        }
+    }
+}
+}

config/paths.js

@@ -52,7 +52,6 @@ module.exports = {
   appNodeModules: resolveApp('node_modules'),
   appTsConfig: resolveApp('tsconfig.json'),
   appTsProdConfig: resolveApp('tsconfig.prod.json'),
-  appTsLint: resolveApp('tslint.json'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
 };

config/webpack.config.dev.js

@@ -306,7 +306,6 @@ module.exports = {
       async: false,
       watch: paths.appSrc,
       tsconfig: paths.appTsConfig,
-      tslint: paths.appTsLint,
     }),
   ],
   // Some libraries import Node modules but don't use them in the browser.

config/webpack.config.prod.js

@@ -413,7 +413,6 @@ module.exports = {
     new ForkTsCheckerWebpackPlugin({
       async: false,
       tsconfig: paths.appTsProdConfig,
-      tslint: paths.appTsLint,
     }),
   ],
   // Some libraries import Node modules but don't use them in the browser.

package.json

@@ -10,7 +10,8 @@
     "test": "node scripts/test.js --env=jsdom",
     "testCI": "CI=true node scripts/test.js --env=jsdom",
     "format": "prettier --write 'src/**/*.tsx' 'src/**/*.ts'",
-    "lint": "tslint 'src/**/*.tsx' 'src/**/*.ts'",
+    "lint": "eslint 'src/**/*.tsx' 'src/**/*.ts'",
+    "lint:fix": "yarn lint --fix",
     "commit": "git-cz"
   },
   "husky": {
@@ -61,6 +62,7 @@
     "react-json-view": "^1.19.1",
     "react-qrcode-logo": "^2.2.1",
     "react-redux": "^5.1.1",
+    "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-schema-based-json-editor": "^7.20.2",
     "react-select": "^2.2.0",
@@ -73,9 +75,6 @@
     "ts-jest": "22.0.1",
     "ts-loader": "^2.3.7",
     "tslib": "^1.10.0",
-    "tslint": "^5.7.0",
-    "tslint-config-prettier": "^1.10.0",
-    "tslint-react": "^3.2.0",
     "url-loader": "0.6.2",
     "utility-types": "^3.4.1",
     "whatwg-fetch": "2.0.3"
@@ -95,11 +94,22 @@
     "@types/react-router-dom": "^4.3.1",
     "@types/react-test-renderer": "^16.0.3",
     "@types/uuid": "^3.4.4",
+    "@typescript-eslint/eslint-plugin": "^2.8.0",
+    "@typescript-eslint/parser": "^2.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "commitizen": "^3.0.4",
     "cz-conventional-changelog": "^2.1.0",
     "env-cmd": "^10.0.1",
+    "eslint": "6.1.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-tsc": "^1.2.0",
     "extract-text-webpack-plugin": "3.0.2",
     "fork-ts-checker-webpack-plugin": "^0.2.8",
     "husky": "^1.2.0",
@@ -108,7 +118,6 @@
     "style-loader": "^0.23.1",
     "sw-precache-webpack-plugin": "0.11.4",
     "tsconfig-paths-webpack-plugin": "^2.0.0",
-    "tslint-plugin-prettier": "^2.0.1",
     "typescript": "^3.1.6",
     "uglifyjs-webpack-plugin": "1.2.5",
     "webpack": "3.8.1",

src/App.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import * as ReactDOM from 'react-dom'
 import App from './App'
 

src/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 
 import './App.scss'
@@ -11,22 +11,18 @@ import Tasks from './containers/Tasks/Tasks'
 import Routes from './routes'
 import './utils/Polyfills'
 
-class App extends React.Component {
-  public render() {
-    return (
-      <Router>
-        <div className="App">
-          <Header />
-          <Routes />
-          <BlockUi />
-          <BlockingNotifications />
-          <Notifications />
-          <Tasks />
-          <Footer />
-        </div>
-      </Router>
-    )
-  }
-}
+const App = (): JSX.Element => (
+  <Router>
+    <div className="App">
+      <Header />
+      <Routes />
+      <BlockUi />
+      <BlockingNotifications />
+      <Notifications />
+      <Tasks />
+      <Footer />
+    </div>
+  </Router>
+)
 
 export default App

src/common/If.spec.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+/* eslint-disable react/jsx-boolean-value */
+import React from 'react'
 import * as Renderer from 'react-test-renderer'
 import If from './If'
 

src/common/If.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react'
+import React from 'react'
 
 type Props = {
   condition: boolean
-  then: any
-  else?: any
+  then: JSX.Element
+  else?: JSX.Element
 }
 
-const If: React.FunctionComponent<Props> = props => {
-  if (props.condition) {
-    return props.then
+const If: React.FC<Props> = ({ condition, else: propsElse, then }) => {
+  if (condition) {
+    return then
   }
 
-  if (!!props.else) {
-    return props.else
+  if (propsElse) {
+    return propsElse
   }
 
   return null

src/components/AttestationStatus/AttestationStatus.tsx

@@ -1,6 +1,6 @@
 import * as sdk from '@kiltprotocol/sdk-js'
 import React from 'react'
-import { connect } from 'react-redux'
+import { connect, MapStateToProps } from 'react-redux'
 
 import AttestationService from '../../services/AttestationService'
 import * as Claims from '../../state/ducks/Claims'
@@ -19,17 +19,22 @@ const enum STATUS {
   ATTESTED = 'attested',
 }
 
-function isAttestedClaim(arg: any): arg is sdk.IAttestedClaim {
-  return arg.request !== undefined
+function isAttestedClaim(
+  arg: sdk.IAttestedClaim | sdk.IAttestation
+): arg is sdk.IAttestedClaim {
+  return (arg as sdk.IAttestedClaim).request !== undefined
 }
 
-type Props = {
-  attestation: sdk.IAttestedClaim | sdk.IAttestation
-
-  // redux
+type StateProps = {
   attestationStatusCycle: number
 }
 
+type OwnProps = {
+  attestation: sdk.IAttestedClaim | sdk.IAttestation
+}
+
+type Props = StateProps & OwnProps
+
 type State = {
   status?: STATUS
 }
@@ -38,48 +43,36 @@ class AttestationStatus extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
 
-    const _attestation = isAttestedClaim(props.attestation)
+    const attestation = isAttestedClaim(props.attestation)
       ? props.attestation.attestation
       : props.attestation
 
     this.state = {
-      status: _attestation.revoked ? STATUS.UNVERIFIED : undefined,
+      status: attestation.revoked ? STATUS.UNVERIFIED : undefined,
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const { status } = this.state
     if (status !== STATUS.UNVERIFIED) {
       this.verifyAttestedClaim()
     }
   }
 
-  public componentDidUpdate(prevProps: Props) {
+  public componentDidUpdate(prevProps: Props): void {
     const { status } = this.state
+    const { attestationStatusCycle } = this.props
+
     if (
-      prevProps.attestationStatusCycle !== this.props.attestationStatusCycle &&
+      prevProps.attestationStatusCycle !== attestationStatusCycle &&
       status !== STATUS.UNVERIFIED &&
       status !== STATUS.PENDING
     ) {
       this.verifyAttestedClaim()
     }
   }
 
-  public render() {
-    const { status } = this.state
-
-    return (
-      <section className={`AttestationStatus ${status}`}>
-        {status === STATUS.PENDING && (
-          <Spinner size={20} color="#ef5a28" strength={3} />
-        )}
-        {status === STATUS.ATTESTED && <div className="attested" />}
-        {status === STATUS.UNVERIFIED && <div className="unverified" />}
-      </section>
-    )
-  }
-
-  private verifyAttestedClaim() {
+  private verifyAttestedClaim(): void {
     const { attestation } = this.props
     const { status } = this.state
 
@@ -117,9 +110,27 @@ class AttestationStatus extends React.Component<Props, State> {
       }
     })
   }
+
+  public render(): JSX.Element {
+    const { status } = this.state
+
+    return (
+      <section className={`AttestationStatus ${status}`}>
+        {status === STATUS.PENDING && (
+          <Spinner size={20} color="#ef5a28" strength={3} />
+        )}
+        {status === STATUS.ATTESTED && <div className="attested" />}
+        {status === STATUS.UNVERIFIED && <div className="unverified" />}
+      </section>
+    )
+  }
 }
 
-const mapStateToProps = (state: ReduxState) => ({
+const mapStateToProps: MapStateToProps<
+  StateProps,
+  OwnProps,
+  ReduxState
+> = state => ({
   attestationStatusCycle: UiState.getAttestationStatusCycle(state),
 })