refactor: lint and fix

e2e/eight.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { expect, test } from '@playwright/test';
 
 // Test with lightmode

e2e/example.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('has title', async ({ page }) => {
   await page.goto('https://playwright.dev/');

e2e/five.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { expect, test } from '@playwright/test';
 
 test('Five form should work correctly', async ({ page }) => {

e2e/tenShop.spec.ts

@@ -1,5 +1,6 @@
 // @ts-check
-import { expect, Page, test } from '@playwright/test';
+import type { Page} from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/ten');

src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { CssBaseline, PaletteMode, ThemeProvider, useMediaQuery } from '@mui/material';
+import type { PaletteMode} from '@mui/material';
+import { CssBaseline, ThemeProvider, useMediaQuery } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes';

src/components/1/One.tsx

@@ -1,8 +1,8 @@
-import './tempstyle.css';
-
 import { Footer } from './Footer';
+
 import { Header } from './Header';
 import { MainContent } from './MainContent';
+import './tempstyle.css';
 
 export function One() {
   return (

src/components/10/CartSummary.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { selectDistinctNumOfItems, selectTotalAmount, selectTotalItems } from '../redux/features/cart/cart.selectors';
 
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 
 const style: Record<string, CSSProperties> = {
   component: {

src/components/10/Header.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import logo from './assets/redux.svg';
 import { ShoppingCartIcon } from './ShoppingCartIcon';

src/components/10/OrderSummary.tsx

@@ -1,8 +1,9 @@
-import { Box, Button, SxProps, Theme, Typography } from '@mui/material';
+import type { SxProps, Theme} from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { selectDistinctNumOfItems, selectTotalAmount } from '../redux/features/cart/cart.selectors';
 
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 
 const sx: Record<string, SxProps<Theme>> = {
   backdropClicker: {
@@ -49,7 +50,7 @@ type Props = {
 export function OrderSummary({ handleCloseSummary }: Props) {
   const { cart } = useSelector((state: RootState) => state.cartState);
 
-  const handleCompletion = () => alert(`Order completed, please pay ${selectTotalAmount(cart).toFixed(2)}€ now!`);
+  const handleCompletion = () => { alert(`Order completed, please pay ${selectTotalAmount(cart).toFixed(2)}€ now!`); };
 
   return (
     <Box sx={sx.component}>

src/components/10/Product.tsx

@@ -1,9 +1,10 @@
-import { CSSProperties, ChangeEvent, useCallback, useState } from 'react';
+import type { ChangeEvent, CSSProperties} from 'react';
+import { useCallback, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { addItem } from '../redux/features/cart/cart';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { useDispatchActionCallback } from './ShoppingCart.utils';
 
 const style: Record<string, CSSProperties> = {
@@ -63,7 +64,7 @@ export function Product() {
     <div style={style.component}>
       <h1>{product.title}</h1>
 
-      <img alt={`${product.title}`} src={product.image} style={style.image} />
+      <img alt={product.title} src={product.image} style={style.image} />
 
       <p>{product.description}</p>
 

src/components/10/ProductError.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   text: {

src/components/10/ProductItem.tsx

@@ -1,7 +1,7 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { addItem } from '../redux/features/cart/cart';
-import { Product } from '../redux/features/cart/cart.types';
+import type { Product } from '../redux/features/cart/cart.types';
 import { useDispatchActionCallback } from './ShoppingCart.utils';
 
 const style: Record<string, CSSProperties> = {
@@ -49,7 +49,7 @@ export function ProductItem({ product }: Props) {
   return (
     <div style={style.component}>
       <Link style={style.link} to={`product/${product.productId}`}>
-        <img alt={`${product.title}`} src={product.image} style={style.image} />
+        <img alt={product.title} src={product.image} style={style.image} />
       </Link>
 
       <h2 style={style.title}>{product.title}</h2>

src/components/10/Purchase.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   checkout: {

src/components/10/ShoppingCart.utils.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { AnyAction } from '@reduxjs/toolkit';
+import type { AnyAction } from '@reduxjs/toolkit';
 import { useDispatch } from 'react-redux';
 
 export function useDispatchAction2<T>(action: (args: T) => AnyAction, args: T): () => void {

src/components/10/ShoppingCartIcon.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { selectTotalItems } from '../redux/features/cart/cart.selectors';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import shoppingCart from './assets/shop.svg';
 
 const style: Record<string, CSSProperties> = {

src/components/10/ShoppingCartItem.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { decreaseAmountBy, increaseAmountBy, removeItem } from '../redux/features/cart/cart';
 
-import { CartItem } from '../redux/features/cart/cart.types';
+import type { CartItem } from '../redux/features/cart/cart.types';
 import placeholderProduct from './assets/placeholderProduct.webp';
 import { useDispatchAction2 } from './ShoppingCart.utils';
 
@@ -82,7 +82,7 @@ export function ShoppingCartItem({ data: product }: Props) {
   return (
     <div style={style.component}>
       <Link to={`/ten/product/${product.productId}`}>
-        <img alt={`${product.title}`} src={product.image || placeholderProduct} style={style.image} />
+        <img alt={product.title} src={product.image ?? placeholderProduct} style={style.image} />
       </Link>
 
       <span style={style.title}>{product.title}</span>

src/components/10/TenCart.tsx

@@ -1,8 +1,9 @@
-import { CSSProperties, useCallback, useState } from 'react';
+import type { CSSProperties} from 'react';
+import { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { emptyCart } from '../redux/features/cart/cart';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { CartSummary } from './CartSummary';
 import { OrderSummary } from './OrderSummary';
 import { Purchase } from './Purchase';

src/components/10/TenShop.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { ProductItem } from './ProductItem';
 
 const style: Record<string, CSSProperties> = {

src/components/11/Eleven.tsx

@@ -4,7 +4,7 @@ export function Eleven() {
   return (
     <>
       <Typography variant="h2">This works! (More to come)</Typography>
-      <Button variant="contained" onClick={() => alert('hi')}>
+      <Button variant="contained" onClick={() => { alert('hi'); }}>
         Hello
       </Button>
     </>

src/components/12/CourseItem.tsx

@@ -1,5 +1,5 @@
 import { ListItem, ListItemText, Typography } from '@mui/material';
-import { Course, Period } from './Twelve.types';
+import type { Course, Period } from './Twelve.types';
 import { formatNatoDate, getContrastColor, getCourseFromId } from './Twelve.utils';
 
 type Props = {

src/components/12/DataDisplay.tsx

@@ -3,16 +3,14 @@ import { Box, Fade } from '@mui/material';
 import { uniq } from 'lodash';
 import { Day } from './Day';
 import { Legend } from './Legend';
-import { Course, Data, Period } from './Twelve.types';
+import type { Course, Data, Period } from './Twelve.types';
 
 type Props = {
-  data: Data;
+  data?: Data;
   elementId: number;
 };
 
 export function DataDisplay({ data, elementId }: Props) {
-  const courses: Course[] = data?.elements ? data.elements : [];
-
   const periods = useMemo<Period[]>(() => {
     if (!data) {
       return [];
@@ -23,6 +21,8 @@ export function DataDisplay({ data, elementId }: Props) {
     return periods ?? [];
   }, [data, elementId]);
 
+  const courses: Course[] = data?.elements ? data.elements : [];
+
   const dates = useMemo(() => periods.flatMap((p) => p.date), [periods]);
   const sortedUniqDays = useMemo(() => uniq(dates.sort((a, b) => a - b)), [dates]);
 

src/components/12/Day.tsx

@@ -1,10 +1,10 @@
+import { useMemo } from 'react';
 import { Box, Divider, List, Typography } from '@mui/material';
 import moment from 'moment';
-import 'moment/dist/locale/de';
-import { useMemo } from 'react';
 import { CourseItem } from './CourseItem';
-import { Course, Period } from './Twelve.types';
+import type { Course, Period } from './Twelve.types';
 import { stringToColor } from './Twelve.utils';
+import 'moment/dist/locale/de';
 
 type Props = {
   courses: Course[];
@@ -64,15 +64,16 @@ export function Day({ courses, date, periods }: Props) {
         {dayOfWeek} {!isThisWeek && `(${formattedDate})`}
       </Typography>
 
-      {expandedSortedClasses && (
+      {expandedSortedClasses.length > 0 && (
         <List>
           {expandedSortedClasses.map((cls) =>
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- unknown api definition
             cls.elements[1] === undefined ? (
               // If not defined, print empty element
               <></>
             ) : (
               <Box key={cls.id + cls.lessonId}>
-                <CourseItem bgColor={colorMap.get(cls.elements[1].id)} classItem={cls} courses={courses} />
+                <CourseItem bgColor={colorMap.get(cls.elements[1].id) as string} classItem={cls} courses={courses} />
                 <Divider component="li" variant="fullWidth" />
               </Box>
             ),

src/components/12/DelayedSpinner.tsx

@@ -6,7 +6,7 @@ type Props = {
   loading: boolean;
 };
 
-export function DelayedSpinner({ loading, delayMs }: Props) {
+export function DelayedSpinner({ delayMs, loading }: Props) {
   return (
     // Set fixed height for no movement when transitioning
     <Box sx={{ height: 2, m: 1 }}>

src/components/12/Legend.tsx

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
-import { Course } from './Twelve.types';
+import type { Course } from './Twelve.types';
 
 type Props = {
   courses: Course[];

src/components/12/TimeSelect.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useState } from 'react';
-import { Box, SxProps, Theme } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import moment, { Moment } from 'moment';
+import type { Moment } from 'moment';
+import moment from 'moment';
 import { WeekSkipper } from './WeekSkipper';
 
 const sx: Record<string, SxProps<Theme>> = {
@@ -24,7 +26,7 @@ export function TimeSelect({ dateChanged }: Props) {
   const handleDateChange = useCallback(
     (newValue: Moment | null) => {
       if (newValue !== null) {
-        console.log('TimeSelect new date:', moment(newValue).format('yyyy-MM-DD'));
+        // console.log('TimeSelect new date:', moment(newValue).format('yyyy-MM-DD'));
         setDate(newValue);
         dateChanged(moment(newValue).format('yyyy-MM-DD'));
       }
@@ -33,23 +35,37 @@ export function TimeSelect({ dateChanged }: Props) {
   );
 
   const handleAddWeeks = useCallback(
-    (numWeeks: number) => handleDateChange(moment(date).add(numWeeks, 'week')),
+    (numWeeks: number) => {
+      handleDateChange(moment(date).add(numWeeks, 'week'));
+    },
     [date, handleDateChange],
   );
 
   return (
     <Box sx={sx.root}>
       <LocalizationProvider dateAdapter={AdapterMoment}>
-        <WeekSkipper direction="back" onClick={() => handleAddWeeks(-1)} />
+        <WeekSkipper
+          direction="back"
+          onClick={() => {
+            handleAddWeeks(-1);
+          }}
+        />
 
         <DatePicker
           label="Wochenstart"
           renderInput={(params) => <TextField {...params} />}
           value={date}
-          onChange={(newValue) => handleDateChange(newValue)}
+          onChange={(newValue) => {
+            handleDateChange(newValue);
+          }}
         />
 
-        <WeekSkipper direction="forward" onClick={() => handleAddWeeks(1)} />
+        <WeekSkipper
+          direction="forward"
+          onClick={() => {
+            handleAddWeeks(1);
+          }}
+        />
       </LocalizationProvider>
     </Box>
   );

src/components/12/Twelve.api.ts

@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-import { Response } from './Twelve.types';
+import type { Response } from './Twelve.types';
 
 // locally e.g. http://localhost:3000/proxy/
 const proxyUrl = import.meta.env.VITE_PROXY_URL;