new linting, make sure code is type safe

interface/src/components/ButtonRow.tsx

@@ -1,6 +1,7 @@
+import type { FC } from 'react';
+
 import { Box } from '@mui/material';
 import type { BoxProps } from '@mui/material';
-import type { FC } from 'react';
 
 const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => (
   <Box

interface/src/components/MessageBox.tsx

@@ -1,10 +1,11 @@
+import type { FC } from 'react';
+
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { Box, Typography, useTheme } from '@mui/material';
 import type { BoxProps, SvgIconProps, Theme } from '@mui/material';
-import type { FC } from 'react';
 
 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 

interface/src/components/SectionContent.tsx

@@ -1,6 +1,7 @@
-import { Paper, Divider } from '@mui/material';
 import type { FC } from 'react';
 
+import { Divider, Paper } from '@mui/material';
+
 import type { RequiredChildrenProps } from 'utils';
 
 interface SectionContentProps extends RequiredChildrenProps {

interface/src/components/inputs/BlockFormControlLabel.tsx

@@ -1,6 +1,7 @@
+import type { FC } from 'react';
+
 import { FormControlLabel } from '@mui/material';
 import type { FormControlLabelProps } from '@mui/material';
-import type { FC } from 'react';
 
 const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
   <div>

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -1,11 +1,12 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { IconButton, InputAdornment } from '@mui/material';
-import { useState } from 'react';
 
 import ValidatedTextField from './ValidatedTextField';
 import type { ValidatedTextFieldProps } from './ValidatedTextField';
-import type { FC } from 'react';
 
 type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 

interface/src/components/inputs/ValidatedTextField.tsx

@@ -1,7 +1,9 @@
+import type { FC } from 'react';
+
 import { FormHelperText, TextField } from '@mui/material';
 import type { TextFieldProps } from '@mui/material';
+
 import type { ValidateFieldsError } from 'async-validator';
-import type { FC } from 'react';
 
 interface ValidatedFieldProps {
   fieldErrors?: ValidateFieldsError;

interface/src/components/layout/Layout.tsx

@@ -1,13 +1,16 @@
-import { Box, Toolbar } from '@mui/material';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
 import { useLocation } from 'react-router-dom';
+
+import { Box, Toolbar } from '@mui/material';
+
+import { PROJECT_NAME } from 'api/env';
+
+import type { RequiredChildrenProps } from 'utils';
+
 import LayoutAppBar from './LayoutAppBar';
 import LayoutDrawer from './LayoutDrawer';
 import { LayoutContext } from './context';
-import type { FC } from 'react';
-
-import type { RequiredChildrenProps } from 'utils';
-import { PROJECT_NAME } from 'api/env';
 
 export const DRAWER_WIDTH = 210;
 

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,6 +1,7 @@
+import type { FC } from 'react';
+
 import MenuIcon from '@mui/icons-material/Menu';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
-import type { FC } from 'react';
 
 export const DRAWER_WIDTH = 210;
 

interface/src/components/layout/LayoutDrawer.tsx

@@ -1,12 +1,12 @@
-import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
-import { DRAWER_WIDTH } from './Layout';
-
-import LayoutMenu from './LayoutMenu';
-
 import type { FC } from 'react';
 
+import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
+
 import { PROJECT_NAME } from 'api/env';
 
+import { DRAWER_WIDTH } from './Layout';
+import LayoutMenu from './LayoutMenu';
+
 const LayoutDrawerLogo = styled('img')(({ theme }) => ({
   [theme.breakpoints.down('sm')]: {
     height: 24,

interface/src/components/layout/LayoutMenu.tsx

@@ -1,3 +1,6 @@
+import { useContext, useState } from 'react';
+import type { ChangeEventHandler, FC } from 'react';
+
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import CategoryIcon from '@mui/icons-material/Category';
@@ -9,28 +12,23 @@ import PersonIcon from '@mui/icons-material/Person';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import SensorsIcon from '@mui/icons-material/Sensors';
 import SettingsIcon from '@mui/icons-material/Settings';
-
 import {
-  Divider,
-  List,
+  Avatar,
   Box,
   Button,
-  Popover,
-  Avatar,
-  MenuItem,
-  TextField,
+  Divider,
+  List,
   ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemText
+  ListItemText,
+  MenuItem,
+  Popover,
+  TextField
 } from '@mui/material';
 
-import { useContext, useState } from 'react';
-import type { Locales } from 'i18n/i18n-types';
-import type { FC, ChangeEventHandler } from 'react';
 import LayoutMenuItem from 'components/layout/LayoutMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
-
 import DEflag from 'i18n/DE.svg';
 import FRflag from 'i18n/FR.svg';
 import GBflag from 'i18n/GB.svg';
@@ -41,8 +39,8 @@ import PLflag from 'i18n/PL.svg';
 import SKflag from 'i18n/SK.svg';
 import SVflag from 'i18n/SV.svg';
 import TRflag from 'i18n/TR.svg';
-
 import { I18nContext } from 'i18n/i18n-react';
+import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
 
 const LayoutMenu: FC = () => {
@@ -63,7 +61,7 @@ const LayoutMenu: FC = () => {
     setLocale(loc);
   };
 
-  const handleClick = (event: any) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
 

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,7 +1,8 @@
-import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
-import type { SvgIconProps } from '@mui/material';
 import type { FC } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 
 import { routeMatches } from 'utils';
 

interface/src/components/layout/ListMenuItem.tsx

@@ -1,8 +1,9 @@
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { Avatar, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { Link } from 'react-router-dom';
 import type { SvgIconProps } from '@mui/material';
-import type { FC } from 'react';
 
 interface ListMenuItemProps {
   icon: React.ComponentType<SvgIconProps>;

interface/src/components/layout/context.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect, createContext, useContext } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
 
 export interface LayoutContextValue {
   title: string;

interface/src/components/loading/ApplicationError.tsx

@@ -1,6 +1,7 @@
+import type { FC } from 'react';
+
 import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Paper, Typography } from '@mui/material';
-import type { FC } from 'react';
 
 interface ApplicationErrorProps {
   message?: string;

interface/src/components/loading/FormLoader.tsx

@@ -1,9 +1,9 @@
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import type { FC } from 'react';
 
-import { MessageBox } from 'components';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 
+import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface FormLoaderProps {

interface/src/components/loading/LoadingSpinner.tsx

@@ -1,7 +1,8 @@
-import { CircularProgress, Box, Typography } from '@mui/material';
-import type { Theme } from '@mui/material';
 import type { FC } from 'react';
 
+import { Box, CircularProgress, Typography } from '@mui/material';
+import type { Theme } from '@mui/material';
+
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface LoadingSpinnerProps {

interface/src/components/routing/BlockNavigation.tsx

@@ -1,7 +1,7 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import type { FC } from 'react';
+import type { Blocker } from 'react-router-dom';
 
-import type { unstable_Blocker as Blocker } from 'react-router-dom';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 
 import { dialogStyle } from 'CustomTheme';
 import { useI18nContext } from 'i18n/i18n-react';

interface/src/components/routing/RequireAdmin.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { Navigate } from 'react-router-dom';
 import type { FC } from 'react';
+import { Navigate } from 'react-router-dom';
 
-import type { RequiredChildrenProps } from 'utils';
 import { AuthenticatedContext } from 'contexts/authentication';
+import type { RequiredChildrenProps } from 'utils';
 
 const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticatedContext = useContext(AuthenticatedContext);

interface/src/components/routing/RequireAuthenticated.tsx

@@ -1,12 +1,12 @@
 import { useContext, useEffect } from 'react';
+import type { FC } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 
-import type { AuthenticatedContextValue } from 'contexts/authentication/context';
-import type { FC } from 'react';
-
-import type { RequiredChildrenProps } from 'utils';
 import { storeLoginRedirect } from 'api/authentication';
+
+import type { AuthenticatedContextValue } from 'contexts/authentication/context';
 import { AuthenticatedContext, AuthenticationContext } from 'contexts/authentication/context';
+import type { RequiredChildrenProps } from 'utils';
 
 const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticationContext = useContext(AuthenticationContext);

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -1,10 +1,11 @@
 import { useContext } from 'react';
-import { Navigate } from 'react-router-dom';
 import type { FC } from 'react';
+import { Navigate } from 'react-router-dom';
 
-import type { RequiredChildrenProps } from 'utils';
 import * as AuthenticationApi from 'api/authentication';
+
 import { AuthenticationContext } from 'contexts/authentication';
+import type { RequiredChildrenProps } from 'utils';
 
 const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticationContext = useContext(AuthenticationContext);

interface/src/components/routing/RouterTabs.tsx

@@ -1,6 +1,7 @@
-import { Tabs, useMediaQuery, useTheme } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
 import type { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 
 import type { RequiredChildrenProps } from 'utils';
 
@@ -14,7 +15,7 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   const theme = useTheme();
   const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const handleTabChange = (_event: any, path: string) => {
+  const handleTabChange = (_event: unknown, path: string) => {
     navigate(path);
   };
 

interface/src/components/upload/SingleUpload.tsx

@@ -1,13 +1,14 @@
+import { Fragment } from 'react';
+import type { FC } from 'react';
+import { useDropzone } from 'react-dropzone';
+import type { DropzoneState } from 'react-dropzone';
+
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material';
-import { Fragment } from 'react';
-import { useDropzone } from 'react-dropzone';
 import type { Theme } from '@mui/material';
-import type { Progress } from 'alova';
-import type { FC } from 'react';
-import type { DropzoneState } from 'react-dropzone';
 
+import type { Progress } from 'alova';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const getBorderColor = (theme: Theme, props: DropzoneState) => {