fix all eslint warnings

terracotta/client/app/src/AppContext.tsx

@@ -56,6 +56,6 @@ interface AppContextValues {
 
 type Context = AppContextValues
 
-const AppContext = createContext<Context>(null as any)
+const AppContext = createContext<Context>({} as Context)
 
 export default AppContext

terracotta/client/app/src/colormap/RGBSelector.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext, useEffect } from 'react'
 import { Box } from '@mui/material'
-import AppContext, { ActiveRGBSelectorRange } from '../AppContext'
+import AppContext from '../AppContext'
 import RGBSlider from './RGBSlider'
 
 const RGBSelector: FC = () => {

terracotta/client/app/src/common/components/Legend.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { Box, TextField } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
 
 const styles = {
 	inputBox: {

terracotta/client/app/src/common/components/Slider.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import {
 	Slider as MSlider,
 	Box,
-	Grid,
 	Typography,
 	TextField,
 	Stack,
@@ -25,15 +24,7 @@ type SliderProps = {
 	 * Get the value once you release the slider thumb.
 	 */
 	getValueCommitted?: (val: number | number[]) => void
-	/**
-	 * *Requires `title` prop. Counted in `rem` units.
-	 */
-	sliderMarginLeft?: number | undefined
 	noNumbers?: boolean | undefined
-	/**
-	 * Append a unit at the end of the values. (%, /10, £, $)
-	 */
-	unit?: string | undefined
 	disabled?: boolean
 }
 
@@ -45,9 +36,7 @@ const Slider: React.FC<SliderProps> = ({
 	step = 0.01,
 	getValue,
 	getValueCommitted,
-	sliderMarginLeft = 1,
 	noNumbers = false,
-	unit = '',
 	disabled,
 }) => {
 	const [value, setValue] = useState(defaultValue)

terracotta/client/app/src/common/data/getData.ts

@@ -44,6 +44,7 @@ const getData = async (
 		const data = await fetch(url)
 		return await data.json()
 	} catch (err) {
+		// eslint-disable-next-line no-console
 		console.error(err)
 		return undefined
 	}

terracotta/client/app/src/map/Map.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable radar/cognitive-complexity */
 import React, { useEffect, useState, FC, useContext } from 'react'
 import { Map as ReactMapGL, Source, Layer } from 'react-map-gl'
-import { Map } from 'mapbox-gl'
 import ZoomControl from './MapZoomControl'
 import useIsMobileWidth from '../common/hooks/useIsMobileWidth'
 import AppContext from '../AppContext'
@@ -11,11 +10,10 @@ const accessToken =
 	'pk.eyJ1Ijoiam9zbGRoaSIsImEiOiJja2d0ZjdzbXAwMXdxMnNwN2Jkb2NvbXJ3In0.SayFfMYF2huWsZckbqNqEw'
 
 interface Props {
-	host?: string
 	width: number
 }
 
-const LocalMap: FC<Props> = ({ host, width }) => {
+const LocalMap: FC<Props> = ({ width }) => {
 	const isMobile = useIsMobileWidth()
 	const {
 		state: {
@@ -58,11 +56,11 @@ const LocalMap: FC<Props> = ({ host, width }) => {
 			padding: 40,
 			duration: 4000,
 		})
-	}, [activeDataset])
+	}, [activeDataset]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	useEffect(() => {
 		mapRef?.resize()
-	}, [width])
+	}, [width]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	useEffect(() => {
 		const handleResize = () => {
@@ -74,7 +72,7 @@ const LocalMap: FC<Props> = ({ host, width }) => {
 		return () => {
 			window.removeEventListener('resize', handleResize)
 		}
-	}, [])
+	}, []) // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<ReactMapGL
@@ -94,7 +92,7 @@ const LocalMap: FC<Props> = ({ host, width }) => {
 			}}
 			mapStyle={basemap}
 			mapboxAccessToken={accessToken}
-			ref={(ref) => ref && setMapRef(ref as any)}
+			ref={(ref) => ref && setMapRef(ref.getMap())}
 			style={{ width: window.innerWidth - width, height: '100%' }}
 		>
 			{!isMobile && <ZoomControl />}

terracotta/client/app/src/map/MapZoomControl.tsx

@@ -1,10 +1,9 @@
-import React, { FC, CSSProperties, useContext } from 'react'
+import React, { FC, useContext } from 'react'
 import AddIcon from '@mui/icons-material/Add'
 import RemoveIcon from '@mui/icons-material/Remove'
 import PublicIcon from '@mui/icons-material/Public'
 import StreetviewIcon from '@mui/icons-material/Streetview'
 import { IconButton, Grid, Tooltip } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
 import AppContext from '../AppContext'
 
 const styles = {

terracotta/client/app/src/sidebar-datasets/DatasetPreview.tsx

@@ -9,7 +9,6 @@ import {
 	Link,
 	Stack,
 } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
 import { KeyItem, ResponseMetadata200 } from '../common/data/getData'
 import CopyToClipboard from '../common/components/CopyToClipboard'
 

terracotta/client/app/src/sidebar-datasets/DatasetsForm.tsx

@@ -40,12 +40,12 @@ const DatasetsForm: FC<Props> = ({ keys, onSubmitFields }) => {
 		)
 
 		setFormValues(reduceKeys)
-	}, [])
+	}, []) // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<>
 			<Grid direction="row" spacing={1} width="100%" container>
