Addressed all warnings emitted by ESLint

CHANGES.md

@@ -3,19 +3,16 @@
 * Numerous changes regard development environment renewal and 
   code quality improvements:
 
-  - Changed the development environment for the `xcube-viewer` project
-    from [create-react-app](https://create-react-app.dev/) and `yarn`
-    to [vite](https://vitejs.dev/) and `npm`. (#296)
+  - Changed the development environment from [create-react-app](https://create-react-app.dev/) 
+    and `yarn` to [vite](https://vitejs.dev/) and `npm`. (#296)
   - Reformatted code base with [prettier](https://prettier.io/) 
     using its default settings.
-  - Project CI now also runs [ESlint](https://eslint.org/)
+  - Project CI now also runs [ESlint](https://eslint.org/).
   - Updated copyright headers of source files.
 
 
 TODO:
 
-* After linting is green, set `--max-warnings 0` in
-  `"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 100"`
 * Allow running `run: npm run coverage` in `.github/workflows/ci.yaml`:   
 * Remove `"@typescript-eslint/no-explicit-any": "off"` in `.eslintrc.cjs`
   and change code base accordingly

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 100",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage"

src/components/ControlBarActions.tsx

@@ -67,7 +67,7 @@ interface ControlBarActionsProps extends WithStyles<typeof styles>, WithLocale {
   compact: boolean;
 }
 
-const ControlBarActions: React.FC<ControlBarActionsProps> = ({
+const _ControlBarActions: React.FC<ControlBarActionsProps> = ({
   classes,
   visible,
   flyToSelectedObject,
@@ -171,4 +171,5 @@ const ControlBarActions: React.FC<ControlBarActionsProps> = ({
   );
 };
 
-export default withStyles(styles)(ControlBarActions);
+const ControlBarActions = withStyles(styles)(_ControlBarActions);
+export default ControlBarActions;

src/components/ControlBarItem.tsx

@@ -45,7 +45,7 @@ interface ControlBarItemProps extends WithStyles<typeof styles>, WithLocale {
   actions?: React.ReactNode | null;
 }
 
-const ControlBarItem: React.FC<ControlBarItemProps> = ({
+const _ControlBarItem: React.FC<ControlBarItemProps> = ({
   classes,
   label,
   control,
@@ -62,4 +62,5 @@ const ControlBarItem: React.FC<ControlBarItemProps> = ({
   );
 };
 
-export default withStyles(styles)(ControlBarItem);
+const ControlBarItem = withStyles(styles)(_ControlBarItem);
+export default ControlBarItem;

src/components/DatasetSelect.tsx

@@ -57,7 +57,7 @@ interface DatasetSelectProps extends WithStyles<typeof styles>, WithLocale {
   ) => void;
 }
 
-const DatasetSelect: React.FC<DatasetSelectProps> = ({
+const _DatasetSelect: React.FC<DatasetSelectProps> = ({
   classes,
   selectedDatasetId,
   datasets,
@@ -102,4 +102,5 @@ const DatasetSelect: React.FC<DatasetSelectProps> = ({
   return <ControlBarItem label={datasetSelectLabel} control={datasetSelect} />;
 };
 
-export default withStyles(styles)(DatasetSelect);
+const DatasetSelect = withStyles(styles)(_DatasetSelect);
+export default DatasetSelect;

src/components/LoadingDialog.tsx

@@ -56,7 +56,10 @@ interface LoadingDialogProps extends WithStyles<typeof styles>, WithLocale {
   messages: string[];
 }
 
-const LoadingDialog: React.FC<LoadingDialogProps> = ({ classes, messages }) => {
+const _LoadingDialog: React.FC<LoadingDialogProps> = ({
+  classes,
+  messages,
+}) => {
   if (messages.length === 0) {
     return null;
   }
@@ -76,4 +79,5 @@ const LoadingDialog: React.FC<LoadingDialogProps> = ({ classes, messages }) => {
   );
 };
 
-export default withStyles(styles)(LoadingDialog);
+const LoadingDialog = withStyles(styles)(_LoadingDialog);
+export default LoadingDialog;

src/components/MessageLog.tsx

@@ -94,7 +94,7 @@ const SNACKBAR_ANCHOR_ORIGIN: SnackbarOrigin = {
   horizontal: "center",
 };
 
-const MessageLog: React.FC<MessageLogProps> = ({
+const _MessageLog: React.FC<MessageLogProps> = ({
   classes,
   className,
   message,
@@ -146,4 +146,5 @@ const MessageLog: React.FC<MessageLogProps> = ({
   );
 };
 
-export default withStyles(styles)(MessageLog);
+const MessageLog = withStyles(styles)(_MessageLog);
+export default MessageLog;

src/components/PlaceGroupsSelect.tsx

@@ -61,7 +61,7 @@ interface PlaceGroupSelectProps extends WithStyles<typeof styles>, WithLocale {
   language?: string;
 }
 
-const PlaceGroupsSelect: React.FC<PlaceGroupSelectProps> = ({
+const _PlaceGroupsSelect: React.FC<PlaceGroupSelectProps> = ({
   classes,
   placeGroups,
   selectPlaceGroups,
@@ -172,4 +172,5 @@ const PlaceGroupsSelect: React.FC<PlaceGroupSelectProps> = ({
   );
 };
 
-export default withStyles(styles)(PlaceGroupsSelect);
+const PlaceGroupsSelect = withStyles(styles)(_PlaceGroupsSelect);
+export default PlaceGroupsSelect;

src/components/PlaceSelect.tsx

@@ -72,7 +72,7 @@ interface PlaceSelectProps extends WithStyles<typeof styles>, WithLocale {
   openDialog: (dialogId: string) => void;
 }
 
-const PlaceSelect: React.FC<PlaceSelectProps> = ({
+const _PlaceSelect: React.FC<PlaceSelectProps> = ({
   classes,
   selectPlace,
   placeLabels,
@@ -171,4 +171,5 @@ const PlaceSelect: React.FC<PlaceSelectProps> = ({
   );
 };
 
-export default withStyles(styles)(PlaceSelect);
+const PlaceSelect = withStyles(styles)(_PlaceSelect);
+export default PlaceSelect;

src/components/RgbSwitch.tsx

@@ -44,7 +44,7 @@ interface RgbSwitchProps extends WithStyles<typeof styles>, WithLocale {
   setRgbLayerVisibility: (showRgbLayer: boolean) => void;
 }
 
-const RgbSwitch: React.FC<RgbSwitchProps> = ({
+const _RgbSwitch: React.FC<RgbSwitchProps> = ({
   showRgbLayer,
   rgbSchema,
   setRgbLayerVisibility,
@@ -70,4 +70,5 @@ const RgbSwitch: React.FC<RgbSwitchProps> = ({
   );
 };
 
-export default withStyles(styles)(RgbSwitch);
+const RgbSwitch = withStyles(styles)(_RgbSwitch);
+export default RgbSwitch;

src/components/ServerDialog.tsx

@@ -83,7 +83,7 @@ interface ServerDialogProps extends WithStyles<typeof styles>, WithLocale {
   closeDialog: (dialogId: string) => void;
 }
 
-const ServerDialog: React.FC<ServerDialogProps> = ({
+const _ServerDialog: React.FC<ServerDialogProps> = ({
   classes,
   open,
   servers,
@@ -334,4 +334,5 @@ const ServerDialog: React.FC<ServerDialogProps> = ({
   );
 };
 
-export default withStyles(styles)(ServerDialog);
+const ServerDialog = withStyles(styles)(_ServerDialog);
+export default ServerDialog;

src/components/SplitPane.tsx

@@ -77,7 +77,7 @@ export interface ISplitPaneState {
  * - dir: the split direction, either "hor" or "ver"
  * - initialSize: the initial width ("hor") or height ("ver") of the first child's container
  */
-class SplitPane extends React.PureComponent<ISplitPaneProps, ISplitPaneState> {
+class _SplitPane extends React.PureComponent<ISplitPaneProps, ISplitPaneState> {
   constructor(props: ISplitPaneProps) {
     super(props);
     this.handleSplitDelta = this.handleSplitDelta.bind(this);
@@ -149,4 +149,5 @@ class SplitPane extends React.PureComponent<ISplitPaneProps, ISplitPaneState> {
   }
 }
 
-export default withStyles(styles)(SplitPane);
+const SplitPane = withStyles(styles)(_SplitPane);
+export default SplitPane;

src/components/Splitter.tsx

@@ -82,7 +82,7 @@ type EventListenerItem = [string, (e: any) => any];
  * either in x-direction if direction is "hor" or y-direction if direction is "ver". The callback must then
  * adjust either a container's width if direction is "hor" or its height if direction is "ver".
  */
-class Splitter extends React.PureComponent<ISplitterProps, any> {
+class _Splitter extends React.PureComponent<ISplitterProps, any> {
   private lastPosition: null | number = null;
   private bodyEventListeners: Array<EventListenerItem>;
 
@@ -184,4 +184,5 @@ class Splitter extends React.PureComponent<ISplitterProps, any> {
   }
 }
 
-export default withStyles(styles)(Splitter);
+const Splitter = withStyles(styles)(_Splitter);
+export default Splitter;

src/components/TimePlayer.tsx

@@ -66,7 +66,7 @@ interface TimePlayerProps extends WithStyles<typeof styles>, WithLocale {
   ) => void;
 }
 
-const TimePlayer: React.FC<TimePlayerProps> = ({
+const _TimePlayer: React.FC<TimePlayerProps> = ({
   classes,
   timeAnimationActive,
   timeAnimationInterval,
@@ -203,4 +203,5 @@ const TimePlayer: React.FC<TimePlayerProps> = ({
   );
 };
 
-export default withStyles(styles)(TimePlayer);
+const TimePlayer = withStyles(styles)(_TimePlayer);
+export default TimePlayer;

src/components/TimeRangeSlider.tsx

@@ -61,7 +61,7 @@ interface TimeRangeSliderProps extends WithStyles<typeof styles> {
   updateVisibleTimeRange?: (timeRange: TimeRange | null) => void;
 }
 
-const TimeRangeSlider: React.FC<TimeRangeSliderProps> = ({
+const _TimeRangeSlider: React.FC<TimeRangeSliderProps> = ({
   classes,
   dataTimeRange,
   selectedTimeRange,
@@ -127,4 +127,5 @@ const TimeRangeSlider: React.FC<TimeRangeSliderProps> = ({
   );
 };
 
-export default withStyles(styles)(TimeRangeSlider);
+const TimeRangeSlider = withStyles(styles)(_TimeRangeSlider);
+export default TimeRangeSlider;

src/components/TimeSelect.tsx

@@ -54,7 +54,7 @@ interface TimeSelectProps extends WithStyles<typeof styles>, WithLocale {
   selectedTimeRange: TimeRange | null;
 }
 
-const TimeSelect: React.FC<TimeSelectProps> = ({
+const _TimeSelect: React.FC<TimeSelectProps> = ({
   classes,
   hasTimeDimension,
   selectedTime,
@@ -111,4 +111,5 @@ const TimeSelect: React.FC<TimeSelectProps> = ({
   return <ControlBarItem label={timeInputLabel} control={timeInput} />;
 };
 
-export default withStyles(styles)(TimeSelect);
+const TimeSelect = withStyles(styles)(_TimeSelect);
+export default TimeSelect;

src/components/TimeSeriesChart.tsx

@@ -180,7 +180,7 @@ interface TimeRangeSelection {
   secondTime?: number;
 }
 
-const TimeSeriesChart: React.FC<TimeSeriesChartProps> = ({
+const _TimeSeriesChart: React.FC<TimeSeriesChartProps> = ({
   classes,
   timeSeriesGroup,
   selectTimeSeries,
@@ -591,7 +591,10 @@ const TimeSeriesChart: React.FC<TimeSeriesChartProps> = ({
   );
 };
 
-export default withStyles(styles, { withTheme: true })(TimeSeriesChart);
+const TimeSeriesChart = withStyles(styles, { withTheme: true })(
+  _TimeSeriesChart,
+);
+export default TimeSeriesChart;
 
 interface _CustomTooltipProps
   extends TooltipProps<number, string>,

src/components/TimeSeriesCharts.tsx

@@ -88,7 +88,7 @@ interface TimeSeriesChartsProps extends WithStyles<typeof styles>, WithLocale {
   ) => void;
 }
 
-const TimeSeriesCharts: React.FC<TimeSeriesChartsProps> = ({
+const _TimeSeriesCharts: React.FC<TimeSeriesChartsProps> = ({
   classes,
   locale,
   timeSeriesGroups,
@@ -152,4 +152,7 @@ const TimeSeriesCharts: React.FC<TimeSeriesChartsProps> = ({
   );
 };
 
-export default withStyles(styles, { withTheme: true })(TimeSeriesCharts);
+const TimeSeriesCharts = withStyles(styles, { withTheme: true })(
+  _TimeSeriesCharts,
+);
+export default TimeSeriesCharts;

src/components/TimeSeriesModeSelect.tsx

@@ -44,7 +44,7 @@ interface TimeSeriesModeSelectProps
   selectTimeSeriesUpdateMode: (timeSeriesUpdateMode: "add" | "replace") => void;
 }
 
-const TimeSeriesModeSelect: React.FC<TimeSeriesModeSelectProps> = ({
+const _TimeSeriesModeSelect: React.FC<TimeSeriesModeSelectProps> = ({
   timeSeriesUpdateMode,
   selectTimeSeriesUpdateMode,
 }) => {
@@ -68,4 +68,5 @@ const TimeSeriesModeSelect: React.FC<TimeSeriesModeSelectProps> = ({
   );
 };
 
-export default withStyles(styles)(TimeSeriesModeSelect);
+const TimeSeriesModeSelect = withStyles(styles)(_TimeSeriesModeSelect);
+export default TimeSeriesModeSelect;

src/components/TimeSlider.tsx

@@ -65,7 +65,7 @@ interface TimeSliderProps extends WithStyles<typeof styles> {
   selectTimeRange?: (timeRange: TimeRange | null) => void;
 }
 
-const TimeSlider: React.FC<TimeSliderProps> = ({
+const _TimeSlider: React.FC<TimeSliderProps> = ({
   classes,
   hasTimeDimension,
   selectedTime,
@@ -139,4 +139,5 @@ const TimeSlider: React.FC<TimeSliderProps> = ({
   );
 };
 
-export default withStyles(styles)(TimeSlider);
+const TimeSlider = withStyles(styles)(_TimeSlider);
+export default TimeSlider;

src/components/UserControl.tsx

@@ -249,11 +249,12 @@ const UserControlContent: React.FC<UserControlProps> = ({
   }
 };
 
-const UserControl: React.FC<UserControlProps> = (props) => {
+const _UserControl: React.FC<UserControlProps> = (props) => {
   if (!Config.instance.authClient) {
     return null;
   }
   return <UserControlContent {...props} />;
 };
 
-export default withStyles(styles)(UserControl);
+const UserControl = withStyles(styles)(_UserControl);
+export default UserControl;

src/components/VariableSelect.tsx

@@ -61,15 +61,15 @@ interface VariableSelectProps extends WithStyles<typeof styles>, WithLocale {
   addTimeSeries: () => void;
 }
 
-const VariableSelect: React.FC<VariableSelectProps> = ({
+const _VariableSelect: React.FC<VariableSelectProps> = ({
   classes,
   canAddTimeSeries,
   selectedVariableName,
   variables,
   selectVariable,
   addTimeSeries,
 }) => {
-  const handleVariableChange = (event: SelectChangeEvent<string>) => {
+  const handleVariableChange = (event: SelectChangeEvent) => {
     selectVariable(event.target.value || null);
   };
 
@@ -129,4 +129,5 @@ const VariableSelect: React.FC<VariableSelectProps> = ({
   );
 };
 
-export default withStyles(styles)(VariableSelect);
+const VariableSelect = withStyles(styles)(_VariableSelect);
+export default VariableSelect;

src/components/Viewer.tsx

@@ -129,7 +129,7 @@ interface ViewerProps extends WithStyles<typeof styles> {
   importUserPlacesFromText?: (text: string) => any;
 }
 
-const Viewer: React.FC<ViewerProps> = ({
+const _Viewer: React.FC<ViewerProps> = ({
   theme,
   mapId,
   mapInteraction,
@@ -377,7 +377,8 @@ const Viewer: React.FC<ViewerProps> = ({
   );
 };
 
-export default withStyles(styles, { withTheme: true })(Viewer);
+const Viewer = withStyles(styles, { withTheme: true })(_Viewer);
+export default Viewer;
 
 function findFeatureById(
   map: OlMap,