Moved to eslint v9, along with the most high impact changes

.vscode/settings.json

@@ -30,7 +30,8 @@
 
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "eslint.useFlatConfig": false,
+
+  "eslint.useFlatConfig": true,
 
   "git.enableCommitSigning": true
 }

eslint.config.mjs

@@ -0,0 +1,172 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import importPlugin from "eslint-plugin-import";
+import testingLibraryPlugin from "eslint-plugin-testing-library";
+import prettierConfig from "eslint-config-prettier";
+import globals from "globals";
+import { fixupPluginRules } from "@eslint/compat";
+import { reactRefresh } from "eslint-plugin-react-refresh";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default [
+  // 1. Global Ignores (Replaces ignorePatterns)
+  {
+    ignores: [
+      "**/dist/**",
+      "**/build/**",
+      "**/coverage/**",
+      "**/node_modules/**",
+      "**/.eslintrc.config.cjs",
+      "**/vite.config.ts",
+      "**/generated/**",
+      "**/graphql.ts",
+      "back/scripts/**",
+      "front/public/**",
+      "shared-front/public/**",
+      "eslint.config.mjs",
+    ],
+  },
+
+  // 2. Base Configuration for JS/TS/React
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        ...globals.browser,
+        ...globals.es2020,
+      },
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ["./*/tsconfig.json", "./tsconfig.json"],
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      react: reactPlugin,
+      "react-hooks": fixupPluginRules(hooksPlugin),
+      "jsx-a11y": jsxA11yPlugin,
+      import: fixupPluginRules(importPlugin),
+    },
+    settings: {
+      react: { version: "detect" },
+      "import/resolver": {
+        typescript: {
+          alwaysTryTypes: true,
+          project: ["./*/tsconfig.json", "./tsconfig.json"],
+        },
+        node: {
+          extensions: [".ts", ".tsx"],
+          moduleDirectory: ["node_modules", "src"],
+        },
+      },
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tsPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...hooksPlugin.configs.recommended.rules,
+      ...jsxA11yPlugin.configs.recommended.rules,
+
+      // Custom Rules
+      "@typescript-eslint/naming-convention": [
+        "error",
+        {
+          selector: "interface",
+          format: ["PascalCase"],
+        },
+      ],
+      "react/react-in-jsx-scope": "off",
+      "no-undef": "off",
+      "react/jsx-props-no-spreading": "off",
+      "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+      "import/no-extraneous-dependencies": ["error"],
+      "import/no-unresolved": ["error", { caseSensitive: true }],
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          js: "never",
+          jsx: "never",
+          ts: "never",
+          tsx: "never",
+        },
+      ],
+      //TODO This is done so that 'any' types can be change slowly, and not all at once
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-wrapper-object-types": "error",
+    },
+  },
+
+  // 3. Testing Overrides
+  {
+    files: [
+      "**/?(__)tests?(__)/**/*.[jt]s?(x)",
+      "**/?(*.)+(spec|test).[jt]s?(x)",
+      "**/mocks/**/*.[jt]s?(x)",
+    ],
+    plugins: {
+      "testing-library": testingLibraryPlugin,
+    },
+    rules: {
+      ...testingLibraryPlugin.configs.react.rules,
+    },
+  },
+
+  //sub-stuff
+  {
+    files: ["front/**/*.{ts,tsx,js,jsx}"],
+    rules: {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          // look for package.json files also in the parent directory
+          packageDir: [path.resolve(__dirname, "front"), __dirname],
+        },
+      ],
+    },
+  },
+
+  {
+    files: ["shared-components/**/*.{ts,tsx,js,jsx}"],
+    rules: {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          // look for package.json files also in the parent directory
+          packageDir: [path.resolve(__dirname, "shared-components"), __dirname],
+        },
+      ],
+    },
+  },
+
+  {
+    files: ["shared-front/**/*.{ts,tsx,js,jsx}"],
+    plugins: {
+      "react-refresh": reactRefresh.plugin,
+    },
+    rules: {
+      // This needed to resolve dependencies correctly
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          // look for package.json files also in the parent directory
+          packageDir: [path.resolve(__dirname, "shared-front"), __dirname],
+        },
+      ],
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+  },
+
+  // 4. Prettier (Must be last to override formatting)
+  prettierConfig,
+];

front/README.md

@@ -208,7 +208,7 @@ The folder structure is as follows:
 ├── tsconfig.json
 ├── .prettierignore
 ├── .dockerignore
-├── .eslintignore
+├── eslint.config.js
 ├── .eslintrc
 ├── .prettierrc
 └── .gitignore

front/package.json

@@ -32,7 +32,7 @@
     "upload:test-report": "./node_modules/.bin/codecov",
     "tsc:check": "tsc --noEmit",
     "tsc:precommit": "tsc-files --noEmit",
-    "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --ignore-path ../.eslintignore",
+    "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:all": "pnpm lint .",
     "lint:fix": "pnpm lint --fix",
     "lint:fix:all": "pnpm lint:fix .",

front/src/App.tsx

@@ -1,5 +1,5 @@
 import "regenerator-runtime/runtime";
-import { ReactElement, Suspense, useEffect, useRef, useState } from "react";
+import { ReactElement, Suspense, useEffect, useMemo, useRef } from "react";
 import { Navigate, Outlet, Route, Routes, useLocation } from "react-router-dom";
 import { useLoadAndSetGlobalPreferences } from "hooks/useLoadAndSetGlobalPreferences";
 import Layout from "components/Layout";
@@ -99,27 +99,29 @@ function DropappRedirect({ path }: DropappRedirectProps) {
 function App() {
   const { error, isInitialized } = useLoadAndSetGlobalPreferences();
   const location = useLocation();
-  const [prevLocation, setPrevLocation] = useState<string | undefined>(undefined);
   // For BoxesView to reduce number of expensive Boxes queries
   // when navigating between boxes and other views.
   const hasExecutedInitialFetchOfBoxes = useRef(false);
 
   // store previous location to return to if you are not authorized
-  useEffect(() => {
-    const regex = /^\/bases\/\d+\//;
-    // only store previous location if a base is selected
-    if (regex.test(location.pathname)) setPrevLocation(location.pathname);
-  }, [location]);
-
-  if (error) {
-    return <ErrorView error={error} />;
-  }
+  // only store previous location if a base is selected
+  const prevLocation = useMemo(() => {
+    if (/^\/bases\/\d+\//.test(location.pathname)) {
+      return location.pathname;
+    } else {
+      return;
+    }
+  }, [location.pathname]);
 
   // selectedBaseId not set yet
   if (!isInitialized) {
     return;
   }
 
+  if (error && isInitialized) {
+    return <ErrorView error={error} />;
+  }
+
   return (
     <Routes>
       <Route path="bases">