Setup ESLint with plugins (#8)

* update react-scripts, change tsconfig so `yarn start` passes `yarn add --exact [email protected]` * bootstrap eslint with `yarn eslint --init` and cleanup the config a bit * `yarn eslint . --fix` * install prettier, its eslint plugin and config, set it up `yarn add -D prettier eslint-plugin-prettier eslint-config-prettier` * `yarn eslint . --fix` * install and setup eslint import sorting plugin `yarn add -D eslint-plugin-simple-import-sort` * `yarn eslint . --fix` * add .vscode config, amend README
ZdruzenieSTROM · Nov 15, 2020 · acf931f · acf931f
1 parent 6ecaa7e
commit acf931f
Show file tree

Hide file tree

Showing 20 changed files with 2,967 additions and 2,225 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,20 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        // for what's included, check: https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
+        "react-app",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+        // eslint-config-prettier package - turns off eslint rules conflicting with prettier
+        "prettier"
+    ],
+    "plugins": ["simple-import-sort"],
+    "rules": {
+        "react/prop-types": "off",
+        "simple-import-sort/sort": "error"
+    }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": false,
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
diff --git a/README.md b/README.md
@@ -32,4 +32,7 @@ Development server sa spustí pomocou príkazu:
 ```
 yarn start
 ```
-Tento príkaz spustí server na `localhost:3000`, ktorý reaguje na zmeny vo frontendovom kóde a automaticky sa reloaduje.
+Tento príkaz spustí server na `localhost:3000`, ktorý reaguje na zmeny vo frontendovom kóde a automaticky sa reloaduje.
+
+# IDE setup
+Používame VSCode, nainštaluj si doň ESLint rozšírenie. V repe máme `.vscode` config, preto sa kód sa pri uložení automaticky formátuje.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "4.0.0",
     "typescript": "^4.0.3"
   },
   "scripts": {
@@ -41,6 +41,10 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.6",
-    "http-proxy-middleware": "^1.0.6"
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
+    "http-proxy-middleware": "^1.0.6",
+    "prettier": "^2.1.2"
   }
 }
diff --git a/src/Webstrom.tsx b/src/Webstrom.tsx
@@ -1,13 +1,13 @@
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
+import React from 'react'
+import {BrowserRouter as Router} from 'react-router-dom'
 
