update eslint -> v10 with new config.mjs

eslint.config.mjs

@@ -0,0 +1,49 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import tsParser from "@typescript-eslint/parser";
+import nextConfig from "eslint-config-next/core-web-vitals";
+
+export default defineConfig([
+    globalIgnores(["**/pkg/", "**/coverage/", "**/next.config.js"]),
+    ...nextConfig,
+    // Override the Next.js Babel parser with @typescript-eslint/parser, which
+    // implements the scopeManager.addGlobals API required by ESLint 10.
+    {
+        files: ["**/*.{js,jsx,mjs,ts,tsx,mts,cts}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaFeatures: { jsx: true },
+            },
+        },
+    },
+    {
+        files: ["**/*.ts", "**/*.tsx"],
+        rules: {
+            "@typescript-eslint/explicit-function-return-type": "warn",
+            "@typescript-eslint/no-unused-vars": ["error", {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+            }],
+        },
+    },
+    {
+        files: ["**/*.{js,jsx,mjs,ts,tsx,mts,cts}"],
+        rules: {
+            "no-console": "warn",
+            "no-debugger": "warn",
+            "jsx-a11y/no-autofocus": "warn",
+            "react/jsx-no-target-blank": "warn",
+        },
+    },
+    {
+        files: ["**/*.test.ts", "**/*.test.tsx"],
+        rules: {
+            "no-unused-vars": ["error", {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+            }],
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@next/next/no-img-element": "off",
+        },
+    },
+]);

package.json

@@ -19,7 +19,8 @@
         "test": "vitest",
         "test:ui": "vitest --ui",
         "test:run": "vitest run",
-        "prepare": "husky"
+        "prepare": "husky",
+        "postinstall": "node tools/patch-eslint-react.js"
     },
     "dependencies": {
         "@emotion/cache": "^11.14.0",
@@ -44,19 +45,22 @@
         "wasm": "file:pkg"
     },
     "devDependencies": {
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "^10.0.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3": "^7.4.3",
         "@types/node": "^25.5.2",
         "@types/react": "^18.2.58",
         "@types/react-dom": "^18.2.19",
+        "@typescript-eslint/parser": "^8.61.0",
         "@vitejs/plugin-react": "^5.1.2",
         "@vitest/browser": "^4.1.8",
         "@vitest/coverage-v8": "^4.0.17",
         "@vitest/ui": "^4.0.17",
         "autoprefixer": "^10.4.27",
-        "eslint": "^10.3.0",
+        "eslint": "^10.5.0",
         "eslint-config-next": "^16.2.6",
         "husky": "^9.1.7",
         "jsdom": "^29.0.2",

src/components/appBar.tsx

@@ -74,13 +74,11 @@ const MIN_MENU_WIDTH = 600;
 
 export default function ButtonAppBar(props: ButtonAppProps): JSX.Element {
 
-    const [theme, setTheme] = useState(lightTheme);
+    const [theme] = useState(() => getPreferredTheme());
     const [mounted, setMounted] = useState(false);
 
-    useEffect(() => {
-        setMounted(true);
-        setTheme(getPreferredTheme());
-    }, []);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { setMounted(true); }, []);
 
     const buttonInputs = props.text.map((i) => ({
         key: capitaliseFirst(i),

src/components/compare/control.tsx

@@ -1,5 +1,5 @@
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Image from "next/image"
 import localFont from 'next/font/local'
 
@@ -57,20 +57,9 @@ export default function Control(props: CompareControlProps): JSX.Element {
     const handleControlsVisibility = (pHideControls: boolean): void => {
         setHideControls(pHideControls);
     }
-    const [controlStyle, setControStyle] = useState(styles.light);
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            setControStyle(dark ? styles.dark : styles.light);
-        }
-    }, []);
-    const [uaLogo, setUaLogo] = useState('/ua.svg');
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            setUaLogo(dark ? '/ua-dark.svg' : 'ua.svg');
-        }
-    }, []);
+    const isDark = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const [controlStyle] = useState(isDark ? styles.dark : styles.light);
+    const [uaLogo] = useState(isDark ? '/ua-dark.svg' : 'ua.svg');
 
     const IdxWashington = getIdxWashington(props.citiesArray);
 

