Eslint 9 fixes

.gitignore

@@ -2,6 +2,7 @@
 !jest.config.js
 !jest.setup.js
 !.eslintrc.js
+!eslint.config.js
 node_modules
 dist
 out

newswires/client/eslint.config.js

@@ -0,0 +1,144 @@
+import guardian from '@guardian/eslint-config';
+
+export default [
+	{
+		ignores: [
+			'dist',
+			'jest.dist.*', // depends on build output, so don't lint it
+			'.wireit',
+			'storybook-static',
+		],
+	},
+	...guardian.configs.recommended,
+	...guardian.configs.jest,
+	...guardian.configs.react,
+	{
+		rules: {
+			'no-unused-vars': 'off',
+
+			'@typescript-eslint/no-unused-vars': [
+				'warn',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					caughtErrorsIgnorePattern: '^_',
+				},
+			],
+
+			// 'prettier/prettier': 'warn',
+
+			'react/no-unknown-property': [
+				'error',
+				{
+					ignore: ['css'],
+				},
+			],
+
+			'no-restricted-syntax': [
+				'error',
+				{
+					message:
+						"Don't use `fetch` directly, please use the `pandaFetch` abstraction, to get automatic session refreshes",
+					selector: "CallExpression[callee.name='fetch']",
+				},
+			],
+		},
+	},
+];
+
+// import { fixupConfigRules } from '@eslint/compat';
+// import typescriptEslint from '@typescript-eslint/eslint-plugin';
+// import prettier from 'eslint-plugin-prettier';
+// import globals from 'globals';
+// import tsParser from '@typescript-eslint/parser';
+// import path from 'node:path';
+// import { fileURLToPath } from 'node:url';
+// import js from '@eslint/js';
+// import { FlatCompat } from '@eslint/eslintrc';
+
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
+// const compat = new FlatCompat({
+// 	baseDirectory: __dirname,
+// 	recommendedConfig: js.configs.recommended,
+// 	allConfig: js.configs.all,
+// });
+
+// export default [
+// 	{
+// 		ignores: ['**/*.css', '**/*.svg'],
+// 	},
+// 	...fixupConfigRules(
+// 		compat.extends(
+// 			'@guardian/eslint-config-typescript',
+// 			'prettier',
+// 			'plugin:react/recommended',
+// 			'plugin:react/jsx-runtime',
+// 			'plugin:react-hooks/recommended',
+// 		),
+// 	),
+// 	{
+// 		plugins: {
+// 			'@typescript-eslint': typescriptEslint,
+// 			prettier,
+// 		},
+
+// 		languageOptions: {
+// 			globals: {
+// 				...globals.browser,
+// 				...globals.node,
+// 			},
+
+// 			parser: tsParser,
+// 		},
+
+// 		settings: {
+// 			react: {
+// 				version: 'detect',
+// 			},
+// 		},
+
+// 		rules: {
+// 			'no-unused-vars': 'off',
+
+// 			'@typescript-eslint/no-unused-vars': [
+// 				'warn',
+// 				{
+// 					argsIgnorePattern: '^_',
+// 					varsIgnorePattern: '^_',
+// 					caughtErrorsIgnorePattern: '^_',
+// 				},
+// 			],
+
+// 			'prettier/prettier': 'warn',
+
+// 			'react/no-unknown-property': [
+// 				'error',
+// 				{
+// 					ignore: ['css'],
+// 				},
+// 			],
+
+// 			'no-restricted-syntax': [
+// 				'error',
+// 				{
+// 					message:
+// 						"Don't use `fetch` directly, please use the `pandaFetch` abstraction, to get automatic session refreshes",
+// 					selector: "CallExpression[callee.name='fetch']",
+// 				},
+// 			],
+// 		},
+// 	},
+// 	{
+// 		files: ['**/*.ts', '**/*.tsx'],
+
+// 		languageOptions: {
+// 			ecmaVersion: 5,
+// 			sourceType: 'script',
+
+// 			parserOptions: {
+// 				project: ['./tsconfig.json', './tsconfig.*.json'],
+// 			},
+// 		},
+// 	},
+// ];

newswires/client/package.json

@@ -6,8 +6,8 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc -b && vite build",
-		"lint": "eslint 'src/**' --ext ts --no-error-on-unmatched-pattern --fix",
-		"lint:ci": "eslint src/** --ext ts --no-error-on-unmatched-pattern",
+		"lint": "eslint 'src/**' -c 'eslint.config.js' --no-error-on-unmatched-pattern --fix",
+		"lint:ci": "eslint src/** -c 'eslint.config.js' --no-error-on-unmatched-pattern",
 		"format": "prettier --write \"src/**/*.ts{,x}\"",
 		"format:ci": "prettier --check \"src/**/*.ts{,x}\"",
 		"preview": "vite preview",
@@ -39,7 +39,7 @@
 		"eslint-plugin-react": "^7.35.0",
 		"eslint-plugin-react-hooks": "^5.1.0",
 		"eslint-plugin-react-refresh": "^0.4.18",
-		"globals": "^15.9.0",
+		"globals": "15.14.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"prettier": "^3.4.2",

newswires/client/src/Item.tsx

@@ -71,7 +71,7 @@ export const Item = ({ id }: { id: string }) => {
 							: 'unknown error',
 				);
 			});
-	}, [id]);
+	}, [id, maybeSearchParams]);
 
 	return (
 		<EuiSplitPanel.Outer>

newswires/client/src/catcodes-lookup.ts

@@ -1,6 +1,6 @@
 import { lookupTables } from './category-code-lookup-tables';
 
-const qCodePrefixesLookup = {
+const _qCodePrefixesLookup = {
 	medtop: ['IPTC MediaTopics'],
 	subj: ['IPTC NewsCodes', 'IPTC MediaTopics'],
 	a1312cat: ['A1312 CatCodes'],

newswires/client/src/context/SearchContext.tsx

@@ -5,7 +5,6 @@ import {
 	useContext,
 	useEffect,
 	useReducer,
-	useRef,
 	useState,
 } from 'react';
 import { z } from 'zod';

newswires/client/src/panda-session.ts

@@ -1,16 +1,18 @@
-/* eslint-disable no-restricted-syntax -- this file provides the abstraction over `fetch`, so is allowed to call it directly */
-
 /**
  * A customised version of `fetch`, that will attempt to re-auth the user on login failure.
  */
 export const pandaFetch: typeof fetch = async (...args) => {
+	/* eslint-disable-next-line no-restricted-syntax -- this is the definition of 'pandaFetch' that we're asking people to use instead of fetch, but it needs to use fetch itself*/
 	const response = await fetch(...args);
-	if (response.status !== 419)
+	if (response.status !== 419) {
 		// succeeded; return the response
 		return response;
+	}
 
 	// refresh the auth session
+	/* eslint-disable-next-line no-restricted-syntax -- this is the definition of 'pandaFetch' that we're asking people to use instead of fetch, but it needs to use fetch itself*/
 	await fetch('/', { mode: 'no-cors', credentials: 'include' });
 	// reattempt the fetch, return the result no matter the expiry
+	/* eslint-disable-next-line no-restricted-syntax -- this is the definition of 'pandaFetch' that we're asking people to use instead of fetch, but it needs to use fetch itself*/
 	return fetch(...args);
 };