-import { MenuMain } from "./components/MenuMain/";
-import { MenuSeminars } from "./components/MenuSeminars";
-import { MainContentRouter } from "./pages/MainContentRouter";
-import { Footer } from "./components/Footer";
+import {Footer} from './components/Footer'
+import {MenuMain} from './components/MenuMain/'
+import {MenuSeminars} from './components/MenuSeminars'
+import {MainContentRouter} from './pages/MainContentRouter'
 
 export const Webstrom: React.FC = () => {
-  const seminarId = getSeminarId();
+  const seminarId = getSeminarId()
 
   // V prípade, že sa dá zmeniť subdoména bez reloadnutia prehliadača, môžeme zmeniť
   // seminar id z konštanty na state ako na riadkoch nižšie.
@@ -32,34 +32,34 @@ export const Webstrom: React.FC = () => {
         <Footer />
       </div>
     </Router>
-  );
-};
+  )
+}
 
 const getSeminarId = () => {
   /**
    * Táto funkcia vráti id seminára podľa subdomény vo window.location.host
    * pre potreby routovania a načítania menu z api.
    */
-  let seminarId = 1;
-  switch (window.location.host.split(".")[0]) {
-    case "strom":
-      seminarId = 1;
-      break;
-    case "matik":
-      seminarId = 2;
-      break;
-    case "malynar":
-      seminarId = 3;
-      break;
-    case "zdruzenie":
-      seminarId = 4; // zatiaľ neexistujú žiadne menu itemy v api
-      break;
-    case "admin":
-      seminarId = 5; // zatiaľ neexistujú žiadne menu itemy v api
-      break;
+  let seminarId = 1
+  switch (window.location.host.split('.')[0]) {
+    case 'strom':
+      seminarId = 1
+      break
+    case 'matik':
+      seminarId = 2
+      break
+    case 'malynar':
+      seminarId = 3
+      break
+    case 'zdruzenie':
+      seminarId = 4 // zatiaľ neexistujú žiadne menu itemy v api
+      break
+    case 'admin':
+      seminarId = 5 // zatiaľ neexistujú žiadne menu itemy v api
+      break
     default:
-      seminarId = 1;
-      break;
+      seminarId = 1
+      break
   }
-  return seminarId;
-};
+  return seminarId
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
-import React from "react";
-import "./Footer.css";
+import './Footer.css'
 
-export const Footer: React.FC = () => <div id="footer"></div>;
+import React from 'react'
+
+export const Footer: React.FC = () => <div id="footer"></div>
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1 +1 @@
-export * from "./Footer";
+export * from './Footer'
diff --git a/src/components/MenuMain/MenuMain.tsx b/src/components/MenuMain/MenuMain.tsx
@@ -1,32 +1,33 @@
-import React, { useState, useEffect } from "react";
-import * as FaIcons from "react-icons/fa";
-import * as CgIcons from "react-icons/cg";
-import { Link, useLocation } from "react-router-dom";
-import "./MenuMain.css";
-import axios from "axios";
+import './MenuMain.css'
+
+import axios from 'axios'
+import React, {useEffect, useState} from 'react'
+import * as CgIcons from 'react-icons/cg'
+import * as FaIcons from 'react-icons/fa'
+import {Link, useLocation} from 'react-router-dom'
 
 interface MenuItemInterface {
-  id: number;
-  caption: string;
-  url: string;
+  id: number
+  caption: string
+  url: string
 }
 
-export const MenuMain: React.FC<{ seminarId: number }> = ({ seminarId }) => {
-  const [isVisible, setIsVisible] = useState(true);
-  const [menuItems, setMenuItems] = useState<MenuItemInterface[]>([]);
+export const MenuMain: React.FC<{seminarId: number}> = ({seminarId}) => {
+  const [isVisible, setIsVisible] = useState(true)
+  const [menuItems, setMenuItems] = useState<MenuItemInterface[]>([])
 
   const toggleMenu = () => {
-    setIsVisible((currentIsVisible) => !currentIsVisible);
-  };
+    setIsVisible((currentIsVisible) => !currentIsVisible)
+  }
 
   useEffect(() => {
     axios.get(`/api/cms/menu-item/on-site/${seminarId}/`).then((res) => {
-      setMenuItems(res.data);
-    });
-  }, [seminarId]);
+      setMenuItems(res.data)
+    })
+  }, [seminarId])
 
   return (
-    <div id="menu-main" className={isVisible ? "visible" : ""}>
+    <div id="menu-main" className={isVisible ? 'visible' : ''}>
       {!isVisible && (
         <div id="menu-main-open-button">
           <FaIcons.FaBars className="icon-bars" onClick={toggleMenu} />
@@ -38,19 +39,19 @@ export const MenuMain: React.FC<{ seminarId: number }> = ({ seminarId }) => {
       <div id="menu-main-items">
         {menuItems &&
           menuItems.map((menuItem: MenuItemInterface) => {
-            return <MenuMainItem key={menuItem.id} caption={menuItem.caption} url={menuItem.url} />;
+            return <MenuMainItem key={menuItem.id} caption={menuItem.caption} url={menuItem.url} />
           })}
       </div>
     </div>
-  );
-};
+  )
+}
 