src/components/compare/layerlist.tsx

@@ -1,5 +1,5 @@
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -52,20 +52,10 @@ export default function LayerList(props: LayerListProps): JSX.Element {
         return op;
     }, [reducedOptions, props.layer]);
 
-    const [selectedOption, setSelectedOption] = useState(findMatchingOption());
-
-    useEffect(() => {
-        const this_option = findMatchingOption();
-        if (this_option) {
-            setSelectedOption(this_option);
-        } else {
-            setSelectedOption("transport");
-        }
-    }, [props.layer, findMatchingOption, reducedOptions]);
+    const selectedOption = findMatchingOption();
 
     const handleChange = (event: SelectChangeEvent): void => {
         props.handleLayerChange(event.target.value as DataRangeKeys);
-        setSelectedOption(event.target.value as DataRangeKeys);
     };
 
     const width = useWindowSize().width;

src/components/compare/meanVar.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent } from 'react';
 
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
@@ -13,15 +13,8 @@ interface meanVarProps {
 
 export default function MeanVarButtons(props: meanVarProps): JSX.Element {
 
-    const [mean, setMean] = useState(true);
-    useEffect(() => {
-        const meanState = props.meanVals || !props.singleLayer;
-        setMean(meanState);
-    }, [props.meanVals, props.singleLayer]);
-
     const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-        setMean((event.target as HTMLInputElement).value === "average");
-        props.handleMeanChange(mean);
+        props.handleMeanChange((event.target as HTMLInputElement).value === "average");
     }
 
     return (

src/components/compare/sortOrderList.tsx

@@ -1,5 +1,5 @@
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -33,22 +33,12 @@ export default function SortOrderList(props: SortOrderListProps): JSX.Element {
         return op;
     }, [options, props.sortOpt]);
 
-    const [selectedOption, setSelectedOption] = useState(findMatchingOption());
+    const selectedOption = findMatchingOption();
 
     const handleChange = (event: SelectChangeEvent): void => {
-        setSelectedOption(event.target.value as string);
         props.handleSortChange(event.target.value as string);
     };
 
-    useEffect(() => {
-        const this_option = findMatchingOption();
-        if (this_option) {
-            setSelectedOption(this_option);
-        } else {
-            setSelectedOption(options[0].value);
-        }
-    }, [props.sortOpt, findMatchingOption, options]);
-
     const width = useWindowSize().width;
     const sizeString = width == null ? "medium" : (width < 700 ? "small" : "medium");
 

src/components/map/cityList.tsx

@@ -1,5 +1,5 @@
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -35,22 +35,11 @@ export default function CityList(props: CityListProps): JSX.Element {
         }
         return op;
     }, [options, props.idx]);
-    const [selectedOption, setSelectedOption] = useState(findMatchingOption());
-
-    // This is necessary to ensure localStorage values are correctly set on initial load:
-    useEffect(() => {
-        const this_option = findMatchingOption();
-        if (this_option) {
-            setSelectedOption(this_option);
-        } else {
-            setSelectedOption(options[0].value);
-        }
-    }, [findMatchingOption, options]);
+    const selectedOption = findMatchingOption();
 
     const handleChange = (event: SelectChangeEvent): void => {
         const val = event.target.value as string;
         if (val) {
-            setSelectedOption(val);
             const opInt = parseInt(val);
             props.handleIdxChange(opInt);
             props.handleViewStateChange({...props.citiesArray[opInt].initialViewState,

src/components/map/control.tsx

@@ -58,18 +58,14 @@ export default function Control (props: MapControlProps): JSX.Element {
     const handleControlsVisibility = (pHideControls: boolean): void => {
         setHideControls(pHideControls);
     }
-    const [uaLogo, setUaLogo] = useState('/ua.svg');
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            setUaLogo(dark ? '/ua-dark.svg' : 'ua.svg');
-        }
-    }, []);
+    const [uaLogo] = useState(
+        typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? '/ua-dark.svg' : 'ua.svg'
+    );
 
     const [sliderValues, setSliderValues] = useState<number[]>(props.layerRange);
-    useEffect(() => {
-        setSliderValues(props.layerRange);
-    }, [props.layerRange]);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { setSliderValues(props.layerRange); }, [props.layerRange]);
 
     var step = Math.floor(props.layerStartStop[1] - props.layerStartStop[0]) / 20;
     var multiplier = 10;

src/components/map/layerList.tsx

@@ -1,5 +1,5 @@
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -55,19 +55,10 @@ export default function LayerList(props: LayerListProps): JSX.Element {
         return op;
     }, [options, props.layer]);
 
