From 0eb171fa3eb06076a11668ecaa21b23136f1243a Mon Sep 17 00:00:00 2001 From: Pavel Kirilin Date: Sat, 2 Dec 2023 20:44:05 +0300 Subject: [PATCH] Removed import type React --- src/frontend/src/App.tsx | 4 ++-- src/frontend/src/AppProvider.tsx | 4 ++-- .../src/components/AppButton/AppButton.tsx | 4 ++-- .../src/components/AppSelect/AppSelect.test.tsx | 5 ++--- .../src/components/AppSelect/AppSelect.tsx | 6 +++--- .../src/components/DatePicker/DatePicker.test.tsx | 8 ++++---- .../src/components/DatePicker/DatePicker.tsx | 4 ++-- .../src/features/__shared__/hooks/types.ts | 7 ++++--- .../src/features/__shared__/hooks/usePopover.ts | 4 ++-- .../auth/components/AuthCallbackProgress.tsx | 4 ++-- .../features/auth/components/DemoAuthWarning.tsx | 4 ++-- .../src/features/auth/components/GoogleIcon.tsx | 4 ++-- .../src/features/auth/components/Login.tsx | 4 ++-- .../src/features/auth/components/PostLogin.tsx | 5 ++--- .../src/features/auth/components/PostLogout.tsx | 5 ++--- .../categories/components/CategoriesListItem.tsx | 5 ++--- .../categories/components/CategoryInputDialog.tsx | 6 ++---- .../categories/components/CategorySelect.tsx | 4 ++-- .../categories/components/CreateCategory.tsx | 8 ++++---- .../categories/components/DeleteCategoryDialog.tsx | 7 +++---- .../src/features/categories/routes/Categories.tsx | 8 ++++---- .../src/features/navigation/components/Menu.tsx | 4 ++-- .../features/navigation/components/MobileMenu.tsx | 5 ++--- .../navigation/components/NavigationBar.tsx | 4 ++-- .../src/features/notes/components/MealsList.tsx | 8 ++++---- .../features/notes/components/MealsListItem.tsx | 5 ++--- .../features/notes/components/MealsListSummary.tsx | 4 ++-- .../src/features/notes/components/NotesTable.tsx | 5 ++--- .../features/notes/components/NotesTableRow.tsx | 5 ++--- .../features/pages/components/DemoPagesWarning.tsx | 3 ++- .../src/features/pages/components/ExportDialog.tsx | 5 ++--- .../pages/components/ExportPagesMenuItem.tsx | 10 +++++----- .../pages/components/ImportPagesMenuItem.tsx | 10 +++++----- .../src/features/pages/components/PageContent.tsx | 5 ++--- .../pages/components/PageContentHeader.tsx | 4 ++-- .../src/features/pages/components/PagesFilter.tsx | 5 ++--- .../pages/components/PagesFilterAppliedParams.tsx | 4 ++-- .../pages/components/PagesTable/PagesTable.tsx | 5 ++--- .../pages/components/PagesTablePagination.tsx | 4 ++-- .../features/pages/components/PagesTableRow.tsx | 5 ++--- .../pages/components/PagesToolbar/PagesToolbar.tsx | 14 +++++++------- .../pages/components/ShowMoreTableOptions.tsx | 12 ++++++------ .../features/products/components/CreateProduct.tsx | 8 ++++---- .../products/components/DeleteProductsDialog.tsx | 7 +++---- .../products/components/ProductInputDialog.tsx | 7 +++---- .../features/products/components/ProductSelect.tsx | 4 ++-- .../products/components/ProductsFilter.tsx | 7 +++---- .../components/ProductsFilterAppliedParams.tsx | 4 ++-- .../components/ProductsTable/ProductsTable.tsx | 5 ++--- .../components/ProductsTablePagination.tsx | 4 ++-- .../products/components/ProductsTableRow.tsx | 8 ++++---- .../src/features/products/routes/Products.tsx | 4 ++-- src/frontend/src/routes/NotFound.tsx | 4 ++-- .../src/test-utils/builders/componentBuilder.tsx | 10 +++++----- src/frontend/src/testing/TestEnvironment.tsx | 6 +++--- src/frontend/src/testing/render.tsx | 4 ++-- 56 files changed, 150 insertions(+), 168 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index d8866e141..68a4eba72 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -1,8 +1,8 @@ import { Box } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { AppRoutes } from './routes'; -const App: React.FC = () => { +const App: FC = () => { return ( diff --git a/src/frontend/src/AppProvider.tsx b/src/frontend/src/AppProvider.tsx index 2a6338e8a..7f4abb746 100644 --- a/src/frontend/src/AppProvider.tsx +++ b/src/frontend/src/AppProvider.tsx @@ -1,7 +1,7 @@ import { CssBaseline, StyledEngineProvider, type Theme, ThemeProvider } from '@mui/material'; import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; -import type React from 'react'; +import { type PropsWithChildren, type FC } from 'react'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { type Store } from 'redux'; @@ -15,7 +15,7 @@ interface AppProviderProps { store: Store; } -const AppProvider: React.FC> = ({ children, store }) => { +const AppProvider: FC> = ({ children, store }) => { return ( diff --git a/src/frontend/src/components/AppButton/AppButton.tsx b/src/frontend/src/components/AppButton/AppButton.tsx index d54b518d5..4fe32f4a5 100644 --- a/src/frontend/src/components/AppButton/AppButton.tsx +++ b/src/frontend/src/components/AppButton/AppButton.tsx @@ -1,12 +1,12 @@ import { Button, type ButtonProps } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { AppButtonProgress, AppButtonRoot, AppButtonWrapper } from './AppButton.styles'; interface AppButtonProps extends ButtonProps { isLoading?: boolean; } -const AppButton: React.FC = ({ isLoading, disabled, ...props }) => { +const AppButton: FC = ({ isLoading, disabled, ...props }) => { return ( diff --git a/src/frontend/src/components/AppSelect/AppSelect.test.tsx b/src/frontend/src/components/AppSelect/AppSelect.test.tsx index cbc3c5cfc..26a68e44b 100644 --- a/src/frontend/src/components/AppSelect/AppSelect.test.tsx +++ b/src/frontend/src/components/AppSelect/AppSelect.test.tsx @@ -1,7 +1,6 @@ import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import type React from 'react'; -import { useState } from 'react'; +import { type FC, useState } from 'react'; import { type SelectOption } from 'src/types'; import AppSelect from './AppSelect'; @@ -26,7 +25,7 @@ interface AppSelectTestProps { errorText?: string; } -const AppSelectTest: React.FC = ({ +const AppSelectTest: FC = ({ initialValue = null, allowEmptyOptions, errorText, diff --git a/src/frontend/src/components/AppSelect/AppSelect.tsx b/src/frontend/src/components/AppSelect/AppSelect.tsx index 739824956..7a030375e 100644 --- a/src/frontend/src/components/AppSelect/AppSelect.tsx +++ b/src/frontend/src/components/AppSelect/AppSelect.tsx @@ -1,5 +1,5 @@ import { Autocomplete, CircularProgress, TextField } from '@mui/material'; -import type React from 'react'; +import { type SyntheticEvent, type ReactElement } from 'react'; interface AppSelectProps { availableOptions: TOption[]; @@ -27,8 +27,8 @@ const AppSelect = ({ helperText, isLoading, isInvalid, -}: AppSelectProps): React.ReactElement => { - const handleChange = (event: React.SyntheticEvent, newValue: TOption | null): void => { +}: AppSelectProps): ReactElement => { + const handleChange = (event: SyntheticEvent, newValue: TOption | null): void => { onChange(newValue); }; diff --git a/src/frontend/src/components/DatePicker/DatePicker.test.tsx b/src/frontend/src/components/DatePicker/DatePicker.test.tsx index 448f40f6f..0f9460313 100644 --- a/src/frontend/src/components/DatePicker/DatePicker.test.tsx +++ b/src/frontend/src/components/DatePicker/DatePicker.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; +import { type FC } from 'react'; import { useInput } from 'src/hooks'; import { create } from 'src/test-utils'; import { mapToDateInputProps } from 'src/utils/inputMapping'; @@ -14,7 +14,7 @@ interface DatePickerTestProps { errorHelperText?: string; } -const DatePickerTest: React.FC = ({ +const DatePickerTest: FC = ({ label, placeholder, date: initialDate = null, @@ -52,7 +52,7 @@ test('date can be changed', async () => { test('date can be validated', async () => { const ui = create .component( - + <> { date={new Date('2022-06-26')} errorHelperText="Second is invalid" /> - , + , ) .please(); diff --git a/src/frontend/src/components/DatePicker/DatePicker.tsx b/src/frontend/src/components/DatePicker/DatePicker.tsx index 6967a0012..ac0a240d3 100644 --- a/src/frontend/src/components/DatePicker/DatePicker.tsx +++ b/src/frontend/src/components/DatePicker/DatePicker.tsx @@ -1,9 +1,9 @@ import { TextField } from '@mui/material'; import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers'; -import type React from 'react'; +import { type FC } from 'react'; import { type DatePickerProps } from './DatePicker.types'; -const DatePicker: React.FC = ({ +const DatePicker: FC = ({ label, placeholder, date, diff --git a/src/frontend/src/features/__shared__/hooks/types.ts b/src/frontend/src/features/__shared__/hooks/types.ts index fb46e84be..5eb403782 100644 --- a/src/frontend/src/features/__shared__/hooks/types.ts +++ b/src/frontend/src/features/__shared__/hooks/types.ts @@ -1,4 +1,5 @@ import { type TextFieldProps } from '@mui/material'; +import { type Dispatch, type SetStateAction } from 'react'; export type BindFunction = () => TBindingProps; export type ValidatorFunction = (value: TValue) => boolean; @@ -10,19 +11,19 @@ export type BaseInputHook = ( export type InputHook = BaseInputHook< TValue, - [TValue, React.Dispatch>, BindFunction], + [TValue, Dispatch>, BindFunction], TArg >; export type ValidatedInputHook = BaseInputHook< TValue, - [TValue, React.Dispatch>, BindFunction, boolean], + [TValue, Dispatch>, BindFunction, boolean], TArg >; export type BindingCreatorFunction = ( value: TValue, - setValue: React.Dispatch>, + setValue: Dispatch>, ) => TBindingProps; export interface InputOptions { diff --git a/src/frontend/src/features/__shared__/hooks/usePopover.ts b/src/frontend/src/features/__shared__/hooks/usePopover.ts index c11ce2e80..a92a1c233 100644 --- a/src/frontend/src/features/__shared__/hooks/usePopover.ts +++ b/src/frontend/src/features/__shared__/hooks/usePopover.ts @@ -1,7 +1,7 @@ import { type PopoverProps } from '@mui/material'; -import { useState } from 'react'; +import { useState, type MouseEvent } from 'react'; -export type ShowPopoverFn = (event: React.MouseEvent) => void; +export type ShowPopoverFn = (event: MouseEvent) => void; export default function usePopover(): [ PopoverProps, diff --git a/src/frontend/src/features/auth/components/AuthCallbackProgress.tsx b/src/frontend/src/features/auth/components/AuthCallbackProgress.tsx index efe2dc8da..9cfa4d21d 100644 --- a/src/frontend/src/features/auth/components/AuthCallbackProgress.tsx +++ b/src/frontend/src/features/auth/components/AuthCallbackProgress.tsx @@ -1,11 +1,11 @@ import { Box, CircularProgress, Typography } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; interface AuthCallbackProgressProps { label: string; } -const AuthCallbackProgress: React.FC = ({ label }) => { +const AuthCallbackProgress: FC = ({ label }) => { return ( diff --git a/src/frontend/src/features/auth/components/DemoAuthWarning.tsx b/src/frontend/src/features/auth/components/DemoAuthWarning.tsx index 92f2c2f48..fa6b06318 100644 --- a/src/frontend/src/features/auth/components/DemoAuthWarning.tsx +++ b/src/frontend/src/features/auth/components/DemoAuthWarning.tsx @@ -1,7 +1,7 @@ import { Alert } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; -const DemoAuthWarning: React.FC = () => { +const DemoAuthWarning: FC = () => { return ( {`This application is running in demo mode and is not using real authentication. You will be signed in as a fake user`} diff --git a/src/frontend/src/features/auth/components/GoogleIcon.tsx b/src/frontend/src/features/auth/components/GoogleIcon.tsx index de0a3a182..259da673d 100644 --- a/src/frontend/src/features/auth/components/GoogleIcon.tsx +++ b/src/frontend/src/features/auth/components/GoogleIcon.tsx @@ -1,7 +1,7 @@ import { SvgIcon, type SvgIconProps } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; -const GoogleIcon: React.FC = ({ ...props }) => { +const GoogleIcon: FC = ({ ...props }) => { return ( diff --git a/src/frontend/src/features/auth/components/Login.tsx b/src/frontend/src/features/auth/components/Login.tsx index 4e658ec25..e27921e6e 100644 --- a/src/frontend/src/features/auth/components/Login.tsx +++ b/src/frontend/src/features/auth/components/Login.tsx @@ -1,5 +1,5 @@ import { Box, Paper, Stack, Typography } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { Navigate } from 'react-router-dom'; import { AppButton } from 'src/components'; import { DEMO_MODE_ENABLED } from 'src/config'; @@ -8,7 +8,7 @@ import DemoAuthWarning from './DemoAuthWarning'; import GoogleIcon from './GoogleIcon'; import Logo from './Logo'; -const Login: React.FC = () => { +const Login: FC = () => { const returnUrl = useReturnUrl(); const { user, isLoggingIn, login } = useAuth(); diff --git a/src/frontend/src/features/auth/components/PostLogin.tsx b/src/frontend/src/features/auth/components/PostLogin.tsx index c85f0a8b4..6a959fb29 100644 --- a/src/frontend/src/features/auth/components/PostLogin.tsx +++ b/src/frontend/src/features/auth/components/PostLogin.tsx @@ -1,10 +1,9 @@ -import type React from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect } from 'react'; import { Navigate, useParams } from 'react-router-dom'; import { useAuth } from '../hooks'; import AuthCallbackProgress from './AuthCallbackProgress'; -const PostLogin: React.FC = () => { +const PostLogin: FC = () => { const { user, completeLogin } = useAuth(); const params = useParams(); diff --git a/src/frontend/src/features/auth/components/PostLogout.tsx b/src/frontend/src/features/auth/components/PostLogout.tsx index 39ead9dd2..6e9cd5d65 100644 --- a/src/frontend/src/features/auth/components/PostLogout.tsx +++ b/src/frontend/src/features/auth/components/PostLogout.tsx @@ -1,10 +1,9 @@ -import type React from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect } from 'react'; import { Navigate } from 'react-router-dom'; import { useAuth } from '../hooks'; import AuthCallbackProgress from './AuthCallbackProgress'; -const PostLogout: React.FC = () => { +const PostLogout: FC = () => { const { user, completeLogout } = useAuth(); useEffect(() => { diff --git a/src/frontend/src/features/categories/components/CategoriesListItem.tsx b/src/frontend/src/features/categories/components/CategoriesListItem.tsx index 7743d1d7b..78ab92a98 100644 --- a/src/frontend/src/features/categories/components/CategoriesListItem.tsx +++ b/src/frontend/src/features/categories/components/CategoriesListItem.tsx @@ -1,8 +1,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import { Card, CardHeader, CardActions, Button } from '@mui/material'; -import type React from 'react'; -import { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { categoriesApi } from '../api'; import { type Category, type CategoryFormData } from '../types'; import CategoryInputDialog from './CategoryInputDialog'; @@ -14,7 +13,7 @@ interface CategoriesListItemProps { category: Category; } -const CategoriesListItem: React.FC = ({ category }) => { +const CategoriesListItem: FC = ({ category }) => { const [isEditDialogOpened, setIsEditDialogOpened] = useState(false); const [isDeleteDialogOpened, setIsDeleteDialogOpened] = useState(false); const [editCategory, editCategoryRequest] = categoriesApi.useEditCategoryMutation(); diff --git a/src/frontend/src/features/categories/components/CategoryInputDialog.tsx b/src/frontend/src/features/categories/components/CategoryInputDialog.tsx index 318a17002..e8df87597 100644 --- a/src/frontend/src/features/categories/components/CategoryInputDialog.tsx +++ b/src/frontend/src/features/categories/components/CategoryInputDialog.tsx @@ -1,7 +1,5 @@ import { TextField } from '@mui/material'; -import type React from 'react'; -import { type Dispatch, type SetStateAction } from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect, type Dispatch, type SetStateAction } from 'react'; import { AppButton, AppDialog } from 'src/components'; import { useInput } from 'src/hooks'; import { mapToTextInputProps } from 'src/utils/inputMapping'; @@ -18,7 +16,7 @@ interface CreateEditCategoryDialogProps { category?: Category; } -const CategoryInputDialog: React.FC = ({ +const CategoryInputDialog: FC = ({ isOpened: isDialogOpened, setIsOpened: setIsDialogOpened, title, diff --git a/src/frontend/src/features/categories/components/CategorySelect.tsx b/src/frontend/src/features/categories/components/CategorySelect.tsx index a664319d7..f321d36c9 100644 --- a/src/frontend/src/features/categories/components/CategorySelect.tsx +++ b/src/frontend/src/features/categories/components/CategorySelect.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import { type FC } from 'react'; import { AppSelect } from 'src/components'; import { type SelectOption, type SelectProps } from 'src/types'; import { categoriesApi } from '../api'; -const CategorySelect: React.FC> = ({ +const CategorySelect: FC> = ({ label, placeholder, value = null, diff --git a/src/frontend/src/features/categories/components/CreateCategory.tsx b/src/frontend/src/features/categories/components/CreateCategory.tsx index 6404abeaa..92a4aff4c 100644 --- a/src/frontend/src/features/categories/components/CreateCategory.tsx +++ b/src/frontend/src/features/categories/components/CreateCategory.tsx @@ -1,11 +1,11 @@ import AddIcon from '@mui/icons-material/Add'; -import React, { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { AppFab } from 'src/components'; import { categoriesApi } from '../api'; import { type CategoryFormData } from '../types'; import CategoryInputDialog from './CategoryInputDialog'; -const CreateCategory: React.FC = () => { +const CreateCategory: FC = () => { const [isCreateDialogOpened, setIsCreateDialogOpened] = useState(false); const [createCategory, createCategoryRequest] = categoriesApi.useCreateCategoryMutation(); const categoriesQuery = categoriesApi.useGetCategoriesQuery(); @@ -25,7 +25,7 @@ const CreateCategory: React.FC = () => { }; return ( - + <> { onSubmit={handleDialogSubmit} isLoading={createCategoryRequest.isLoading} /> - + ); }; diff --git a/src/frontend/src/features/categories/components/DeleteCategoryDialog.tsx b/src/frontend/src/features/categories/components/DeleteCategoryDialog.tsx index f0edbfb67..d7320ee3e 100644 --- a/src/frontend/src/features/categories/components/DeleteCategoryDialog.tsx +++ b/src/frontend/src/features/categories/components/DeleteCategoryDialog.tsx @@ -1,17 +1,16 @@ import { Typography } from '@mui/material'; -import type React from 'react'; -import { useEffect } from 'react'; +import { useEffect, type FC, type Dispatch, type SetStateAction } from 'react'; import { AppButton, AppDialog } from 'src/components'; import { categoriesApi } from '../api'; import { type Category } from '../types'; interface DeleteCategoryDialogProps { isOpened: boolean; - setIsOpened: React.Dispatch>; + setIsOpened: Dispatch>; category: Category; } -const DeleteCategoryDialog: React.FC = ({ +const DeleteCategoryDialog: FC = ({ isOpened: isDialogOpened, setIsOpened: setIsDialogOpened, category, diff --git a/src/frontend/src/features/categories/routes/Categories.tsx b/src/frontend/src/features/categories/routes/Categories.tsx index 07f936919..fdbbe3316 100644 --- a/src/frontend/src/features/categories/routes/Categories.tsx +++ b/src/frontend/src/features/categories/routes/Categories.tsx @@ -1,15 +1,15 @@ import { Box, Container, Typography } from '@mui/material'; -import React from 'react'; +import { type FC } from 'react'; import { AppLinearProgress } from 'src/components'; import { categoriesApi } from '../api'; import CategoriesList from '../components/CategoriesList'; import CreateCategory from '../components/CreateCategory'; -const Categories: React.FC = () => { +const Categories: FC = () => { const categoriesQuery = categoriesApi.useGetCategoriesQuery(); return ( - + <> {categoriesQuery.isFetching && } @@ -20,7 +20,7 @@ const Categories: React.FC = () => { - + ); }; diff --git a/src/frontend/src/features/navigation/components/Menu.tsx b/src/frontend/src/features/navigation/components/Menu.tsx index 7e59c5209..b1a873d84 100644 --- a/src/frontend/src/features/navigation/components/Menu.tsx +++ b/src/frontend/src/features/navigation/components/Menu.tsx @@ -1,9 +1,9 @@ import { Box, List, ListItem, ListItemButton, ListItemText } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { NAV_LINKS } from '../constants'; -const Menu: React.FC = () => { +const Menu: FC = () => { const location = useLocation(); return ( diff --git a/src/frontend/src/features/navigation/components/MobileMenu.tsx b/src/frontend/src/features/navigation/components/MobileMenu.tsx index a2a094828..d4ab00d16 100644 --- a/src/frontend/src/features/navigation/components/MobileMenu.tsx +++ b/src/frontend/src/features/navigation/components/MobileMenu.tsx @@ -11,12 +11,11 @@ import { ListItemText, Typography, } from '@mui/material'; -import type React from 'react'; -import { useState } from 'react'; +import { type FC, useState } from 'react'; import { Link } from 'react-router-dom'; import { APP_BAR_HEIGHT, APP_NAME, NAV_LINKS } from '../constants'; -const MobileMenu: React.FC = () => { +const MobileMenu: FC = () => { const [isOpened, setIsOpened] = useState(false); const handleMenuToggle = (): void => { diff --git a/src/frontend/src/features/navigation/components/NavigationBar.tsx b/src/frontend/src/features/navigation/components/NavigationBar.tsx index 49c183697..67175fbae 100644 --- a/src/frontend/src/features/navigation/components/NavigationBar.tsx +++ b/src/frontend/src/features/navigation/components/NavigationBar.tsx @@ -1,13 +1,13 @@ import LogoutIcon from '@mui/icons-material/Logout'; import { AppBar, Box, Container, IconButton, Toolbar, Tooltip } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { useAuth } from 'src/features/auth'; import { APP_BAR_HEIGHT, APP_NAME } from '../constants'; import BrandLink from './BrandLink'; import Menu from './Menu'; import MobileMenu from './MobileMenu'; -const NavigationBar: React.FC = () => { +const NavigationBar: FC = () => { const { logout } = useAuth(); const handleLogout = (): void => { diff --git a/src/frontend/src/features/notes/components/MealsList.tsx b/src/frontend/src/features/notes/components/MealsList.tsx index 5179b7c46..2be78454e 100644 --- a/src/frontend/src/features/notes/components/MealsList.tsx +++ b/src/frontend/src/features/notes/components/MealsList.tsx @@ -1,14 +1,14 @@ -import React from 'react'; +import { type FC } from 'react'; import { getMealTypes } from '../models'; import MealsListItem from './MealsListItem'; -const MealsList: React.FC = () => { +const MealsList: FC = () => { return ( - + <> {getMealTypes().map((mealType, index) => ( ))} - + ); }; diff --git a/src/frontend/src/features/notes/components/MealsListItem.tsx b/src/frontend/src/features/notes/components/MealsListItem.tsx index e05017766..b1a57b4a3 100644 --- a/src/frontend/src/features/notes/components/MealsListItem.tsx +++ b/src/frontend/src/features/notes/components/MealsListItem.tsx @@ -1,7 +1,6 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material'; -import type React from 'react'; -import { useMemo, useState } from 'react'; +import { type FC, useMemo, useState } from 'react'; import { getMealName, type MealType } from '../models'; import NotesTable from './NotesTable'; @@ -9,7 +8,7 @@ interface MealsListItemProps { mealType: MealType; } -const MealsListItem: React.FC = ({ mealType }: MealsListItemProps) => { +const MealsListItem: FC = ({ mealType }: MealsListItemProps) => { const [expanded, setExpanded] = useState(true); const mealName = useMemo(() => getMealName(mealType), [mealType]); diff --git a/src/frontend/src/features/notes/components/MealsListSummary.tsx b/src/frontend/src/features/notes/components/MealsListSummary.tsx index 21cbacc27..7f7bc1a23 100644 --- a/src/frontend/src/features/notes/components/MealsListSummary.tsx +++ b/src/frontend/src/features/notes/components/MealsListSummary.tsx @@ -1,8 +1,8 @@ import { Box, Typography } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { useAppSelector } from '../../__shared__/hooks'; -const MealsListSummary: React.FC = () => { +const MealsListSummary: FC = () => { const totalCalories = useAppSelector(state => state.notes.noteItems.reduce((sum, note) => sum + note.calories, 0), ); diff --git a/src/frontend/src/features/notes/components/NotesTable.tsx b/src/frontend/src/features/notes/components/NotesTable.tsx index ff5eaaa0d..1f6a5a15c 100644 --- a/src/frontend/src/features/notes/components/NotesTable.tsx +++ b/src/frontend/src/features/notes/components/NotesTable.tsx @@ -10,8 +10,7 @@ import { TableRow, Typography, } from '@mui/material'; -import type React from 'react'; -import { useEffect, useMemo, useState } from 'react'; +import { type FC, useEffect, useMemo, useState } from 'react'; import { useAppDispatch, useAppSelector, useRouterId } from 'src/hooks'; import { type MealType, type NoteCreateEdit } from '../models'; import { createNote, getNotes } from '../thunks'; @@ -22,7 +21,7 @@ interface NotesTableProps { mealType: MealType; } -const NotesTable: React.FC = ({ mealType }: NotesTableProps) => { +const NotesTable: FC = ({ mealType }: NotesTableProps) => { const pageId = useRouterId('id'); const noteItems = useAppSelector(state => diff --git a/src/frontend/src/features/notes/components/NotesTableRow.tsx b/src/frontend/src/features/notes/components/NotesTableRow.tsx index 872c263a0..af57b590a 100644 --- a/src/frontend/src/features/notes/components/NotesTableRow.tsx +++ b/src/frontend/src/features/notes/components/NotesTableRow.tsx @@ -2,8 +2,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import { IconButton, TableCell, TableRow, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import type React from 'react'; -import { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { useAppDispatch, useAppSelector, useRouterId } from 'src/hooks'; import { type NoteCreateEdit, type NoteItem } from '../models'; import { deleteNote, editNote } from '../thunks'; @@ -23,7 +22,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const NotesTableRow: React.FC = ({ note }: NotesTableRowProps) => { +const NotesTableRow: FC = ({ note }: NotesTableRowProps) => { const classes = useStyles(); const pageId = useRouterId('id'); const dispatch = useAppDispatch(); diff --git a/src/frontend/src/features/pages/components/DemoPagesWarning.tsx b/src/frontend/src/features/pages/components/DemoPagesWarning.tsx index 5132e5e32..025465472 100644 --- a/src/frontend/src/features/pages/components/DemoPagesWarning.tsx +++ b/src/frontend/src/features/pages/components/DemoPagesWarning.tsx @@ -1,6 +1,7 @@ import { Alert } from '@mui/material'; +import { type FC } from 'react'; -const DemoPagesWarning: React.FC = () => { +const DemoPagesWarning: FC = () => { return ( This application is running in demo mode. Import/export features are disabled diff --git a/src/frontend/src/features/pages/components/ExportDialog.tsx b/src/frontend/src/features/pages/components/ExportDialog.tsx index df3107de9..ad4bfb19b 100644 --- a/src/frontend/src/features/pages/components/ExportDialog.tsx +++ b/src/frontend/src/features/pages/components/ExportDialog.tsx @@ -1,5 +1,4 @@ -import type React from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect } from 'react'; import { AppButton, AppDialog, DatePicker } from 'src/components'; import { useInput } from 'src/hooks'; import { mapToDateInputProps } from 'src/utils/inputMapping'; @@ -14,7 +13,7 @@ interface ExportDialogProps { onClose: () => void; } -const ExportDialog: React.FC = ({ format: exportFormat, isOpen, onClose }) => { +const ExportDialog: FC = ({ format: exportFormat, isOpen, onClose }) => { const startDateInput = useInput({ initialValue: null, errorHelperText: 'Start date is required', diff --git a/src/frontend/src/features/pages/components/ExportPagesMenuItem.tsx b/src/frontend/src/features/pages/components/ExportPagesMenuItem.tsx index becf0d3bd..9e22dfd74 100644 --- a/src/frontend/src/features/pages/components/ExportPagesMenuItem.tsx +++ b/src/frontend/src/features/pages/components/ExportPagesMenuItem.tsx @@ -1,16 +1,16 @@ import { MenuItem, ListItemIcon, ListItemText } from '@mui/material'; -import React, { useState } from 'react'; +import { useState, type PropsWithChildren, type FC, type ReactElement } from 'react'; import { type ExportFormat } from '../models'; import ExportDialog from './ExportDialog'; interface ExportPagesMenuItemProps { format: ExportFormat; - icon: React.ReactElement; + icon: ReactElement; isDisabled: boolean; onMenuClose: () => void; } -const ExportPagesMenuItem: React.FC> = ({ +const ExportPagesMenuItem: FC> = ({ children, format, icon, @@ -29,13 +29,13 @@ const ExportPagesMenuItem: React.FC + <> {icon} {children} - + ); }; diff --git a/src/frontend/src/features/pages/components/ImportPagesMenuItem.tsx b/src/frontend/src/features/pages/components/ImportPagesMenuItem.tsx index 773b1441d..0d83d6794 100644 --- a/src/frontend/src/features/pages/components/ImportPagesMenuItem.tsx +++ b/src/frontend/src/features/pages/components/ImportPagesMenuItem.tsx @@ -1,6 +1,6 @@ import PublishIcon from '@mui/icons-material/Publish'; import { MenuItem, ListItemIcon, ListItemText, Box } from '@mui/material'; -import React, { useState } from 'react'; +import { type PropsWithChildren, type FC, useState, type ChangeEvent } from 'react'; import { useImport } from '../hooks/useImport'; import ConfirmImportDialog from './ConfirmImportDialog'; @@ -9,7 +9,7 @@ interface ImportPagesMenuItemProps { onMenuClose: () => void; } -const ImportPagesMenuItem: React.FC> = ({ +const ImportPagesMenuItem: FC> = ({ children, isDisabled, onMenuClose, @@ -22,7 +22,7 @@ const ImportPagesMenuItem: React.FC): void => { + const handleImportFileChange = (event: ChangeEvent): void => { try { const file = event.target.files?.item(0); if (file) { @@ -34,7 +34,7 @@ const ImportPagesMenuItem: React.FC + <> - + ); }; diff --git a/src/frontend/src/features/pages/components/PageContent.tsx b/src/frontend/src/features/pages/components/PageContent.tsx index d0475d948..dc5885b34 100644 --- a/src/frontend/src/features/pages/components/PageContent.tsx +++ b/src/frontend/src/features/pages/components/PageContent.tsx @@ -1,13 +1,12 @@ import { Box, Container } from '@mui/material'; -import type React from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect } from 'react'; import { useAppDispatch, useRouterId } from 'src/hooks'; import { MealsList } from '../../notes/components'; import { getNotes } from '../../notes/thunks'; import { getPageById } from '../thunks'; import PageContentHeader from './PageContentHeader'; -const PageContent: React.FC = () => { +const PageContent: FC = () => { const pageId = useRouterId('id'); const dispatch = useAppDispatch(); diff --git a/src/frontend/src/features/pages/components/PageContentHeader.tsx b/src/frontend/src/features/pages/components/PageContentHeader.tsx index ecf417915..7f962d0bb 100644 --- a/src/frontend/src/features/pages/components/PageContentHeader.tsx +++ b/src/frontend/src/features/pages/components/PageContentHeader.tsx @@ -1,10 +1,10 @@ import { Box, Breadcrumbs, Link, Typography } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { formatDate } from 'src/utils'; import { useAppSelector } from '../../__shared__/hooks'; -const PageContentHeader: React.FC = () => { +const PageContentHeader: FC = () => { const page = useAppSelector(state => state.pages.current); if (!page) { diff --git a/src/frontend/src/features/pages/components/PagesFilter.tsx b/src/frontend/src/features/pages/components/PagesFilter.tsx index 293d58065..70c65697c 100644 --- a/src/frontend/src/features/pages/components/PagesFilter.tsx +++ b/src/frontend/src/features/pages/components/PagesFilter.tsx @@ -1,6 +1,5 @@ import { Box, Button, Paper } from '@mui/material'; -import type React from 'react'; -import { useEffect } from 'react'; +import { type FC, useEffect } from 'react'; import { DatePicker } from 'src/components'; import { useInput } from 'src/hooks'; import { mapToDateInputProps } from 'src/utils/inputMapping'; @@ -9,7 +8,7 @@ import { useFilterStyles } from '../../__shared__/styles'; import { useFilter } from '../hooks'; import { endDateChanged, startDateChanged } from '../slice'; -const PagesFilter: React.FC = () => { +const PagesFilter: FC = () => { const classes = useFilterStyles(); const { initialStartDate, initialEndDate, isChanged, applyToDatePart, reset } = useFilter(); diff --git a/src/frontend/src/features/pages/components/PagesFilterAppliedParams.tsx b/src/frontend/src/features/pages/components/PagesFilterAppliedParams.tsx index 3d19be355..3b5a69b33 100644 --- a/src/frontend/src/features/pages/components/PagesFilterAppliedParams.tsx +++ b/src/frontend/src/features/pages/components/PagesFilterAppliedParams.tsx @@ -2,7 +2,7 @@ import EventIcon from '@mui/icons-material/Event'; import TodayIcon from '@mui/icons-material/Today'; import { Box, Chip, Tooltip } from '@mui/material'; import dateFnsFormat from 'date-fns/format'; -import type React from 'react'; +import { type FC } from 'react'; import { useDispatch } from 'react-redux'; import { useAppSelector } from '../../__shared__/hooks'; import { useFilterAppliedParamsStyles } from '../../__shared__/styles'; @@ -10,7 +10,7 @@ import { endDateChanged, startDateChanged } from '../slice'; const formatDate = (date: string): string => dateFnsFormat(new Date(date), 'dd.MM.yyyy'); -const PagesFilterAppliedParams: React.FC = () => { +const PagesFilterAppliedParams: FC = () => { const classes = useFilterAppliedParamsStyles(); const startDate = useAppSelector(state => state.pages.filter.startDate); diff --git a/src/frontend/src/features/pages/components/PagesTable/PagesTable.tsx b/src/frontend/src/features/pages/components/PagesTable/PagesTable.tsx index 2637f4a29..cfe652ccb 100644 --- a/src/frontend/src/features/pages/components/PagesTable/PagesTable.tsx +++ b/src/frontend/src/features/pages/components/PagesTable/PagesTable.tsx @@ -9,8 +9,7 @@ import { TableSortLabel, Typography, } from '@mui/material'; -import type React from 'react'; -import { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { SortOrder, type Status } from '../../../__shared__/models'; import { type PageItem, type PageItemsFilter } from '../../models'; import PagesTableRow from '../PagesTableRow'; @@ -25,7 +24,7 @@ interface PagesTableProps { onReorder: (order: SortOrder) => void; } -const PagesTable: React.FC = ({ +const PagesTable: FC = ({ pages, selectedPagesCount, filter, diff --git a/src/frontend/src/features/pages/components/PagesTablePagination.tsx b/src/frontend/src/features/pages/components/PagesTablePagination.tsx index ed9500e82..8c913f917 100644 --- a/src/frontend/src/features/pages/components/PagesTablePagination.tsx +++ b/src/frontend/src/features/pages/components/PagesTablePagination.tsx @@ -1,10 +1,10 @@ import { TablePagination } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { useDispatch } from 'react-redux'; import { useAppSelector } from '../../__shared__/hooks'; import { pageNumberChanged, pageSizeChanged } from '../slice'; -const PagesTablePagination: React.FC = () => { +const PagesTablePagination: FC = () => { const pageNumber = useAppSelector(state => state.pages.filter.pageNumber); const pageSize = useAppSelector(state => state.pages.filter.pageSize); const totalPagesCount = useAppSelector(state => state.pages.totalPagesCount); diff --git a/src/frontend/src/features/pages/components/PagesTableRow.tsx b/src/frontend/src/features/pages/components/PagesTableRow.tsx index 8d70dc244..5c5d82623 100644 --- a/src/frontend/src/features/pages/components/PagesTableRow.tsx +++ b/src/frontend/src/features/pages/components/PagesTableRow.tsx @@ -1,7 +1,6 @@ import EditIcon from '@mui/icons-material/Edit'; import { TableRow, TableCell, Checkbox, Tooltip, IconButton, Link } from '@mui/material'; -import type React from 'react'; -import { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { formatDate } from 'src/utils'; import { useAppDispatch, useAppSelector } from '../../__shared__/hooks'; @@ -14,7 +13,7 @@ interface PagesTableRowProps { page: PageItem; } -const PagesTableRow: React.FC = ({ page }: PagesTableRowProps) => { +const PagesTableRow: FC = ({ page }: PagesTableRowProps) => { const pageDate = new Date(page.date); const operationStatus = useAppSelector(state => state.pages.operationStatus); diff --git a/src/frontend/src/features/pages/components/PagesToolbar/PagesToolbar.tsx b/src/frontend/src/features/pages/components/PagesToolbar/PagesToolbar.tsx index ef88f081b..7696b03c8 100644 --- a/src/frontend/src/features/pages/components/PagesToolbar/PagesToolbar.tsx +++ b/src/frontend/src/features/pages/components/PagesToolbar/PagesToolbar.tsx @@ -2,7 +2,7 @@ import AddIcon from '@mui/icons-material/Add'; import DeleteIcon from '@mui/icons-material/Delete'; import FilterListIcon from '@mui/icons-material/FilterList'; import { Box, IconButton, Popover, styled, Toolbar, Tooltip, Typography } from '@mui/material'; -import React, { useEffect, useState } from 'react'; +import { type PropsWithChildren, type FC, useEffect, useState } from 'react'; import { useAppDispatch, usePopover, useAppSelector } from 'src/features/__shared__/hooks'; import { useToolbarStyles } from 'src/features/__shared__/styles'; import { type PageCreateEdit } from 'src/features/pages/models'; @@ -15,9 +15,9 @@ import ShowMoreTableOptions from '../ShowMoreTableOptions'; const StyledTableHeader = styled(Typography)(({ theme }) => ({ ...theme.typography.h2 })); -type PagesToolbarProps = React.PropsWithChildren; +type PagesToolbarProps = PropsWithChildren; -const PagesToolbar: React.FC = ({ children }) => { +const PagesToolbar: FC = ({ children }) => { const classes = useToolbarStyles(); const selectedPageIds = useAppSelector(state => state.pages.selectedPageIds); const operationStatus = useAppSelector(state => state.pages.operationStatus); @@ -78,7 +78,7 @@ const PagesToolbar: React.FC = ({ children }) => { onSubmit={handleDeletePages} /> {selectedPageIds.length > 0 ? ( - + <> {selectedPageIds.length} selected @@ -89,9 +89,9 @@ const PagesToolbar: React.FC = ({ children }) => { - + ) : ( - + <> Pages @@ -115,7 +115,7 @@ const PagesToolbar: React.FC = ({ children }) => { - + )} { - const [anchorEl, setAnchorEl] = React.useState(null); +const ShowMoreTableOptions: FC = () => { + const [anchorEl, setAnchorEl] = useState(null); const isOpened = Boolean(anchorEl); - const handleMenuOpen = (event: React.MouseEvent): void => { + const handleMenuOpen = (event: MouseEvent): void => { setAnchorEl(event.currentTarget); }; @@ -20,7 +20,7 @@ const ShowMoreTableOptions: React.FC = () => { }; return ( - + <> { Export to Google Docs - + ); }; diff --git a/src/frontend/src/features/products/components/CreateProduct.tsx b/src/frontend/src/features/products/components/CreateProduct.tsx index edffbecc4..eb4a5103f 100644 --- a/src/frontend/src/features/products/components/CreateProduct.tsx +++ b/src/frontend/src/features/products/components/CreateProduct.tsx @@ -1,13 +1,13 @@ import AddIcon from '@mui/icons-material/Add'; import { IconButton, Tooltip } from '@mui/material'; -import React, { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { useAppSelector } from 'src/store'; import { productsApi } from '../api'; import { selectProductsQueryArg } from '../selectors'; import { type ProductFormData } from '../types'; import ProductInputDialog from './ProductInputDialog'; -const CreateProduct: React.FC = () => { +const CreateProduct: FC = () => { const [isDialogOpened, setIsDialogOpened] = useState(false); const getProductsQueryArg = useAppSelector(selectProductsQueryArg); const getProductsQuery = productsApi.useGetProductsQuery(getProductsQueryArg); @@ -32,7 +32,7 @@ const CreateProduct: React.FC = () => { }; return ( - + <> { onSubmit={handleDialogSubmit} isLoading={createProductRequest.isLoading} /> - + ); }; diff --git a/src/frontend/src/features/products/components/DeleteProductsDialog.tsx b/src/frontend/src/features/products/components/DeleteProductsDialog.tsx index 7666c7ea5..d7433745b 100644 --- a/src/frontend/src/features/products/components/DeleteProductsDialog.tsx +++ b/src/frontend/src/features/products/components/DeleteProductsDialog.tsx @@ -1,6 +1,5 @@ import { Typography } from '@mui/material'; -import type React from 'react'; -import { useEffect } from 'react'; +import { useEffect, type FC, type Dispatch, type SetStateAction } from 'react'; import { AppButton, AppDialog } from 'src/components'; import { useAppSelector } from 'src/store'; import { productsApi } from '../api'; @@ -8,10 +7,10 @@ import { selectCheckedProductIds } from '../selectors'; interface DeleteProductsDialogProps { isOpened: boolean; - setIsOpened: React.Dispatch>; + setIsOpened: Dispatch>; } -const DeleteProductsDialog: React.FC = ({ +const DeleteProductsDialog: FC = ({ isOpened: isDialogOpened, setIsOpened: setIsDialogOpened, }) => { diff --git a/src/frontend/src/features/products/components/ProductInputDialog.tsx b/src/frontend/src/features/products/components/ProductInputDialog.tsx index 4a10bf201..945cc0c37 100644 --- a/src/frontend/src/features/products/components/ProductInputDialog.tsx +++ b/src/frontend/src/features/products/components/ProductInputDialog.tsx @@ -1,6 +1,5 @@ import { TextField } from '@mui/material'; -import type React from 'react'; -import { useEffect } from 'react'; +import { useEffect, type FC, type Dispatch, type SetStateAction } from 'react'; import { AppButton, AppDialog } from 'src/components'; import { CategorySelect } from 'src/features/categories'; import { useInput } from 'src/hooks'; @@ -18,7 +17,7 @@ import { type ProductFormData } from '../types'; interface ProductInputDialogProps { isOpened: boolean; - setIsOpened: React.Dispatch>; + setIsOpened: Dispatch>; title: string; submitText: string; onSubmit: (product: ProductFormData) => void; @@ -26,7 +25,7 @@ interface ProductInputDialogProps { product?: ProductFormData; } -const ProductInputDialog: React.FC = ({ +const ProductInputDialog: FC = ({ isOpened: isDialogOpened, setIsOpened: setIsDialogOpened, title, diff --git a/src/frontend/src/features/products/components/ProductSelect.tsx b/src/frontend/src/features/products/components/ProductSelect.tsx index 4a50797c1..106ea0824 100644 --- a/src/frontend/src/features/products/components/ProductSelect.tsx +++ b/src/frontend/src/features/products/components/ProductSelect.tsx @@ -1,9 +1,9 @@ -import type React from 'react'; +import { type FC } from 'react'; import { AppSelect } from 'src/components'; import { type SelectOption, type SelectProps } from 'src/types'; import { productsApi } from '../api'; -const ProductSelect: React.FC> = ({ +const ProductSelect: FC> = ({ label, placeholder, value = null, diff --git a/src/frontend/src/features/products/components/ProductsFilter.tsx b/src/frontend/src/features/products/components/ProductsFilter.tsx index 58e1b0ff4..2a2f8106f 100644 --- a/src/frontend/src/features/products/components/ProductsFilter.tsx +++ b/src/frontend/src/features/products/components/ProductsFilter.tsx @@ -1,6 +1,5 @@ import { Box, Button, Paper, TextField } from '@mui/material'; -import type React from 'react'; -import { useEffect, useState } from 'react'; +import { type FC, type FocusEvent, useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import { CategorySelect } from 'src/features/categories'; import { type SelectOption } from 'src/types'; @@ -8,7 +7,7 @@ import { useAppSelector, useValidatedTextInput } from '../../__shared__/hooks'; import { useFilterStyles } from '../../__shared__/styles'; import { filterByCategoryChanged, filterReset, productSearchNameChanged } from '../store'; -const ProductsFilter: React.FC = () => { +const ProductsFilter: FC = () => { const classes = useFilterStyles(); const filterProductName = useAppSelector(state => state.products.filter.productSearchName ?? ''); @@ -32,7 +31,7 @@ const ProductsFilter: React.FC = () => { setCategory(filterCategory); }, [filterCategory]); - const handleProductSearchNameBlur = (event: React.FocusEvent): void => { + const handleProductSearchNameBlur = (event: FocusEvent): void => { dispatch(productSearchNameChanged(event.target.value)); }; diff --git a/src/frontend/src/features/products/components/ProductsFilterAppliedParams.tsx b/src/frontend/src/features/products/components/ProductsFilterAppliedParams.tsx index cbf714367..ae2945602 100644 --- a/src/frontend/src/features/products/components/ProductsFilterAppliedParams.tsx +++ b/src/frontend/src/features/products/components/ProductsFilterAppliedParams.tsx @@ -1,12 +1,12 @@ import CategoryIcon from '@mui/icons-material/Category'; import SearchIcon from '@mui/icons-material/Search'; import { Box, Chip, Tooltip } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { useAppDispatch, useAppSelector } from 'src/store'; import { useFilterAppliedParamsStyles } from '../../__shared__/styles'; import { filterByCategoryChanged, productSearchNameChanged } from '../store'; -const ProductsFilterAppliedParams: React.FC = () => { +const ProductsFilterAppliedParams: FC = () => { const classes = useFilterAppliedParamsStyles(); const productSearchName = useAppSelector(state => state.products.filter.productSearchName); const category = useAppSelector(state => state.products.filter.category); diff --git a/src/frontend/src/features/products/components/ProductsTable/ProductsTable.tsx b/src/frontend/src/features/products/components/ProductsTable/ProductsTable.tsx index c841dc591..4ea25fba7 100644 --- a/src/frontend/src/features/products/components/ProductsTable/ProductsTable.tsx +++ b/src/frontend/src/features/products/components/ProductsTable/ProductsTable.tsx @@ -8,8 +8,7 @@ import { TableRow, Typography, } from '@mui/material'; -import type React from 'react'; -import { type ReactElement } from 'react'; +import { type FC, type ReactElement } from 'react'; import { AppLinearProgress } from 'src/components'; import { type Product } from '../../types'; import ProductsTableRow from '../ProductsTableRow'; @@ -21,7 +20,7 @@ interface ProductsTableProps { onCheckedChange: (products: Product[], newCheckedIds: number[]) => void; } -const ProductsTable: React.FC = ({ +const ProductsTable: FC = ({ products, isLoading, checkedIds, diff --git a/src/frontend/src/features/products/components/ProductsTablePagination.tsx b/src/frontend/src/features/products/components/ProductsTablePagination.tsx index f96c04c14..597db4675 100644 --- a/src/frontend/src/features/products/components/ProductsTablePagination.tsx +++ b/src/frontend/src/features/products/components/ProductsTablePagination.tsx @@ -1,12 +1,12 @@ import { TablePagination } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; import { useDispatch } from 'react-redux'; import { useAppSelector } from '../../__shared__/hooks'; import { productsApi } from '../api'; import { selectProductsQueryArg } from '../selectors'; import { pageNumberChanged, pageSizeChanged } from '../store'; -const ProductsTablePagination: React.FC = () => { +const ProductsTablePagination: FC = () => { const getProductsQueryArg = useAppSelector(selectProductsQueryArg); const getProductsQuery = productsApi.useGetProductsQuery(getProductsQueryArg); const totalProductsCount = getProductsQuery.data?.totalProductsCount ?? 0; diff --git a/src/frontend/src/features/products/components/ProductsTableRow.tsx b/src/frontend/src/features/products/components/ProductsTableRow.tsx index dcde6c817..89145a3fb 100644 --- a/src/frontend/src/features/products/components/ProductsTableRow.tsx +++ b/src/frontend/src/features/products/components/ProductsTableRow.tsx @@ -1,6 +1,6 @@ import EditIcon from '@mui/icons-material/Edit'; import { Checkbox, IconButton, TableCell, TableRow, Tooltip } from '@mui/material'; -import React, { useEffect, useState } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { useAppDispatch, useAppSelector } from '../../__shared__/hooks'; import { productsApi } from '../api'; import { selectCheckedProductIds } from '../selectors'; @@ -13,7 +13,7 @@ interface ProductsTableRowProps { product: Product; } -const ProductsTableRow: React.FC = ({ product }: ProductsTableRowProps) => { +const ProductsTableRow: FC = ({ product }: ProductsTableRowProps) => { const [isEditDialogOpened, setIsEditDialogOpened] = useState(false); const [editProduct, editProductRequest] = productsApi.useEditProductMutation(); const dispatch = useAppDispatch(); @@ -48,7 +48,7 @@ const ProductsTableRow: React.FC = ({ product }: Products }; return ( - + <> = ({ product }: Products isLoading={editProductRequest.isLoading} product={toProductFormData(product)} /> - + ); }; diff --git a/src/frontend/src/features/products/routes/Products.tsx b/src/frontend/src/features/products/routes/Products.tsx index 2be979549..bf82ac5c9 100644 --- a/src/frontend/src/features/products/routes/Products.tsx +++ b/src/frontend/src/features/products/routes/Products.tsx @@ -1,6 +1,6 @@ import { Box, Container, Paper, Typography } from '@mui/material'; import { visuallyHidden } from '@mui/utils'; -import type React from 'react'; +import { type FC } from 'react'; import { useAppDispatch } from 'src/hooks'; import { useAppSelector } from 'src/store'; import { productsApi } from '../api'; @@ -12,7 +12,7 @@ import { selectProductsQueryArg, selectCheckedProductIds } from '../selectors'; import { productsUnchecked, productsChecked } from '../store'; import { type Product } from '../types'; -const Products: React.FC = () => { +const Products: FC = () => { const getProductsQueryArg = useAppSelector(selectProductsQueryArg); const getProductsQuery = productsApi.useGetProductsQuery(getProductsQueryArg); const checkedProductIds = useAppSelector(selectCheckedProductIds); diff --git a/src/frontend/src/routes/NotFound.tsx b/src/frontend/src/routes/NotFound.tsx index 92c1b9cd0..38956b5c9 100644 --- a/src/frontend/src/routes/NotFound.tsx +++ b/src/frontend/src/routes/NotFound.tsx @@ -1,7 +1,7 @@ import { Typography } from '@mui/material'; -import type React from 'react'; +import { type FC } from 'react'; -const NotFound: React.FC = () => { +const NotFound: FC = () => { return There is nothing here; }; diff --git a/src/frontend/src/test-utils/builders/componentBuilder.tsx b/src/frontend/src/test-utils/builders/componentBuilder.tsx index 8fa802cae..a9f9335ae 100644 --- a/src/frontend/src/test-utils/builders/componentBuilder.tsx +++ b/src/frontend/src/test-utils/builders/componentBuilder.tsx @@ -1,25 +1,25 @@ import { StyledEngineProvider, ThemeProvider } from '@mui/material'; import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; -import type React from 'react'; +import { type ReactElement, type ComponentType, type PropsWithChildren } from 'react'; import { Provider } from 'react-redux'; import theme from 'src/theme'; import { createTestStore, type TestStoreBuilder } from './storeBuilder'; export interface TestComponentBuilder { - please: () => React.ReactElement; + please: () => ReactElement; withReduxStore: ( configure?: (builder: TestStoreBuilder) => TestStoreBuilder, ) => TestComponentBuilder; } -type WrapperType = React.ComponentType>; +type WrapperType = ComponentType>; -const createComponentBuilder = (component: React.ReactElement): TestComponentBuilder => { +const createComponentBuilder = (component: ReactElement): TestComponentBuilder => { const wrappers: WrapperType[] = []; const builder: TestComponentBuilder = { - please: (): React.ReactElement => { + please: (): ReactElement => { const ui = wrappers.reduceRight( (element, Wrapper) => {element}, component, diff --git a/src/frontend/src/testing/TestEnvironment.tsx b/src/frontend/src/testing/TestEnvironment.tsx index 0a748ff77..ab6f63812 100644 --- a/src/frontend/src/testing/TestEnvironment.tsx +++ b/src/frontend/src/testing/TestEnvironment.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import { type PropsWithChildren, type FC, useEffect } from 'react'; import { useAuth } from 'src/features/auth'; import { pageSizeChanged } from 'src/features/products/store'; import { type configureAppStore } from 'src/store'; @@ -9,7 +9,7 @@ interface TestEnvironmentProps { pageSizeOverride?: number; } -const TestEnvironment: React.FC> = ({ +const TestEnvironment: FC> = ({ children, store, signOutAfterMilliseconds, @@ -37,7 +37,7 @@ const TestEnvironment: React.FC> = } }, [pageSizeOverride, store]); - return {children}; + return <>{children}; }; export default TestEnvironment; diff --git a/src/frontend/src/testing/render.tsx b/src/frontend/src/testing/render.tsx index 4db7aaa07..fe7d54d15 100644 --- a/src/frontend/src/testing/render.tsx +++ b/src/frontend/src/testing/render.tsx @@ -1,5 +1,5 @@ import { type RenderResult, render as rtlRender } from '@testing-library/react'; -import type React from 'react'; +import { type ReactElement } from 'react'; import AppProvider from 'src/AppProvider'; import { actions as authActions } from 'src/features/auth/store'; import { configureAppStore } from 'src/store'; @@ -26,7 +26,7 @@ function prepareStore( } } -export default function render(ui: React.ReactElement, options?: RenderOptions): RenderResult { +export default function render(ui: ReactElement, options?: RenderOptions): RenderResult { const optionsToApply = { ...defaultOptions, ...options,