-const MenuMainItem: React.FC<{ caption: string; url: string }> = ({ caption, url }) => {
-  const location = useLocation();
+const MenuMainItem: React.FC<{caption: string; url: string}> = ({caption, url}) => {
+  const location = useLocation()
 
   return (
-    <div className={location.pathname === url ? "menu-main-item active" : "menu-main-item"}>
+    <div className={location.pathname === url ? 'menu-main-item active' : 'menu-main-item'}>
       <Link to={url}>{caption}</Link>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/MenuMain/index.tsx b/src/components/MenuMain/index.tsx
@@ -1 +1 @@
-export * from "./MenuMain";
+export * from './MenuMain'
diff --git a/src/components/MenuSeminars/MenuSeminars.tsx b/src/components/MenuSeminars/MenuSeminars.tsx
@@ -1,23 +1,24 @@
-import React from "react";
-import "./MenuSeminars.css";
+import './MenuSeminars.css'
+
+import React from 'react'
 
 // Nie som si istý, či sa dá zmeniť subdoména bez toho, aby sa prehliadač musel reloadnuť.
 // Ak je to možné, pridal by som updateSeminarId handler na zmenu statu seminarId o component vyššie.
 //
 // export const MenuSeminars: React.FC<{ updateSeminarId: () => void }> = ({ updateSeminarId }) => (
-export const MenuSeminars: React.FC<{ seminarId: number }> = ({ seminarId }) => (
+export const MenuSeminars: React.FC<{seminarId: number}> = ({seminarId}) => (
   <div id="menu-seminars">
-    <div className={seminarId === 3 ? "menu-seminars-item active" : "menu-seminars-item"}>
+    <div className={seminarId === 3 ? 'menu-seminars-item active' : 'menu-seminars-item'}>
       <a href="http://malynar.localhost:3000/">Malynár</a>
     </div>
-    <div className={seminarId === 2 ? "menu-seminars-item active" : "menu-seminars-item"}>
+    <div className={seminarId === 2 ? 'menu-seminars-item active' : 'menu-seminars-item'}>
       <a href="http://matik.localhost:3000/">Matik</a>
     </div>
-    <div className={seminarId === 1 ? "menu-seminars-item active" : "menu-seminars-item"}>
+    <div className={seminarId === 1 ? 'menu-seminars-item active' : 'menu-seminars-item'}>
       <a href="http://strom.localhost:3000/">Strom</a>
     </div>
-    <div className={seminarId === 4 ? "menu-seminars-item active" : "menu-seminars-item"}>
+    <div className={seminarId === 4 ? 'menu-seminars-item active' : 'menu-seminars-item'}>
       <a href="http://zdruzenie.localhost:3000/">Združenie</a>
     </div>
   </div>
-);
+)
diff --git a/src/components/MenuSeminars/index.tsx b/src/components/MenuSeminars/index.tsx
@@ -1 +1 @@
-export * from "./MenuSeminars";
+export * from './MenuSeminars'
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import {Webstrom} from "./Webstrom";
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import {Webstrom} from './Webstrom'
 
 ReactDOM.render(
   <React.StrictMode>
     <Webstrom />
   </React.StrictMode>,
-  document.getElementById("root")
-);
+  document.getElementById('root'),
+)
diff --git a/src/pages/MainContentRouter/MainContentRouter.tsx b/src/pages/MainContentRouter/MainContentRouter.tsx
@@ -1,29 +1,30 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { PagePlaceholder } from "../PagePlaceholder";
+import React from 'react'
+import {Route, Switch} from 'react-router-dom'
 
-export const MainContentRouter: React.FC<{ seminarId: number }> = ({ seminarId }) => {
+import {PagePlaceholder} from '../PagePlaceholder'
+
+export const MainContentRouter: React.FC<{seminarId: number}> = ({seminarId}) => {
   const renderRouter = (seminarId: number) => {
     switch (seminarId) {
       case 1:
-        return <StromRouter />;
+        return <StromRouter />
       case 2:
-        return <MatikRouter />;
+        return <MatikRouter />
       case 3:
-        return <MalynarRouter />;
+        return <MalynarRouter />
       case 4:
-        return <ZdruzenieRouter />;
+        return <ZdruzenieRouter />
       default:
-        return <StromRouter />;
+        return <StromRouter />
     }
-  };
+  }
 
   return (
     <div id="main-content">
       <Switch>{renderRouter(seminarId)}</Switch>
     </div>
-  );
-};
+  )
+}
 
 const MalynarRouter: React.FC = () => {
   return (
@@ -50,8 +51,8 @@ const MalynarRouter: React.FC = () => {
         <PagePlaceholder title="Ochrana osobných údajov" />
       </Route>
     </>
-  );
-};
+  )
+}
 
 const MatikRouter: React.FC = () => {
   return (
@@ -78,8 +79,8 @@ const MatikRouter: React.FC = () => {
         <PagePlaceholder title="Ochrana osobných údajov" />
       </Route>
     </>
-  );
-};
+  )
+}
 
 const StromRouter: React.FC = () => {
   return (
@@ -103,8 +104,8 @@ const StromRouter: React.FC = () => {
         <PagePlaceholder title="Ochrana osobných údajov" />
       </Route>
     </>
-  );
-};
+  )
+}
 
 const ZdruzenieRouter: React.FC = () => {
   return (
@@ -113,5 +114,5 @@ const ZdruzenieRouter: React.FC = () => {
         <PagePlaceholder title="Združenie home" />
       </Route>
     </>
-  );
-};
+  )
+}
diff --git a/src/pages/MainContentRouter/index.tsx b/src/pages/MainContentRouter/index.tsx
@@ -1 +1 @@
-export * from "./MainContentRouter";
+export * from './MainContentRouter'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./Footer";
		export * from './Footer'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./MenuMain";
		export * from './MenuMain'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./MenuSeminars";
		export * from './MenuSeminars'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./MainContentRouter";
		export * from './MainContentRouter'