From 227eb9c43bf67b1b7fd93ce4e7f23ec8f239332d Mon Sep 17 00:00:00 2001 From: Matti Airas Date: Sun, 25 Aug 2024 15:07:00 +0300 Subject: [PATCH] Lint and Reformat frontend files --- frontend/.eslintrc.js | 46 ----- frontend/.gitignore | 1 + frontend/eslint.config.mjs | 12 ++ frontend/package.json | 7 +- frontend/pnpm-lock.yaml | 158 ++++++++++++++++++ frontend/src/App.tsx | 4 +- frontend/src/common/InputDirtyContext.ts | 2 +- frontend/src/common/configAPIClient.ts | 6 +- frontend/src/common/jsonTypes.ts | 11 -- frontend/src/components/Collapse.tsx | 6 +- frontend/src/components/DataLoader.tsx | 7 - frontend/src/components/Form.tsx | 1 + frontend/src/components/Header.tsx | 10 +- frontend/src/components/Tab.tsx | 4 +- frontend/src/components/ToastMessage.tsx | 6 +- frontend/src/components/useToast.ts | 3 +- .../src/pages/Configuration/ConfigCard.tsx | 17 +- .../pages/SignalK/SignalKSettingsPanel.tsx | 2 - frontend/src/pages/Status/InfoGroups.tsx | 6 +- frontend/src/pages/System/index.tsx | 25 +-- frontend/src/pages/WiFi/CheckboxAccordion.tsx | 51 ------ frontend/src/pages/WiFi/NetworkList.tsx | 1 - .../pages/WiFi/SingleClientConfigPanel.tsx | 5 +- frontend/src/pages/WiFi/WiFiSettingsPanel.tsx | 11 +- 24 files changed, 229 insertions(+), 173 deletions(-) delete mode 100644 frontend/.eslintrc.js create mode 100644 frontend/eslint.config.mjs delete mode 100644 frontend/src/common/jsonTypes.ts delete mode 100644 frontend/src/components/DataLoader.tsx delete mode 100644 frontend/src/pages/WiFi/CheckboxAccordion.tsx diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 2fea71152..000000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,46 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "preact", - "eslint:recommended", - 'plugin:@typescript-eslint/recommended', - 'plugin:react/recommended', - "prettier", - ], - "overrides": [ - { - "env": { - "node": true - }, - "files": [ - ".eslintrc.{js,cjs}" - ], - "parserOptions": { - "sourceType": "script", - } - } - ], - parser: '@typescript-eslint/parser', - "parserOptions": { - "project": "tsconfig.json", - "ecmaVersion": "latest", - "sourceType": "module", - }, - "plugins": [ - '@typescript-eslint', - "preact" - ], - "root": true, - "rules": { - "react/react-in-jsx-scope": "off", - "react/jsx-uses-react": "error", - }, - "settings": { - "react": { - "version": "18.2.0" - } - } -} diff --git a/frontend/.gitignore b/frontend/.gitignore index c64d864f7..0cce06828 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -22,6 +22,7 @@ dist-ssr *.njsproj *.sln *.sw? +.vite # Bootstrap CSS files are generated with "npm run css" css/styles.css* diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs new file mode 100644 index 000000000..065e541d0 --- /dev/null +++ b/frontend/eslint.config.mjs @@ -0,0 +1,12 @@ +import pluginJs from "@eslint/js"; +import globals from "globals"; +import tseslint from "typescript-eslint"; + + + +export default [ + {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]}, + {languageOptions: { globals: globals.browser }}, + pluginJs.configs.recommended, + ...tseslint.configs.recommended, +]; diff --git a/frontend/package.json b/frontend/package.json index 351dde9bf..8a0a45470 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "sensesp-frontend", "private": true, - "type": "module", + "type": "commonjs", "scripts": { "dev": "vite", "build": "vite build", @@ -11,7 +11,7 @@ "css": "pnpm run css-compile && pnpm run css-prefix", "preview": "vite preview", "type-check": "tsc --noEmit", - "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src", + "lint": "eslint --fix ./src", "format": "prettier --write ./src", "purgecss": "node ./node_modules/purgecss/bin/purgecss.js --config ./purgecss.config.js", "fix": "pnpm run format && pnpm run type-check && pnpm run lint" @@ -24,6 +24,7 @@ "preact-router": "^4.1.2" }, "devDependencies": { + "@eslint/js": "^9.9.1", "@originjs/vite-plugin-federation": "^1.3.5", "@preact/preset-vite": "^2.9.0", "@types/bootstrap": "^5.2.10", @@ -39,6 +40,7 @@ "eslint-plugin-preact": "^0.1.0", "eslint-plugin-promise": "^7.1.0", "eslint-plugin-react": "^7.35.0", + "globals": "^15.9.0", "jest": "^29.7.0", "postcss": "^8.4.41", "postcss-cli": "^11.0.0", @@ -49,6 +51,7 @@ "sass": "^1.77.8", "sass-loader": "^16.0.0", "typescript": "^5.5.4", + "typescript-eslint": "^8.2.0", "vite": "^5.4.0", "vite-plugin-mock-dev-server": "^1.7.0", "vite-tsconfig-paths": "^5.0.1" diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 662571b8d..7de4588d9 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -22,6 +22,9 @@ dependencies: version: 4.1.2(preact@10.23.2) devDependencies: + '@eslint/js': + specifier: ^9.9.1 + version: 9.9.1 '@originjs/vite-plugin-federation': specifier: ^1.3.5 version: 1.3.5 @@ -67,6 +70,9 @@ devDependencies: eslint-plugin-react: specifier: ^7.35.0 version: 7.35.0(eslint@9.9.0) + globals: + specifier: ^15.9.0 + version: 15.9.0 jest: specifier: ^29.7.0 version: 29.7.0 @@ -97,6 +103,9 @@ devDependencies: typescript: specifier: ^5.5.4 version: 5.5.4 + typescript-eslint: + specifier: ^8.2.0 + version: 8.2.0(eslint@9.9.0)(typescript@5.5.4) vite: specifier: ^5.4.0 version: 5.4.0(sass@1.77.8) @@ -725,6 +734,11 @@ packages: engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} dev: true + /@eslint/js@9.9.1: + resolution: {integrity: sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + dev: true + /@eslint/object-schema@2.1.4: resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1450,6 +1464,33 @@ packages: - supports-color dev: true + /@typescript-eslint/eslint-plugin@8.2.0(@typescript-eslint/parser@8.2.0)(eslint@9.9.0)(typescript@5.5.4): + resolution: {integrity: sha512-02tJIs655em7fvt9gps/+4k4OsKULYGtLBPJfOsmOq1+3cdClYiF0+d6mHu6qDnTcg88wJBkcPLpQhq7FyDz0A==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0 + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@eslint-community/regexpp': 4.11.0 + '@typescript-eslint/parser': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + '@typescript-eslint/scope-manager': 8.2.0 + '@typescript-eslint/type-utils': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + '@typescript-eslint/utils': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + '@typescript-eslint/visitor-keys': 8.2.0 + eslint: 9.9.0 + graphemer: 1.4.0 + ignore: 5.3.2 + natural-compare: 1.4.0 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/experimental-utils@2.34.0(eslint@9.9.0)(typescript@5.5.4): resolution: {integrity: sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==} engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1} @@ -1521,6 +1562,27 @@ packages: - supports-color dev: true + /@typescript-eslint/parser@8.2.0(eslint@9.9.0)(typescript@5.5.4): + resolution: {integrity: sha512-j3Di+o0lHgPrb7FxL3fdEy6LJ/j2NE8u+AP/5cQ9SKb+JLH6V6UHDqJ+e0hXBkHP1wn1YDFjYCS9LBQsZDlDEg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 8.2.0 + '@typescript-eslint/types': 8.2.0 + '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4) + '@typescript-eslint/visitor-keys': 8.2.0 + debug: 4.3.6 + eslint: 9.9.0 + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/scope-manager@5.62.0: resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1545,6 +1607,14 @@ packages: '@typescript-eslint/visitor-keys': 8.1.0 dev: true + /@typescript-eslint/scope-manager@8.2.0: + resolution: {integrity: sha512-OFn80B38yD6WwpoHU2Tz/fTz7CgFqInllBoC3WP+/jLbTb4gGPTy9HBSTsbDWkMdN55XlVU0mMDYAtgvlUspGw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + dependencies: + '@typescript-eslint/types': 8.2.0 + '@typescript-eslint/visitor-keys': 8.2.0 + dev: true + /@typescript-eslint/type-utils@7.18.0(eslint@9.9.0)(typescript@5.5.4): resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==} engines: {node: ^18.18.0 || >=20.0.0} @@ -1584,6 +1654,25 @@ packages: - supports-color dev: true + /@typescript-eslint/type-utils@8.2.0(eslint@9.9.0)(typescript@5.5.4): + resolution: {integrity: sha512-g1CfXGFMQdT5S+0PSO0fvGXUaiSkl73U1n9LTK5aRAFnPlJ8dLKkXr4AaLFvPedW8lVDoMgLLE3JN98ZZfsj0w==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4) + '@typescript-eslint/utils': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + debug: 4.3.6 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 + transitivePeerDependencies: + - eslint + - supports-color + dev: true + /@typescript-eslint/types@5.62.0: resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1599,6 +1688,11 @@ packages: engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} dev: true + /@typescript-eslint/types@8.2.0: + resolution: {integrity: sha512-6a9QSK396YqmiBKPkJtxsgZZZVjYQ6wQ/TlI0C65z7vInaETuC6HAHD98AGLC8DyIPqHytvNuS8bBVvNLKyqvQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + dev: true + /@typescript-eslint/typescript-estree@2.34.0(typescript@5.5.4): resolution: {integrity: sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==} engines: {node: ^8.10.0 || ^10.13.0 || >=11.10.1} @@ -1685,6 +1779,28 @@ packages: - supports-color dev: true + /@typescript-eslint/typescript-estree@8.2.0(typescript@5.5.4): + resolution: {integrity: sha512-kiG4EDUT4dImplOsbh47B1QnNmXSoUqOjWDvCJw/o8LgfD0yr7k2uy54D5Wm0j4t71Ge1NkynGhpWdS0dEIAUA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 8.2.0 + '@typescript-eslint/visitor-keys': 8.2.0 + debug: 4.3.6 + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.6.3 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/utils@5.62.0(eslint@9.9.0)(typescript@5.5.4): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1737,6 +1853,22 @@ packages: - typescript dev: true + /@typescript-eslint/utils@8.2.0(eslint@9.9.0)(typescript@5.5.4): + resolution: {integrity: sha512-O46eaYKDlV3TvAVDNcoDzd5N550ckSe8G4phko++OCSC1dYIb9LTc3HDGYdWqWIAT5qDUKphO6sd9RrpIJJPfg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.0) + '@typescript-eslint/scope-manager': 8.2.0 + '@typescript-eslint/types': 8.2.0 + '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4) + eslint: 9.9.0 + transitivePeerDependencies: + - supports-color + - typescript + dev: true + /@typescript-eslint/visitor-keys@5.62.0: resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1761,6 +1893,14 @@ packages: eslint-visitor-keys: 3.4.3 dev: true + /@typescript-eslint/visitor-keys@8.2.0: + resolution: {integrity: sha512-sbgsPMW9yLvS7IhCi8IpuK1oBmtbWUNP+hBdwl/I9nzqVsszGnNGti5r9dUtF5RLivHUFFIdRvLiTsPhzSyJ3Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + dependencies: + '@typescript-eslint/types': 8.2.0 + eslint-visitor-keys: 3.4.3 + dev: true + /acorn-jsx@5.3.2(acorn@8.12.1): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -5722,6 +5862,24 @@ packages: - supports-color dev: true + /typescript-eslint@8.2.0(eslint@9.9.0)(typescript@5.5.4): + resolution: {integrity: sha512-DmnqaPcML0xYwUzgNbM1XaKXpEb7BShYf2P1tkUmmcl8hyeG7Pj08Er7R9bNy6AufabywzJcOybQAtnD/c9DGw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/eslint-plugin': 8.2.0(@typescript-eslint/parser@8.2.0)(eslint@9.9.0)(typescript@5.5.4) + '@typescript-eslint/parser': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + '@typescript-eslint/utils': 8.2.0(eslint@9.9.0)(typescript@5.5.4) + typescript: 5.5.4 + transitivePeerDependencies: + - eslint + - supports-color + dev: true + /typescript@5.5.4: resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==} engines: {node: '>=14.17'} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8c19bed17..adb420006 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -40,7 +40,7 @@ interface RedirectProps { to: string; } -function Redirect({ path, to }: RedirectProps): JSX.Element { +function Redirect({ to }: RedirectProps): JSX.Element { useEffect(() => { route(to); // Also update the browser URL @@ -61,7 +61,7 @@ export function App(): JSX.Element { const data = await res.json(); setRoutes(data); - let populatedRoutes: RouteInstruction[] = []; + const populatedRoutes: RouteInstruction[] = []; for (const route of data) { if (route.loadPath) { const remoteInfo = { diff --git a/frontend/src/common/InputDirtyContext.ts b/frontend/src/common/InputDirtyContext.ts index bad5a37a4..2ab477cd5 100644 --- a/frontend/src/common/InputDirtyContext.ts +++ b/frontend/src/common/InputDirtyContext.ts @@ -7,5 +7,5 @@ export interface InputDirtyContextType { export const InputDirtyContext = createContext({ isInputDirty: false, - setInputDirty: (v) => {}, + setInputDirty: () => {}, }); diff --git a/frontend/src/common/configAPIClient.ts b/frontend/src/common/configAPIClient.ts index cb19454c4..e74e42236 100644 --- a/frontend/src/common/configAPIClient.ts +++ b/frontend/src/common/configAPIClient.ts @@ -33,7 +33,7 @@ export async function fetchConfigData(path: string): Promise { } return await response.json(); } catch (e) { - throw new Error("Error getting config data from the device."); + throw new Error("Error getting config data from the device: " + e.message); } } @@ -58,7 +58,9 @@ export async function saveConfigData( body: data, }); if (!response.ok) { - errorHandler(Error(`HTTP Error ${response.status} ${response.statusText}`)); + errorHandler( + Error(`HTTP Error ${response.status} ${response.statusText}`), + ); return false; } } catch (e) { diff --git a/frontend/src/common/jsonTypes.ts b/frontend/src/common/jsonTypes.ts deleted file mode 100644 index 8176b6d3f..000000000 --- a/frontend/src/common/jsonTypes.ts +++ /dev/null @@ -1,11 +0,0 @@ -export type JsonValue = - | string - | number - | boolean - | null - | JsonArray - | JsonObject; - -export interface JsonArray extends Array {} - -export interface JsonObject extends Record {} diff --git a/frontend/src/components/Collapse.tsx b/frontend/src/components/Collapse.tsx index 8b8d81d57..e7281235e 100644 --- a/frontend/src/components/Collapse.tsx +++ b/frontend/src/components/Collapse.tsx @@ -23,7 +23,11 @@ export function Collapse({ useEffect(() => { const collapseEl = document.getElementById(id) ?? ""; const bsCollapse = new BSCollapse(collapseEl, { toggle: false }); - expanded ? bsCollapse.show() : bsCollapse.hide(); + if (expanded) { + bsCollapse.show(); + } else { + bsCollapse.hide(); + } }); return ( diff --git a/frontend/src/components/DataLoader.tsx b/frontend/src/components/DataLoader.tsx deleted file mode 100644 index 93461da0b..000000000 --- a/frontend/src/components/DataLoader.tsx +++ /dev/null @@ -1,7 +0,0 @@ - -import { createContext } from "preact"; -import { useContext } from "preact/hooks"; -import { useSignal, useComputed } from "@preact/signals"; - -const InfoContext = createContext({}); - diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx index 05ac358b0..f02e13c23 100644 --- a/frontend/src/components/Form.tsx +++ b/frontend/src/components/Form.tsx @@ -94,6 +94,7 @@ export function FormCheckboxInput(props: FormCheckboxInputProps): JSX.Element { id={id} checked={props.checked} disabled={props.readOnly} + // eslint-disable-next-line @typescript-eslint/no-unused-vars onChange={(e) => props.setValue(!props.checked)} />