Merge branch 'eslint-fix' into 'master'

Eslint fix

See merge request !5

.eslintignore

+*.css
+*.svg
+**/*.js
+node_modules
+build
\ No newline at end of file

.eslintrc.yml

+---
 env:
   browser: true
   es2021: true
 extends:
-  - 'plugin:react/recommended'
+  - plugin:react/recommended
   - airbnb
+  - plugin:@typescript-eslint/recommended
+  - prettier
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaFeatures:
     jsx: true
   ecmaVersion: 12
   sourceType: module
+settings:
+  import/resolver:
+    typescript: {}
 plugins:
   - react
   - '@typescript-eslint'
-rules: {}
+  - react-hooks
+rules:
+  no-use-before-define: 'off'
+  '@typescript-eslint/no-use-before-define':
+    - error
+  react/jsx-filename-extension:
+    - warn
+    - extensions:
+        - '.tsx'
+  import/extensions:
+    - error
+    - ignorePackages
+    - ts: never
+      tsx: never
+  no-shadow: 'off'
+  '@typescript-eslint/no-shadow':
+    - error
+  '@typescript-eslint/explicit-function-return-type':
+    - error
+    - allowExpressions: true
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
+  import/prefer-default-export: 'off'
+  react/prop-types: 'off'

.gitlab-ci.yml

@@ -8,4 +8,4 @@ build:
   script:
     - npm install --global yarn
     - yarn install
-    - yarn build
\ No newline at end of file
+    - yarn build

.prettierrc.json

-{}
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true
+}

README.md

@@ -3,19 +3,23 @@
 Dashboard of the service which is used by system administrators
 
 ## Node installation
+
 ### Windows
+
 It is reccomended to use WSL.
-Should not be possible, use [this guide](https://docs.microsoft.com/en-us/windows/nodejs/setup-on-windows) to install nvm 
+Should not be possible, use [this guide](https://docs.microsoft.com/en-us/windows/nodejs/setup-on-windows) to install nvm
 
 ### Linux/Macos
+
 ```
 # Install node version manager
 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
 ```
 
 ## Project installation
+
 ```
-# Ensure that nvm was installed correctly with 
+# Ensure that nvm was installed correctly with
 nvm --version # should return the version of nvm installed.
 # Install latest version of node
 nvm install node

package.json

@@ -10,24 +10,20 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "typescript": "^4.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "format": "prettier --write ."
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
   },
   "browserslist": {
     "production": [
@@ -42,14 +38,17 @@
     ]
   },
   "devDependencies": {
-    "prettier": "2.2.1",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "eslint": "^7.22.0",
+    "eslint": "^7.2.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.3.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4",
+    "prettier": "2.2.1"
   }
 }

src/App.test.tsx

-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
 
-test("renders learn react link", () => {
+test('renders learn react link', () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/App.tsx

-import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
+export const App: React.FC = () => (
+  <div className="App">
+    <header className="App-header">
+      <img src={logo} className="App-logo" alt="logo" />
+      <p>
+        Edit <code>src/App.tsx</code> and save to reload.
+      </p>
+      <a
+        className="App-link"
+        href="https://reactjs.org"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn React
+      </a>
+    </header>
+  </div>
+);

src/index.css

 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

src/index.tsx

-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import { App } from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root'),
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/reportWebVitals.ts

-import { ReportHandler } from "web-vitals";
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';