Update ESLint to latest version, fix eslint errors

Author: juffalow

eslint.config.mjs

@@ -0,0 +1,34 @@
+import eslint from '@eslint/js';
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+
+export default defineConfig(
+  eslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    }
+  },
+  {
+    ignores: [
+      'node_modules',
+      'build',
+      '.react-router',
+      'public/gtag.js',
+      '**/__generated__',
+    ],
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/consistent-indexed-object-style': 'warn',
+    },
+  }
+);

package.json

@@ -20,7 +20,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "relay": "relay-compiler $@",
-    "lint": "eslint . --ext .ts,.tsx"
+    "lint": "eslint ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,17 +39,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
+    "@eslint/js": "^9.39.2",
     "@types/node": "^24.10.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/react-relay": "^18.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.21.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
     "graphql": "^16.10.0",
     "relay-compiler": "^20.1.1",
     "relay-compiler-language-typescript": "^15.0.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.54.0"
   },
   "relay": {
     "src": "./src/",

src/components/Footer.tsx

@@ -8,7 +8,7 @@ const Footer = () => (
     <Container fluid={true}>
       <Row>
         <Col>
-          Created with <i className="fas fa-heart" style={{ color: 'red' }}></i> by <a href="https://juffalow.com" style={{ color: '#fff', textDecoration: 'none' }}>Matej <span style={{ color: 'red' }}>'juffalow'</span> Jellus</a> | 2019 - 2025
+          Created with <i className="fas fa-heart" style={{ color: 'red' }}></i> by <a href="https://juffalow.com" style={{ color: '#fff', textDecoration: 'none' }}>Matej <span style={{ color: 'red' }}>&apos;juffalow&apos;</span> Jellus</a> | 2019 - 2025
         </Col>
       </Row>
     </Container>

src/pages/authors/AuthorsTable.tsx

@@ -5,7 +5,7 @@ import AuthorRow from './AuthorRow';
 import { Author } from '../../types/Author';
 
 interface Props {
-  authors: Array<Author>;
+  authors: Author[];
 }
 
 const AuthorsTable = (props: Props) => {

src/pages/home/QuotesList.tsx

@@ -6,7 +6,7 @@ import QuoteCard from './QuoteCard';
 import { Quote } from '../../types/Quote';
 
 interface Props {
-  quotes: Array<Quote>;
+  quotes: Quote[];
 }
 
 const QuotesList = (props: Props) => {

src/pages/home/QuotesLoader.tsx

@@ -10,7 +10,7 @@ interface Props {
 const QuotesLoader = ({ count = 9 }: Props) => (
   <Row className="mt-4">
     {
-      Array.apply(null, Array(count)).map((_, index) => (
+      [...Array(count)].map((_, index) => (
         <Col key={index} md={4} style={{ marginBottom: 20 }}>
           <Card className="bar-loader" style={{ minHeight: 125 }} />
         </Col>

src/serviceWorker.ts

@@ -20,7 +20,7 @@ const isLocalhost = Boolean(
     )
 );
 
-type Config = {
+interface Config {
   onSuccess?: (registration: ServiceWorkerRegistration) => void;
   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 };

src/types/Author.d.ts

@@ -1,4 +1,4 @@
-export type Author = {
+export interface Author {
   id: number;
   _id: string;
   firstName: string;

src/types/Quote.d.ts

@@ -1,4 +1,4 @@
-export type Quote = {
+export interface Quote {
   id: number;
   _id: string;
   text: string;