Use FC instead of deprecated StatelessComponent

src/NotFound.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import NotFoundPage from "./components/NotFoundPage";
 import useNavigator from "./hooks/useNavigator";
 
-export const NotFound: React.StatelessComponent = () => {
+export const NotFound: React.FC = () => {
   const navigate = useNavigator();
 
   return <NotFoundPage onBack={() => navigate("/")} />;

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -13,9 +13,13 @@ export interface AttributeBulkDeleteDialogProps {
   onClose: () => void;
 }
 
-const AttributeBulkDeleteDialog: React.StatelessComponent<
+const AttributeBulkDeleteDialog: React.FC<AttributeBulkDeleteDialogProps> = ({
-  AttributeBulkDeleteDialogProps
+  confirmButtonState,
-> = ({ confirmButtonState, quantity, onClose, onConfirm, open }) => {
+  quantity,
+  onClose,
+  onConfirm,
+  open
+}) => {
   const intl = useIntl();
 
   return (

src/attributes/components/AttributeList/AttributeList.tsx

@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const numberOfColumns = 6;
 
-const AttributeList: React.StatelessComponent<AttributeListProps> = ({
+const AttributeList: React.FC<AttributeListProps> = ({
   attributes,
   disabled,
   isChecked,

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -30,9 +30,7 @@ export interface AttributeValueEditDialogProps {
   onClose: () => void;
 }
 
-const AttributeValueEditDialog: React.StatelessComponent<
+const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
-  AttributeValueEditDialogProps
-> = ({
   attributeValue,
   confirmButtonState,
   disabled,

src/auth/AuthProvider.tsx

@@ -22,9 +22,9 @@ interface AuthProviderOperationsProps {
     user: User;
   }) => React.ReactNode;
 }
-const AuthProviderOperations: React.StatelessComponent<
+const AuthProviderOperations: React.FC<AuthProviderOperationsProps> = ({
-  AuthProviderOperationsProps
+  children
-> = ({ children }) => {
+}) => {
   return (
     <TypedTokenAuthMutation>
       {(...tokenAuth) => (

src/auth/components/SectionRoute.tsx

@@ -14,7 +14,7 @@ interface SectionRouteProps extends RouteProps {
   permissions?: PermissionEnum[];
 }
 
-export const SectionRoute: React.StatelessComponent<SectionRouteProps> = ({
+export const SectionRoute: React.FC<SectionRouteProps> = ({
   permissions,
   ...props
 }) => {

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -36,9 +36,7 @@ export interface CategoryCreatePageProps {
   onBack();
 }
 
-export const CategoryCreatePage: React.StatelessComponent<
+export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
-  CategoryCreatePageProps
-> = ({
   disabled,
   onSubmit,
   onBack,

src/categories/components/CategoryListPage/CategoryListPage.tsx

@@ -24,7 +24,7 @@ export interface CategoryTableProps
   categories: CategoryFragment[];
 }
 
-export const CategoryListPage: React.StatelessComponent<CategoryTableProps> = ({
+export const CategoryListPage: React.FC<CategoryTableProps> = ({
   categories,
   currentTab,
   disabled,

src/categories/components/CategoryProducts/CategoryProducts.tsx

@@ -13,9 +13,7 @@ interface CategoryProductsProps extends PageListProps, ListActions {
   categoryName: string;
 }
 
-export const CategoryProducts: React.StatelessComponent<
+export const CategoryProducts: React.FC<CategoryProductsProps> = ({
-  CategoryProductsProps
-> = ({
   products,
   disabled,
   pageInfo,

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -70,9 +70,7 @@ export interface CategoryUpdatePageProps
 const CategoriesTab = Tab(CategoryPageTab.categories);
 const ProductsTab = Tab(CategoryPageTab.products);
 
-export const CategoryUpdatePage: React.StatelessComponent<
+export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
-  CategoryUpdatePageProps
-> = ({
   changeTab,
   currentTab,
   category,

src/categories/index.tsx

@@ -19,7 +19,7 @@ import CategoryListComponent from "./views/CategoryList";
 interface CategoryDetailsRouteParams {
   id: string;
 }
-const CategoryDetails: React.StatelessComponent<
+const CategoryDetails: React.FC<
   RouteComponentProps<CategoryDetailsRouteParams>
 > = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
@@ -38,7 +38,7 @@ const CategoryDetails: React.StatelessComponent<
 interface CategoryCreateRouteParams {
   id: string;
 }
-const CategoryCreate: React.StatelessComponent<
+const CategoryCreate: React.FC<
   RouteComponentProps<CategoryCreateRouteParams>
 > = ({ match }) => {
   return (
@@ -50,9 +50,7 @@ const CategoryCreate: React.StatelessComponent<
   );
 };
 
-const CategoryList: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const CategoryList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: CategoryListUrlQueryParams = qs;
   return <CategoryListComponent params={params} />;

src/categories/views/CategoryCreate.tsx

@@ -14,9 +14,9 @@ interface CategoryCreateViewProps {
   parentId: string;
 }
 
-export const CategoryCreateView: React.StatelessComponent<
+export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
-  CategoryCreateViewProps
+  parentId
-> = ({ parentId }) => {
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/categories/views/CategoryDetails.tsx

@@ -51,9 +51,10 @@ export function getActiveTab(tabName: string): CategoryPageTab {
     : CategoryPageTab.categories;
 }
 
-export const CategoryDetails: React.StatelessComponent<
+export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
-  CategoryDetailsProps
+  id,
-> = ({ id, params }) => {
+  params
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/categories/views/CategoryList/CategoryList.tsx

@@ -42,9 +42,7 @@ interface CategoryListProps {
   params: CategoryListUrlQueryParams;
 }
 
-export const CategoryList: React.StatelessComponent<CategoryListProps> = ({
+export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const paginate = usePaginator();
   const { isSelected, listElements, toggle, toggleAll, reset } = useBulkActions(

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -57,9 +57,7 @@ const initialForm: CollectionCreatePageFormData = {
   seoTitle: ""
 };
 
-const CollectionCreatePage: React.StatelessComponent<
+const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
-  CollectionCreatePageProps
-> = ({
   disabled,
   errors,
   saveButtonBarState,

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -47,9 +47,7 @@ export interface CollectionDetailsPageProps extends PageListProps, ListActions {
   onSubmit: (data: CollectionDetailsPageFormData) => void;
 }
 
-const CollectionDetailsPage: React.StatelessComponent<
+const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
-  CollectionDetailsPageProps
-> = ({
   collection,
   disabled,
   isFeatured,

src/collections/components/CollectionListPage/CollectionListPage.tsx

@@ -24,7 +24,7 @@ export interface CollectionListPageProps
   collections: CollectionList_collections_edges_node[];
 }
 
-const CollectionListPage: React.StatelessComponent<CollectionListPageProps> = ({
+const CollectionListPage: React.FC<CollectionListPageProps> = ({
   currentTab,
   disabled,
   initialSearch,

src/collections/containers/CollectionOperations.tsx

@@ -59,9 +59,13 @@ interface CollectionUpdateOperationsProps {
   onRemove: (data: RemoveCollection) => void;
 }
 
-const CollectionOperations: React.StatelessComponent<
+const CollectionOperations: React.FC<CollectionUpdateOperationsProps> = ({
-  CollectionUpdateOperationsProps
+  children,
-> = ({ children, onUpdate, onProductAssign, onProductUnassign, onRemove }) => (
+  onUpdate,
+  onProductAssign,
+  onProductUnassign,
+  onRemove
+}) => (
   <TypedCollectionUpdateMutation onCompleted={onUpdate}>
     {(...updateCollection) => (
       <TypedCollectionRemoveMutation onCompleted={onRemove}>

src/collections/index.tsx

@@ -16,9 +16,7 @@ import CollectionCreate from "./views/CollectionCreate";
 import CollectionDetailsView from "./views/CollectionDetails";
 import CollectionListView from "./views/CollectionList";
 
-const CollectionList: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const CollectionList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: CollectionListUrlQueryParams = qs;
   return <CollectionListView params={params} />;
@@ -27,7 +25,7 @@ const CollectionList: React.StatelessComponent<RouteComponentProps<{}>> = ({
 interface CollectionDetailsRouteProps {
   id: string;
 }
-const CollectionDetails: React.StatelessComponent<
+const CollectionDetails: React.FC<
   RouteComponentProps<CollectionDetailsRouteProps>
 > = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));

src/collections/views/CollectionDetails.tsx

@@ -39,9 +39,10 @@ interface CollectionDetailsProps {
   params: CollectionUrlQueryParams;
 }
 
-export const CollectionDetails: React.StatelessComponent<
+export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
-  CollectionDetailsProps
+  id,
-> = ({ id, params }) => {
+  params
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(

src/collections/views/CollectionList/CollectionList.tsx

@@ -49,9 +49,7 @@ interface CollectionListProps {
   params: CollectionListUrlQueryParams;
 }
 
-export const CollectionList: React.StatelessComponent<CollectionListProps> = ({
+export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/components/AccountStatus/AccountStatus.tsx

@@ -16,7 +16,7 @@ interface StaffStatusProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const StaffStatus: React.StatelessComponent<StaffStatusProps> = ({
+const StaffStatus: React.FC<StaffStatusProps> = ({
   data,
   disabled,
   label,

src/components/AddressFormatter/AddressFormatter.tsx

@@ -8,9 +8,7 @@ interface AddressFormatterProps {
   address?: AddressType;
 }
 
-const AddressFormatter: React.StatelessComponent<AddressFormatterProps> = ({
+const AddressFormatter: React.FC<AddressFormatterProps> = ({ address }) => {
-  address
-}) => {
   if (!address) {
     return <Skeleton />;
   }

src/components/AppProgress/index.tsx

@@ -9,9 +9,7 @@ export const AppProgressContext = React.createContext<IAppProgressContext>(
   undefined
 );
 
-export const AppProgressProvider: React.StatelessComponent<{}> = ({
+export const AppProgressProvider: React.FC<{}> = ({ children }) => {
-  children
-}) => {
   const [isProgress, setProgressState] = React.useState(false);
 
   return (

src/components/ControlledCheckbox.tsx

@@ -11,9 +11,13 @@ interface ControlledCheckboxProps {
   onChange(event: any);
 }
 
-export const ControlledCheckbox: React.StatelessComponent<
+export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
-  ControlledCheckboxProps
+  checked,
-> = ({ checked, disabled, name, label, onChange }) => (
+  disabled,
+  name,
+  label,
+  onChange
+}) => (
   <FormControlLabel
     disabled={disabled}
     control={

src/components/Date/DateTime.tsx

@@ -12,10 +12,7 @@ interface DateTimeProps {
   plain?: boolean;
 }
 
-export const DateTime: React.StatelessComponent<DateTimeProps> = ({
+export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
-  date,
-  plain
-}) => {
   const getTitle = (value: string, locale?: string, tz?: string) => {
     let date = moment(value).locale(locale);
     if (tz !== undefined) {

src/components/DebounceForm.tsx

@@ -3,14 +3,12 @@ import Debounce from "./Debounce";
 
 export interface DebounceFormProps {
   change: (event: React.ChangeEvent<any>, cb?: () => void) => void;
-  children: ((
+  children: (props: (event: React.ChangeEvent<any>) => void) => React.ReactNode;
-    props: (event: React.ChangeEvent<any>) => void
-  ) => React.ReactNode);
   submit: (event: React.FormEvent<any>) => void;
   time?: number;
 }
 
-export const DebounceForm: React.StatelessComponent<DebounceFormProps> = ({
+export const DebounceForm: React.FC<DebounceFormProps> = ({
   change,
   children,
   submit,

src/components/ErrorMessageCard/ErrorMessageCard.tsx

@@ -7,9 +7,7 @@ interface ErrorMessageCardProps {
   message: string;
 }
 
-const ErrorMessageCard: React.StatelessComponent<ErrorMessageCardProps> = ({
+const ErrorMessageCard: React.FC<ErrorMessageCardProps> = ({ message }) => (
-  message
-}) => (
   <Card>
     <CardContent>
       <Typography variant="h5" component="h2">

src/components/FilterCard/FilterCard.tsx

@@ -10,10 +10,7 @@ export interface FilterCardProps {
   handleClear();
 }
 
-const FilterCard: React.StatelessComponent<FilterCardProps> = ({
+const FilterCard: React.FC<FilterCardProps> = ({ children, handleClear }) => {
-  children,
-  handleClear
-}) => {
   const intl = useIntl();
 
   return (

src/components/Money/Money.tsx

@@ -10,7 +10,7 @@ export interface MoneyProps {
   money: IMoney;
 }
 
-export const Money: React.StatelessComponent<MoneyProps> = ({ money }) => (
+export const Money: React.FC<MoneyProps> = ({ money }) => (
   <LocaleConsumer>
     {({ locale }) => {
       return money.amount.toLocaleString(locale, {

src/components/MoneyRange/MoneyRange.tsx

@@ -15,10 +15,7 @@ const formatMoney = (money: IMoney, locale: string) =>
     style: "currency"
   });
 
-export const MoneyRange: React.StatelessComponent<MoneyRangeProps> = ({
+export const MoneyRange: React.FC<MoneyRangeProps> = ({ from, to }) => {
-  from,
-  to
-}) => {
   const intl = useIntl();
 
   return (

src/components/Percent/Percent.tsx

@@ -6,7 +6,7 @@ interface PercentProps {
   amount: number;
 }
 
-const Percent: React.StatelessComponent<PercentProps> = ({ amount }) => (
+const Percent: React.FC<PercentProps> = ({ amount }) => (
   <LocaleConsumer>
     {({ locale }) => {
       return (amount / 100).toLocaleString(locale, {

src/components/Weight/Weight.tsx

@@ -9,7 +9,7 @@ export interface WeightProps {
   weight: Weight;
 }
 
-const Weight: React.StatelessComponent<WeightProps> = ({ weight }) => (
+const Weight: React.FC<WeightProps> = ({ weight }) => (
   <FormattedMessage
     defaultMessage="{value} {unit}"
     description="weight"

src/components/WindowTitle/index.tsx

@@ -7,9 +7,7 @@ interface WindowTitleProps {
   title: string;
 }
 
-export const WindowTitle: React.StatelessComponent<WindowTitleProps> = ({
+export const WindowTitle: React.FC<WindowTitleProps> = ({ title }) => {
-  title
-}) => {
   const shop = useShop();
 
   return shop === undefined || !title ? null : (

src/customers/components/CustomerCreateNote/CustomerCreateNote.tsx

@@ -19,7 +19,7 @@ export interface CustomerCreateNoteProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const CustomerCreateNote: React.StatelessComponent<CustomerCreateNoteProps> = ({
+const CustomerCreateNote: React.FC<CustomerCreateNoteProps> = ({
   data,
   disabled,
   errors,

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -52,7 +52,7 @@ export interface CustomerCreatePageProps {
   onSubmit: (data: CustomerCreatePageFormData) => void;
 }
 
-const CustomerCreatePage: React.StatelessComponent<CustomerCreatePageProps> = ({
+const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
   countries,
   disabled,
   errors,

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -39,9 +39,7 @@ export interface CustomerDetailsPageProps {
   onDelete: () => void;
 }
 
-const CustomerDetailsPage: React.StatelessComponent<
+const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
-  CustomerDetailsPageProps
-> = ({
   customer,
   disabled,
   errors,

src/customers/components/CustomerListPage/CustomerListPage.tsx

@@ -24,7 +24,7 @@ export interface CustomerListPageProps
   customers: ListCustomers_customers_edges_node[];
 }
 
-const CustomerListPage: React.StatelessComponent<CustomerListPageProps> = ({
+const CustomerListPage: React.FC<CustomerListPageProps> = ({
   currentTab,
   customers,
   disabled,

src/customers/index.tsx

@@ -19,9 +19,7 @@ import CustomerCreateView from "./views/CustomerCreate";
 import CustomerDetailsViewComponent from "./views/CustomerDetails";
 import CustomerListViewComponent from "./views/CustomerList";
 
-const CustomerListView: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const CustomerListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: CustomerListUrlQueryParams = qs;
   return <CustomerListViewComponent params={params} />;
@@ -30,7 +28,7 @@ const CustomerListView: React.StatelessComponent<RouteComponentProps<{}>> = ({
 interface CustomerDetailsRouteParams {
   id: string;
 }
-const CustomerDetailsView: React.StatelessComponent<
+const CustomerDetailsView: React.FC<
   RouteComponentProps<CustomerDetailsRouteParams>
 > = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1));
@@ -47,7 +45,7 @@ const CustomerDetailsView: React.StatelessComponent<
 interface CustomerAddressesRouteParams {
   id: string;
 }
-const CustomerAddressesView: React.StatelessComponent<
+const CustomerAddressesView: React.FC<
   RouteComponentProps<CustomerAddressesRouteParams>
 > = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
@@ -61,7 +59,7 @@ const CustomerAddressesView: React.StatelessComponent<
   );
 };
 
-export const CustomerSection: React.StatelessComponent<{}> = () => {
+export const CustomerSection: React.FC<{}> = () => {
   const intl = useIntl();
 
   return (

src/customers/views/CustomerCreate.tsx

@@ -11,7 +11,7 @@ import { TypedCustomerCreateDataQuery } from "../queries";
 import { CreateCustomer } from "../types/CreateCustomer";
 import { customerListUrl, customerUrl } from "../urls";
 
-export const CustomerCreate: React.StatelessComponent<{}> = () => {
+export const CustomerCreate: React.FC<{}> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/customers/views/CustomerDetails.tsx

@@ -29,9 +29,10 @@ interface CustomerDetailsViewProps {
   params: CustomerUrlQueryParams;
 }
 
-export const CustomerDetailsView: React.StatelessComponent<
+export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
-  CustomerDetailsViewProps
+  id,
-> = ({ id, params }) => {
+  params
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/customers/views/CustomerList/CustomerList.tsx

@@ -44,9 +44,7 @@ interface CustomerListProps {
   params: CustomerListUrlQueryParams;
 }
 
-export const CustomerList: React.StatelessComponent<CustomerListProps> = ({
+export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -36,7 +36,7 @@ export interface SaleCreatePageProps {
   onSubmit: (data: FormData) => void;
 }
 
-const SaleCreatePage: React.StatelessComponent<SaleCreatePageProps> = ({
+const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
   defaultCurrency,
   disabled,
   errors,

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -77,7 +77,7 @@ const CategoriesTab = Tab(SaleDetailsPageTab.categories);
 const CollectionsTab = Tab(SaleDetailsPageTab.collections);
 const ProductsTab = Tab(SaleDetailsPageTab.products);
 
-const SaleDetailsPage: React.StatelessComponent<SaleDetailsPageProps> = ({
+const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   activeTab,
   defaultCurrency,
   disabled,

src/discounts/components/SaleListPage/SaleListPage.tsx

@@ -25,7 +25,7 @@ export interface SaleListPageProps
   sales: SaleList_sales_edges_node[];
 }
 
-const SaleListPage: React.StatelessComponent<SaleListPageProps> = ({
+const SaleListPage: React.FC<SaleListPageProps> = ({
   currentTab,
   initialSearch,
   onAdd,

src/discounts/components/SaleSummary/SaleSummary.tsx

@@ -22,10 +22,7 @@ export interface SaleSummaryProps {
   sale: SaleDetails_sale;
 }
 
-const SaleSummary: React.StatelessComponent<SaleSummaryProps> = ({
+const SaleSummary: React.FC<SaleSummaryProps> = ({ defaultCurrency, sale }) => {
-  defaultCurrency,
-  sale
-}) => {
   const intl = useIntl();
 
   return (

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -51,7 +51,7 @@ export interface VoucherCreatePageProps {
   onSubmit: (data: FormData) => void;
 }
 
-const VoucherCreatePage: React.StatelessComponent<VoucherCreatePageProps> = ({
+const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
   defaultCurrency,
   disabled,
   errors,

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -96,7 +96,7 @@ const CategoriesTab = Tab(VoucherDetailsPageTab.categories);
 const CollectionsTab = Tab(VoucherDetailsPageTab.collections);
 const ProductsTab = Tab(VoucherDetailsPageTab.products);
 
-const VoucherDetailsPage: React.StatelessComponent<VoucherDetailsPageProps> = ({
+const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   activeTab,
   defaultCurrency,
   disabled,

src/discounts/components/VoucherListPage/VoucherListPage.tsx

@@ -25,7 +25,7 @@ export interface VoucherListPageProps
   vouchers: VoucherList_vouchers_edges_node[];
 }
 
-const VoucherListPage: React.StatelessComponent<VoucherListPageProps> = ({
+const VoucherListPage: React.FC<VoucherListPageProps> = ({
   currentTab,
   initialSearch,
   onAdd,

src/discounts/components/VoucherSummary/VoucherSummary.tsx

@@ -23,7 +23,7 @@ export interface VoucherSummaryProps {
   voucher: VoucherDetails_voucher;
 }
 
-const VoucherSummary: React.StatelessComponent<VoucherSummaryProps> = ({
+const VoucherSummary: React.FC<VoucherSummaryProps> = ({
   defaultCurrency,
   voucher
 }) => {

src/discounts/index.tsx

@@ -26,17 +26,16 @@ import VoucherCreateView from "./views/VoucherCreate";
 import VoucherDetailsViewComponent from "./views/VoucherDetails";
 import VoucherListViewComponent from "./views/VoucherList";
 
-const SaleListView: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const SaleListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: SaleListUrlQueryParams = qs;
   return <SaleListViewComponent params={params} />;
 };
 
-const SaleDetailsView: React.StatelessComponent<
+const SaleDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
-  RouteComponentProps<{ id: string }>
+  match,
-> = ({ match, location }) => {
+  location
+}) => {
   const { activeTab, ...qs } = parseQs(location.search.substr(1));
   const params: SaleUrlQueryParams = {
     ...qs,
@@ -50,17 +49,16 @@ const SaleDetailsView: React.StatelessComponent<
   );
 };
 
-const VoucherListView: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const VoucherListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: VoucherListUrlQueryParams = qs;
   return <VoucherListViewComponent params={params} />;
 };
 
-const VoucherDetailsView: React.StatelessComponent<
+const VoucherDetailsView: React.FC<RouteComponentProps<{ id: string }>> = ({
-  RouteComponentProps<{ id: string }>
+  match,
-> = ({ match, location }) => {
+  location
+}) => {
   const { activeTab, ...qs } = parseQs(location.search.substr(1));
   const params: VoucherUrlQueryParams = {
     ...qs,
@@ -74,7 +72,7 @@ const VoucherDetailsView: React.StatelessComponent<
   );
 };
 
-export const DiscountSection: React.StatelessComponent<{}> = () => {
+export const DiscountSection: React.FC<{}> = () => {
   const intl = useIntl();
 
   return (

src/discounts/views/SaleCreate.tsx

@@ -19,7 +19,7 @@ function discountValueTypeEnum(type: SaleType): DiscountValueTypeEnum {
     : DiscountValueTypeEnum.PERCENTAGE;
 }
 
-export const SaleDetails: React.StatelessComponent = () => {
+export const SaleDetails: React.FC = () => {
   const navigate = useNavigator();
   const pushMessage = useNotifier();
   const shop = useShop();

src/discounts/views/SaleDetails.tsx

@@ -57,10 +57,7 @@ function discountValueTypeEnum(type: SaleType): DiscountValueTypeEnum {
     : DiscountValueTypeEnum.PERCENTAGE;
 }
 
-export const SaleDetails: React.StatelessComponent<SaleDetailsProps> = ({
+export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
-  id,
-  params
-}) => {
   const navigate = useNavigator();
   const paginate = usePaginator();
   const notify = useNotifier();

src/discounts/views/SaleList/SaleList.tsx

@@ -46,9 +46,7 @@ interface SaleListProps {
   params: SaleListUrlQueryParams;
 }
 
-export const SaleList: React.StatelessComponent<SaleListProps> = ({
+export const SaleList: React.FC<SaleListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/discounts/views/VoucherCreate.tsx

@@ -17,7 +17,7 @@ import { RequirementsPicker } from "../types";
 import { VoucherCreate } from "../types/VoucherCreate";
 import { voucherListUrl, voucherUrl } from "../urls";
 
-export const VoucherDetails: React.StatelessComponent = () => {
+export const VoucherDetails: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const shop = useShop();

src/discounts/views/VoucherDetails.tsx

@@ -56,7 +56,7 @@ interface VoucherDetailsProps {
   params: VoucherUrlQueryParams;
 }
 
-export const VoucherDetails: React.StatelessComponent<VoucherDetailsProps> = ({
+export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   id,
   params
 }) => {

src/discounts/views/VoucherList/VoucherList.tsx

@@ -46,9 +46,7 @@ interface VoucherListProps {
   params: VoucherListUrlQueryParams;
 }
 
-export const VoucherList: React.StatelessComponent<VoucherListProps> = ({
+export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/home/components/HomeScreen.tsx

@@ -14,9 +14,7 @@ interface HomeScreenProps {
   };
 }
 
-export const HomeScreen: React.StatelessComponent<HomeScreenProps> = ({
+export const HomeScreen: React.FC<HomeScreenProps> = ({ user }) => {
-  user
-}) => {
   const intl = useIntl();
 
   return (

src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx

@@ -37,7 +37,7 @@ export interface MenuDetailsPageProps {
   onSubmit: (data: MenuDetailsSubmitData) => Promise<boolean>;
 }
 
-const MenuDetailsPage: React.StatelessComponent<MenuDetailsPageProps> = ({
+const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
   disabled,
   menu,
   saveButtonState,

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -73,7 +73,7 @@ function getDisplayValue(menu: IMenu, value: string): string {
   return getMenuItemByValue(menu, value).label.toString();
 }
 
-const MenuItemDialog: React.StatelessComponent<MenuItemDialogProps> = ({
+const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
   confirmButtonState,
   disabled,
   errors: apiErrors,

src/navigation/components/MenuListPage/MenuListPage.tsx

@@ -17,7 +17,7 @@ export interface MenuListPageProps extends PageListProps, ListActions {
   onDelete: (id: string) => void;
 }
 
-const MenuListPage: React.StatelessComponent<MenuListPageProps> = ({
+const MenuListPage: React.FC<MenuListPageProps> = ({
   disabled,
   onAdd,
   onBack,

src/navigation/components/MenuProperties/MenuProperties.tsx

@@ -14,7 +14,7 @@ export interface MenuPropertiesProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const MenuProperties: React.StatelessComponent<MenuPropertiesProps> = ({
+const MenuProperties: React.FC<MenuPropertiesProps> = ({
   data,
   disabled,
   onChange

src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx

@@ -14,9 +14,13 @@ export interface OrderBulkCancelDialogProps {
   onConfirm: (restock: boolean) => void;
 }
 
-const OrderBulkCancelDialog: React.StatelessComponent<
+const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({
-  OrderBulkCancelDialogProps
+  confirmButtonState,
-> = ({ confirmButtonState, numberOfOrders, open, onClose, onConfirm }) => {
+  numberOfOrders,
+  open,
+  onClose,
+  onConfirm
+}) => {
   const intl = useIntl();
   const [restock, setRestock] = React.useState(true);
 

src/orders/components/OrderCustomerNote/OrderCustomerNote.tsx

@@ -11,9 +11,9 @@ interface OrderCustomerNoteProps {
   note: string;
 }
 
-export const OrderCustomerNote: React.StatelessComponent<
+export const OrderCustomerNote: React.FC<OrderCustomerNoteProps> = ({
-  OrderCustomerNoteProps
+  note
-> = ({ note }) => {
+}) => {
   const intl = useIntl();
 
   return (

src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx

@@ -13,9 +13,13 @@ export interface OrderDraftCancelDialogProps {
   orderNumber: string;
 }
 
-const OrderDraftCancelDialog: React.StatelessComponent<
+const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
-  OrderDraftCancelDialogProps
+  confirmButtonState,
-> = ({ confirmButtonState, onClose, onConfirm, open, orderNumber }) => {
+  onClose,
+  onConfirm,
+  open,
+  orderNumber
+}) => {
   const intl = useIntl();
 
   return (

src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx

@@ -23,7 +23,7 @@ interface OrderDraftDetailsProps {
   onShippingMethodEdit: () => void;
 }
 
-const OrderDraftDetails: React.StatelessComponent<OrderDraftDetailsProps> = ({
+const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
   order,
   onOrderLineAdd,
   onOrderLineChange,

src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.tsx

@@ -46,9 +46,7 @@ function translateWarnings(
   };
 }
 
-const OrderDraftFinalizeDialog: React.StatelessComponent<
+const OrderDraftFinalizeDialog: React.FC<OrderDraftFinalizeDialogProps> = ({
-  OrderDraftFinalizeDialogProps
-> = ({
   confirmButtonState,
   open,
   warnings,

src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx

@@ -25,7 +25,7 @@ export interface OrderDraftListPageProps
   orders: OrderDraftList_draftOrders_edges_node[];
 }
 
-const OrderDraftListPage: React.StatelessComponent<OrderDraftListPageProps> = ({
+const OrderDraftListPage: React.FC<OrderDraftListPageProps> = ({
   currentTab,
   disabled,
   initialSearch,

src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx

@@ -25,7 +25,7 @@ interface OrderFulfillmentTrackingDialogProps {
   onConfirm(data: FormData);
 }
 
-const OrderFulfillmentTrackingDialog: React.StatelessComponent<
+const OrderFulfillmentTrackingDialog: React.FC<
   OrderFulfillmentTrackingDialogProps
 > = ({ confirmButtonState, open, trackingNumber, onConfirm, onClose }) => {
   const intl = useIntl();

src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx

@@ -12,9 +12,12 @@ export interface OrderMarkAsPaidDialogProps {
   onConfirm: () => void;
 }
 
-const OrderMarkAsPaidDialog: React.StatelessComponent<
+const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
-  OrderMarkAsPaidDialogProps
+  confirmButtonState,
-> = ({ confirmButtonState, onClose, onConfirm, open }) => {
+  onClose,
+  onConfirm,
+  open
+}) => {
   const intl = useIntl();
 
   return (

src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx

@@ -26,7 +26,7 @@ interface OrderPaymentDialogProps {
   onSubmit: (data: FormData) => void;
 }
 
-const OrderPaymentDialog: React.StatelessComponent<OrderPaymentDialogProps> = ({
+const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
   confirmButtonState,
   open,
   initial,

src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx

@@ -19,9 +19,12 @@ interface OrderPaymentVoidDialogProps {
   onConfirm?();
 }
 
-const OrderPaymentVoidDialog: React.StatelessComponent<
+const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
-  OrderPaymentVoidDialogProps
+  confirmButtonState,
-> = ({ confirmButtonState, open, onConfirm, onClose }) => (
+  open,
+  onConfirm,
+  onClose
+}) => (
   <Dialog onClose={onClose} open={open}>
     <DialogTitle>
       <FormattedMessage

src/orders/containers/OrderOperations.tsx

@@ -157,7 +157,7 @@ interface OrderOperationsProps {
   onOrderLineUpdate: (data: OrderLineUpdate) => void;
 }
 
-const OrderOperations: React.StatelessComponent<OrderOperationsProps> = ({
+const OrderOperations: React.FC<OrderOperationsProps> = ({
   children,
   onDraftUpdate,
   onOrderFulfillmentCreate,

src/orders/index.tsx

@@ -17,22 +17,18 @@ import OrderDetailsComponent from "./views/OrderDetails";
 import OrderDraftListComponent from "./views/OrderDraftList";
 import OrderListComponent from "./views/OrderList";
 
-const OrderList: React.StatelessComponent<RouteComponentProps<any>> = ({
+const OrderList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: OrderListUrlQueryParams = qs;
   return <OrderListComponent params={params} />;
 };
-const OrderDraftList: React.StatelessComponent<RouteComponentProps<any>> = ({
+const OrderDraftList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: OrderDraftListUrlQueryParams = qs;
   return <OrderDraftListComponent params={params} />;
 };
 
-const OrderDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
+const OrderDetails: React.FC<RouteComponentProps<any>> = ({
   location,
   match
 }) => {

src/orders/views/OrderDetails/OrderDetailsMessages.tsx

@@ -47,9 +47,9 @@ interface OrderDetailsMessages {
   }) => React.ReactElement;
 }
 
-export const OrderDetailsMessages: React.StatelessComponent<
+export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
-  OrderDetailsMessages
+  children
-> = ({ children }) => {
+}) => {
   const navigate = useNavigator();
   const pushMessage = useNotifier();
   const intl = useIntl();

src/orders/views/OrderDetails/index.tsx

@@ -76,10 +76,7 @@ interface OrderDetailsProps {
   params: OrderUrlQueryParams;
 }
 
-export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = ({
+export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
-  id,
-  params
-}) => {
   const navigate = useNavigator();
   const { user } = useUser();
 

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -46,9 +46,7 @@ interface OrderDraftListProps {
   params: OrderDraftListUrlQueryParams;
 }
 
-export const OrderDraftList: React.StatelessComponent<OrderDraftListProps> = ({
+export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/orders/views/OrderList/OrderList.tsx

@@ -48,9 +48,7 @@ interface OrderListProps {
   params: OrderListUrlQueryParams;
 }
 
-export const OrderList: React.StatelessComponent<OrderListProps> = ({
+export const OrderList: React.FC<OrderListProps> = ({ params }) => {
-  params
-}) => {
   const formatDate = useDateLocalize();
   const navigate = useNavigator();
   const notify = useNotifier();

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -45,7 +45,7 @@ export interface PageDetailsPageProps {
   onSubmit: (data: FormData) => void;
 }
 
-const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
+const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
   disabled,
   errors,
   page,

src/pages/components/PageListPage/PageListPage.tsx

@@ -16,7 +16,7 @@ export interface PageListPageProps extends PageListProps, ListActions {
   onBack: () => void;
 }
 
-const PageListPage: React.StatelessComponent<PageListPageProps> = ({
+const PageListPage: React.FC<PageListPageProps> = ({
   disabled,
   settings,
   onAdd,

src/pages/components/PageSlug/PageSlug.tsx

@@ -15,7 +15,7 @@ export interface PageSlugProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const PageSlug: React.StatelessComponent<PageSlugProps> = ({
+const PageSlug: React.FC<PageSlugProps> = ({
   data,
   disabled,
   errors,

src/pages/index.tsx

@@ -16,17 +16,13 @@ import PageCreate from "./views/PageCreate";
 import PageDetailsComponent from "./views/PageDetails";
 import PageListComponent from "./views/PageList";
 
-const PageList: React.StatelessComponent<RouteComponentProps<any>> = ({
+const PageList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: PageListUrlQueryParams = qs;
   return <PageListComponent params={params} />;
 };
 
-const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
+const PageDetails: React.FC<RouteComponentProps<any>> = ({ match }) => {
-  match
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: PageUrlQueryParams = qs;
 

src/pages/views/PageCreate.tsx

@@ -14,7 +14,7 @@ export interface PageCreateProps {
   id: string;
 }
 
-export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
+export const PageCreate: React.FC<PageCreateProps> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/pages/views/PageDetails.tsx

@@ -37,10 +37,7 @@ const createPageInput = (data: FormData): PageInput => {
   };
 };
 
-export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
+export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
-  id,
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/pages/views/PageList.tsx

@@ -33,9 +33,7 @@ interface PageListProps {
   params: PageListUrlQueryParams;
 }
 
-export const PageList: React.StatelessComponent<PageListProps> = ({
+export const PageList: React.FC<PageListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const paginate = usePaginator();

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
+const PluginInfo: React.FC<PluginInfoProps> = ({
   data,
   description,
   name,

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
+const PluginSettings: React.FC<PluginSettingsProps> = ({
   data,
   disabled,
   errors,

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -31,7 +31,7 @@ export interface PluginsDetailsPageProps {
   onSubmit: (data: FormData) => void;
 }
 
-const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
+const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
   disabled,
   errors,
   plugin,

src/plugins/components/PluginsListPage/PluginsListPage.tsx

@@ -14,7 +14,7 @@ export interface PluginsListPageProps extends PageListProps {
   onBack: () => void;
 }
 
-const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
+const PluginsListPage: React.FC<PluginsListPageProps> = ({
   disabled,
   settings,
   onBack,

src/plugins/index.tsx

@@ -13,17 +13,13 @@ import {
 import PluginsDetailsComponent from "./views/PluginsDetails";
 import PluginsListComponent from "./views/PluginsList";
 
-const PluginList: React.StatelessComponent<RouteComponentProps<any>> = ({
+const PluginList: React.FC<RouteComponentProps<any>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: PluginsListUrlQueryParams = qs;
   return <PluginsListComponent params={params} />;
 };
 
-const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
+const PageDetails: React.FC<RouteComponentProps<any>> = ({ match }) => {
-  match
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: PluginsListUrlQueryParams = qs;
 

src/plugins/views/PluginsDetails.tsx

@@ -15,9 +15,7 @@ export interface PluginsDetailsProps {
   params: PluginsListUrlQueryParams;
 }
 
-export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
+export const PluginsDetails: React.FC<PluginsDetailsProps> = ({ id }) => {
-  id
-}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();

src/plugins/views/PluginsList.tsx

@@ -16,9 +16,7 @@ interface PluginsListProps {
   params: PluginsListUrlQueryParams;
 }
 
-export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
+export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const paginate = usePaginator();
   const { updateListSettings, settings } = useListSettings(

src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx

@@ -37,7 +37,7 @@ export interface ProductTypeAttributeEditDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const ProductTypeAttributeEditDialog: React.StatelessComponent<
+const ProductTypeAttributeEditDialog: React.FC<
   ProductTypeAttributeEditDialogProps
 > = ({ disabled, errors, name, opened, title, values, onClose, onConfirm }) => {
   const intl = useIntl();

src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx

@@ -56,9 +56,7 @@ function handleTaxTypeChange(
   );
 }
 
-const ProductTypeCreatePage: React.StatelessComponent<
+const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
-  ProductTypeCreatePageProps
-> = ({
   defaultWeightUnit,
   disabled,
   errors,

src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx

@@ -72,9 +72,7 @@ function handleTaxTypeChange(
   );
 }
 
-const ProductTypeDetailsPage: React.StatelessComponent<
+const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
-  ProductTypeDetailsPageProps
-> = ({
   defaultWeightUnit,
   disabled,
   errors,

src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx

@@ -26,9 +26,7 @@ export interface ProductTypeListPageProps
   onBack: () => void;
 }
 
-const ProductTypeListPage: React.StatelessComponent<
+const ProductTypeListPage: React.FC<ProductTypeListPageProps> = ({
-  ProductTypeListPageProps
-> = ({
   currentTab,
   initialSearch,
   onAdd,

src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx

@@ -18,9 +18,12 @@ interface ProductTypeShippingProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const ProductTypeShipping: React.StatelessComponent<
+const ProductTypeShipping: React.FC<ProductTypeShippingProps> = ({
-  ProductTypeShippingProps
+  data,
-> = ({ data, defaultWeightUnit, disabled, onChange }) => {
+  defaultWeightUnit,
+  disabled,
+  onChange
+}) => {
   const intl = useIntl();
 
   return (

src/productTypes/containers/ProductTypeOperations.tsx

@@ -90,9 +90,7 @@ interface ProductTypeOperationsProps {
   onProductTypeUpdate: (data: ProductTypeUpdate) => void;
 }
 
-const ProductTypeOperations: React.StatelessComponent<
+const ProductTypeOperations: React.FC<ProductTypeOperationsProps> = ({
-  ProductTypeOperationsProps
-> = ({
   children,
   productType,
   onAssignAttribute,

src/productTypes/index.tsx

@@ -16,9 +16,7 @@ import ProductTypeCreate from "./views/ProductTypeCreate";
 import ProductTypeListComponent from "./views/ProductTypeList";
 import ProductTypeUpdateComponent from "./views/ProductTypeUpdate";
 
-const ProductTypeList: React.StatelessComponent<RouteComponentProps<{}>> = ({
+const ProductTypeList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
-  location
-}) => {
   const qs = parseQs(location.search.substr(1));
   const params: ProductTypeListUrlQueryParams = qs;
   return <ProductTypeListComponent params={params} />;
@@ -27,7 +25,7 @@ const ProductTypeList: React.StatelessComponent<RouteComponentProps<{}>> = ({
 interface ProductTypeUpdateRouteParams {
   id: string;
 }
-const ProductTypeUpdate: React.StatelessComponent<
+const ProductTypeUpdate: React.FC<
   RouteComponentProps<ProductTypeUpdateRouteParams>
 > = ({ match }) => {
   const qs = parseQs(location.search.substr(1));