From d442f6411249336c3e06fcdd5b5d595d5c402c4f Mon Sep 17 00:00:00 2001
From: Pavlos Chrysochoidis <10210143+pchrysochoidis@users.noreply.github.com>
Date: Mon, 7 Mar 2022 19:30:25 +0000
Subject: [PATCH] explorer-client: improve linting rules (#506)

* explorer-client: improve linting rules

* no binding for jsx attrs
* no duplicate imports
* group scss/css imports together after type imports

* explorer-client: apply linting rules

* also rename index.scss to index.css (leftover from scss removing)
---
 explorer/client/.eslintrc.js                           | 10 ++++++++++
 explorer/client/src/app/App.tsx                        |  1 +
 explorer/client/src/components/footer/Footer.tsx       |  1 +
 explorer/client/src/{index.scss => index.css}          |  0
 explorer/client/src/index.tsx                          |  2 +-
 .../src/pages/transaction-result/TransactionResult.tsx |  1 +
 6 files changed, 14 insertions(+), 1 deletion(-)
 rename explorer/client/src/{index.scss => index.css} (100%)

diff --git a/explorer/client/.eslintrc.js b/explorer/client/.eslintrc.js
index 6c590957061f0..c940525521350 100644
--- a/explorer/client/.eslintrc.js
+++ b/explorer/client/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
     extends: ['react-app', 'react-app/jest', 'prettier'],
     rules: {
+        'react/jsx-no-bind': ['error'],
         'import/order': [
             'warn',
             {
@@ -9,10 +10,19 @@ module.exports = {
                     ['internal', 'parent', 'sibling', 'index'],
                     'type',
                 ],
+                pathGroups: [
+                    {
+                        pattern: '{.,..}/**/*.css',
+                        group: 'type',
+                        position: 'after',
+                    },
+                ],
                 'newlines-between': 'always',
                 alphabetize: { order: 'asc' },
+                warnOnUnassignedImports: true,
             },
         ],
+        'import/no-duplicates': ['error'],
         '@typescript-eslint/consistent-type-imports': [
             'error',
             {
diff --git a/explorer/client/src/app/App.tsx b/explorer/client/src/app/App.tsx
index c3560d2d09a53..5050d6f6cc01e 100644
--- a/explorer/client/src/app/App.tsx
+++ b/explorer/client/src/app/App.tsx
@@ -2,6 +2,7 @@ import Footer from '../components/footer/Footer';
 import Header from '../components/header/Header';
 import Search from '../components/search/Search';
 import AppRoutes from '../pages/config/AppRoutes';
+
 import styles from './App.module.css';
 
 function App() {
diff --git a/explorer/client/src/components/footer/Footer.tsx b/explorer/client/src/components/footer/Footer.tsx
index 0acd47ead55ac..b7a0ff8d3799e 100644
--- a/explorer/client/src/components/footer/Footer.tsx
+++ b/explorer/client/src/components/footer/Footer.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 
 import ExternalLink from '../external-link/ExternalLink';
+
 import styles from './Footer.module.css';
 
 function Footer() {
diff --git a/explorer/client/src/index.scss b/explorer/client/src/index.css
similarity index 100%
rename from explorer/client/src/index.scss
rename to explorer/client/src/index.css
diff --git a/explorer/client/src/index.tsx b/explorer/client/src/index.tsx
index 4932206a33e86..b6d765987ec60 100644
--- a/explorer/client/src/index.tsx
+++ b/explorer/client/src/index.tsx
@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import App from './app/App';
 import reportWebVitals from './utils/reportWebVitals';
 
-import './index.scss';
+import './index.css';
 
 ReactDOM.render(
     <React.StrictMode>
diff --git a/explorer/client/src/pages/transaction-result/TransactionResult.tsx b/explorer/client/src/pages/transaction-result/TransactionResult.tsx
index 8118014ca5aaf..4710acffa29a3 100644
--- a/explorer/client/src/pages/transaction-result/TransactionResult.tsx
+++ b/explorer/client/src/pages/transaction-result/TransactionResult.tsx
@@ -1,6 +1,7 @@
 import { useParams } from 'react-router-dom';
 
 import mockTransactionData from '../../utils/transaction_mock.json';
+
 import styles from './TransactionResult.module.css';
 
 type DataType = {