new linting, make sure code is type safe

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;