-				{keys.map((keyItem: KeyItem, i: number) => (
+				{keys.map((keyItem: KeyItem) => (
 					<Grid key={keyItem.key} xs={6} item>
 						<TextField
 							id={keyItem.key.toLocaleLowerCase()}

terracotta/client/app/src/sidebar-datasets/SidebarDatasets.tsx

@@ -85,12 +85,7 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 	const [queryFields, setQueryFields] = useState<string | undefined>(undefined)
 	const [isLoading, setIsLoading] = useState<boolean>(true)
 
-	const getDatasets = async (
-		fetchedKeys: KeyItem[],
-		pageRef: number,
-		limitRef: number,
-		queryString = '',
-	) => {
+	const getDatasets = async (fetchedKeys: KeyItem[]) => {
 		const response = await getData(
 			`${host}/datasets?limit=${limit}&page=${page}${queryFields || ''}`,
 		)
@@ -113,7 +108,7 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 		const metadataResponsesPreFetch: unknown = datasetsResponse.datasets.map(
 			async (dataset: DatasetItem) => {
 				const buildMetadataUrl = fetchedKeys
-					?.map((key, index) => `/${dataset[key.original]}`)
+					?.map((key) => `/${dataset[key.original]}`)
 					.join('')
 
 				const preFetchData = await fetch(`${host}/metadata${buildMetadataUrl}`)
@@ -180,11 +175,11 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 				return
 			}
 
-			await getDatasets(keyResponse.keys, page, limit, queryFields)
+			await getDatasets(keyResponse.keys)
 		}
 
 		void fetcher().finally(() => setIsLoading(false))
-	}, [host, page, limit, queryFields])
+	}, [host, page, limit, queryFields]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	const onGetRGBBands = async (dataset: ResponseMetadata200) => {
 		const noBandKeysURL = `${host}/datasets?${keys
@@ -206,6 +201,7 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 					return prev
 				}
 
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				return Object.keys(prev).reduce((acc: any, colorString: string) => {
 					const { percentiles } = dataset
 					const validRange = [percentiles[4], percentiles[94]]
@@ -241,7 +237,7 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 				void onGetRGBBands(dataset)
 			}
 		}
-	}, [activeSinglebandRange, colormap, activeDataset, activeEndpoint])
+	}, [activeSinglebandRange, colormap, activeDataset, activeEndpoint]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	useEffect(() => {
 		if (
@@ -279,7 +275,7 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 				setSelectedDatasetRasterUrl(buildRasterUrl)
 			}
 		}
-	}, [activeRGB, activeEndpoint, activeDataset, datasets])
+	}, [activeRGB, activeEndpoint, activeDataset, datasets]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<SidebarItemWrapper isLoading={isLoading} title="Search for datasets">
@@ -316,7 +312,8 @@ const SidebarDatasetsItem: FC<Props> = ({ host }) => {
 						<TableBody>
 							{datasets &&
 								keys &&
-								datasets.map((dataset: ResponseMetadata200, i: number) => (
+								datasets.map((dataset: ResponseMetadata200, i) => (
+									// eslint-disable-next-line react/no-array-index-key
 									<Fragment key={`dataset-${i}`}>
 										<TableRow
 											checked={page * limit + i === activeDataset}

terracotta/client/app/src/sidebar-datasets/TablePagination.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent } from 'react'
+import React, { FC } from 'react'
 import {
 	Box,
 	FormControl,
@@ -8,7 +8,6 @@ import {
 	Typography,
 	SelectChangeEvent,
 } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
 
@@ -71,7 +70,7 @@ const TablePagination: FC<Props> = ({
 						value={value}
 						onChange={handleChange}
 					>
-						{options.map((option: number, i: number) => (
+						{options.map((option: number) => (
 							<MenuItem key={`limit-${option}`} value={option}>
 								{option}
 							</MenuItem>

terracotta/client/app/src/sidebar-datasets/TableRow.tsx

@@ -2,11 +2,9 @@ import React, { FC } from 'react'
 import {
 	TableRow as MuiTableRow,
 	TableCell,
-	Box,
 	IconButton,
 	Typography,
 } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import { DatasetItem, KeyItem } from '../common/data/getData'
@@ -71,6 +69,7 @@ const TableRow: FC<Props> = ({
 			)}
 		</TableCell>
 		{keys.map((key, i: number) => (
+			// eslint-disable-next-line react/no-array-index-key
 			<TableCell key={`${keyVal}-cell-${i}`} sx={styles.tableCell}>
 				<Typography variant="body2">{dataset[key.original]}</Typography>
 			</TableCell>

terracotta/client/app/src/sidebar/SidebarContent.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react'
 import { Paper, Box } from '@mui/material'
 import VerticalHandle from './VerticalHandle/VerticalHandle'
 

terracotta/client/app/src/sidebar/SidebarControl.tsx

@@ -6,7 +6,6 @@ import {
 	ExpandLess,
 	ExpandMore,
 } from '@mui/icons-material'
-import { makeStyles } from '@mui/material/styles'
 import useIsMobileWidth from '../common/hooks/useIsMobileWidth'
 
 const iconStyles = {

terracotta/client/app/src/theme/ThemeProvider.tsx

@@ -20,8 +20,9 @@ const DHIThemeProvider: FC<ThemeProviderProps> = ({
 			getDhiSharedTheme(mode, {
 				...overrides,
 			}),
-		[overrides],
+		[mode, overrides],
 	)
+
 	return (
 		<>
 			<ThemeProvider theme={theme}>

terracotta/client/app/src/theme/getDhiSharedTheme.ts

@@ -11,10 +11,10 @@ const getDhiTheme = (
 	createTheme(
 		{
 			typography: dhiTypography,
-			palette: getDhiPalette(mode) as any as PaletteOptions,
+			palette: getDhiPalette(mode) as PaletteOptions,
 			components: getDhiOverrides(mode),
 		},
-		overrides as any,
+		overrides as object,
 	)
 
 export default getDhiTheme