-    const [selectedOption, setSelectedOption] = useState(findMatchingOption());
-    useEffect(() => {
-        const this_option = findMatchingOption();
-        if (this_option) {
-            setSelectedOption(this_option);
-        } else {
-            setSelectedOption(options[0].value);
-        }
-    }, [props.layer, findMatchingOption, options]);
+    const selectedOption = findMatchingOption();
 
     const handleChange = (event: SelectChangeEvent): void => {
         props.handleLayerChange(event.target.value as DataRangeKeys);
-        setSelectedOption(event.target.value as DataRangeKeys);
     };
 
     const width = useWindowSize().width;

src/components/map/layerList2.tsx

@@ -1,5 +1,5 @@
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
@@ -57,19 +57,10 @@ export default function LayerList2(props: LayerListProps): JSX.Element {
         return op;
     }, [options, props.layer2]);
 
-    const [selectedOption, setSelectedOption] = useState(findMatchingOption());
-    useEffect(() => {
-        const this_option = findMatchingOption();
-        if (this_option) {
-            setSelectedOption(this_option);
-        } else {
-            setSelectedOption(options[0].value);
-        }
-    }, [props.layer2, findMatchingOption, options]);
+    const selectedOption = findMatchingOption();
 
     const handleChange = (event: SelectChangeEvent): void => {
         props.handleLayerChange(event.target.value as DataRangeKeys);
-        setSelectedOption(event.target.value as DataRangeKeys);
     };
 
     const width = useWindowSize().width;

src/components/map/map.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, Suspense } from "react";
+import { Suspense } from "react";
 import { DeckGL } from "@deck.gl/react/typed";
 import { Map } from "react-map-gl";
 
@@ -21,11 +21,7 @@ const MAP_STYLE = "mapbox://styles/mapbox/light-v10"
  */
 export default function UTAMap(props: MapProps): JSX.Element {
 
-    const this_layer = mapLayer(props);
-    const [layer, setLayer] = useState(this_layer);
-    useEffect(() => {
-        setLayer(mapLayer(props));
-    }, [props]);
+    const layer = mapLayer(props);
 
 
     return (

src/components/map/mapPage.tsx

@@ -190,6 +190,7 @@ export default function MapPage(): JSX.Element {
     const [layerStartStop, setLayerStartStop] = useState<[number, number]>(LAYER_CONSTANTS.DEFAULT_LAYER_START_STOP);
     const [layerRange, setLayerRange] = useState<[number, number]>(LAYER_CONSTANTS.DEFAULT_LAYER_RANGE);
 
+    /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
         const initialState = loadInitialState();
         const {
@@ -233,7 +234,9 @@ export default function MapPage(): JSX.Element {
         setLayerRange([rangeData.layer_min, rangeData.layer_max]);
         setLayerStartStop([rangeData.layer_start, rangeData.layer_stop]);
     }, [])
+    /* eslint-enable react-hooks/set-state-in-effect */
 
+    /* eslint-disable react-hooks/set-state-in-effect */
     useEffect(() => {
         if (cityLayers.length > 0) {
             const rangeData = calculateLayerRanges(
@@ -248,6 +251,7 @@ export default function MapPage(): JSX.Element {
             setLayerStartStop([rangeData.layer_start, rangeData.layer_stop]);
         }
     }, [idx, layer, layer2, numLayers, cityLayers.length])
+    /* eslint-enable react-hooks/set-state-in-effect */
 
     const createViewStateForCity = useCallback((cityIdx: number) => ({
         ...CITY_DATA.citiesArray[cityIdx].initialViewState,