[RFR] Remove FC usage from examples

examples/demo/src/categories/CategoryEdit.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import {
     Datagrid,
     Edit,
@@ -17,7 +16,8 @@ import ThumbnailField from '../products/ThumbnailField';
 import ProductRefField from '../products/ProductRefField';
 import { Category } from '../types';
 
-const CategoryTitle: FC<FieldProps<Category>> = ({ record }) => {
+const CategoryTitle = (props: FieldProps<Category>) => {
+    const { record } = props;
     const translate = useTranslate();
     return record ? (
         <span>
@@ -27,7 +27,7 @@ const CategoryTitle: FC<FieldProps<Category>> = ({ record }) => {
     ) : null;
 };
 
-const CategoryEdit: FC<EditProps> = props => (
+const CategoryEdit = (props: EditProps) => (
     <Edit title={<CategoryTitle />} {...props}>
         <SimpleForm>
             <TextInput source="name" />

examples/demo/src/categories/CategoryList.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import { EditButton, List, ListProps, useListContext } from 'react-admin';
 import inflection from 'inflection';
 import {
@@ -31,7 +30,7 @@ const useStyles = makeStyles({
     },
 });
 
-const CategoryGrid: FC = props => {
+const CategoryGrid = props => {
     const classes = useStyles(props);
     const { data, ids } = useListContext<Category>();
     return ids ? (
@@ -68,7 +67,7 @@ const CategoryGrid: FC = props => {
     ) : null;
 };
 
-const CategoryList: FC<ListProps> = props => (
+const CategoryList = (props: ListProps) => (
     <List
         {...props}
         sort={{ field: 'name', order: 'ASC' }}

examples/demo/src/categories/LinkToRelatedProducts.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
@@ -17,7 +16,8 @@ const useStyles = makeStyles({
     },
 });
 
-const LinkToRelatedProducts: FC<FieldProps<Category>> = ({ record }) => {
+const LinkToRelatedProducts = (props: FieldProps<Category>) => {
+    const { record } = props;
     const translate = useTranslate();
     const classes = useStyles();
     return record ? (

examples/demo/src/dashboard/CardWithIcon.tsx

@@ -3,6 +3,7 @@ import { FC, createElement } from 'react';
 import { Card, Box, Typography, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
+import { ReactNode } from 'react';
 
 import cartouche from './cartouche.png';
 import cartoucheDark from './cartoucheDark.png';
@@ -12,6 +13,7 @@ interface Props {
     to: string;
     title?: string;
     subtitle?: string | number;
+    children?: ReactNode;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -41,7 +43,7 @@ const useStyles = makeStyles(theme => ({
     title: {},
 }));
 
-const CardWithIcon: FC<Props> = props => {
+const CardWithIcon = (props: Props) => {
     const { icon, title, subtitle, to, children } = props;
     const classes = useStyles(props);
     return (

examples/demo/src/dashboard/Dashboard.tsx

@@ -1,10 +1,4 @@
-import React, {
-    useState,
-    useEffect,
-    useCallback,
-    FC,
-    CSSProperties,
-} from 'react';
+import React, { useState, useEffect, useCallback, CSSProperties } from 'react';
 import { useVersion, useDataProvider } from 'react-admin';
 import { useMediaQuery, Theme } from '@material-ui/core';
 import { subDays } from 'date-fns';
@@ -51,7 +45,7 @@ const styles = {
 const Spacer = () => <span style={{ width: '1em' }} />;
 const VerticalSpacer = () => <span style={{ height: '1em' }} />;
 
-const Dashboard: FC = () => {
+const Dashboard = () => {
     const [state, setState] = useState<State>({});
     const version = useVersion();
     const dataProvider = useDataProvider();

examples/demo/src/dashboard/MonthlyRevenue.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import DollarIcon from '@material-ui/icons/AttachMoney';
 import { useTranslate } from 'react-admin';
 
@@ -9,7 +8,8 @@ interface Props {
     value?: string;
 }
 
-const MonthlyRevenue: FC<Props> = ({ value }) => {
+const MonthlyRevenue = (props: Props) => {
+    const { value } = props;
     const translate = useTranslate();
     return (
         <CardWithIcon

examples/demo/src/dashboard/NbNewOrders.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import { useTranslate } from 'react-admin';
 
@@ -9,7 +8,8 @@ interface Props {
     value?: number;
 }
 
-const NbNewOrders: FC<Props> = ({ value }) => {
+const NbNewOrders = (props: Props) => {
+    const { value } = props;
     const translate = useTranslate();
     return (
         <CardWithIcon

examples/demo/src/dashboard/OrderChart.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import { Card, CardHeader, CardContent } from '@material-ui/core';
 import {
     ResponsiveContainer,
@@ -42,7 +41,8 @@ const getRevenuePerDay = (orders: Order[]): TotalByDay[] => {
     }));
 };
 
-const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
+const OrderChart = (props: { orders?: Order[] }) => {
+    const { orders } = props;
     const translate = useTranslate();
     if (!orders) return null;
 

examples/demo/src/dashboard/PendingOrders.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import List from '@material-ui/core/List';
@@ -28,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const PendingOrders: FC<Props> = ({ orders = [], customers = {} }) => {
+const PendingOrders = (props: Props) => {
+    const { orders = [], customers = {} } = props;
     const classes = useStyles();
     const translate = useTranslate();
     return (

examples/demo/src/dashboard/PendingReviews.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import {
     Avatar,
     Box,
@@ -24,7 +23,7 @@ interface Props {
     nb?: number;
 }
 
-const PendingReviews: FC<Props> = ({ reviews = [], customers = {}, nb }) => {
+const PendingReviews = ({ reviews = [], customers = {}, nb }: Props) => {
     const classes = useStyles();
     const translate = useTranslate();
     return (

examples/demo/src/dashboard/Welcome.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import { Box, Card, CardActions, Button, Typography } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import CodeIcon from '@material-ui/icons/Code';
@@ -37,7 +36,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const Welcome: FC = () => {
+const Welcome = () => {
     const translate = useTranslate();
     const classes = useStyles();
     return (

examples/demo/src/invoices/InvoiceList.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import {
     List,
     ListProps,
@@ -30,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const InvoiceList: FC<ListProps> = props => {
+const InvoiceList = (props: ListProps) => {
     const classes = useStyles();
     return (
         <List

examples/demo/src/invoices/InvoiceShow.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Grid from '@material-ui/core/Grid';
@@ -15,7 +14,7 @@ import {
 import Basket from '../orders/Basket';
 import { Customer, Invoice } from '../types';
 
-const CustomerField: FC<FieldProps<Customer>> = ({ record }) =>
+const CustomerField = ({ record }: FieldProps<Customer>) =>
     record ? (
         <Typography>
             {record.first_name} {record.last_name}

examples/demo/src/layout/SubMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, Fragment, ReactElement } from 'react';
+import { Fragment, ReactElement, ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 import {
     List,
@@ -35,16 +35,11 @@ interface Props {
     icon: ReactElement;
     isOpen: boolean;
     name: string;
+    children: ReactNode;
 }
 
-const SubMenu: FC<Props> = ({
-    handleToggle,
-    isOpen,
-    name,
-    icon,
-    children,
-    dense,
-}) => {
+const SubMenu = (props: Props) => {
+    const { handleToggle, isOpen, name, icon, children, dense } = props;
     const translate = useTranslate();
     const classes = useStyles();
     const sidebarIsOpen = useSelector<ReduxState, boolean>(

examples/demo/src/orders/Basket.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import {
     Table,
     TableBody,
@@ -16,7 +15,8 @@ const useStyles = makeStyles({
     rightAlignedCell: { textAlign: 'right' },
 });
 
-const Basket: FC<FieldProps<Order>> = ({ record }) => {
+const Basket = (props: FieldProps<Order>) => {
+    const { record } = props;
     const classes = useStyles();
     const translate = useTranslate();
 

examples/demo/src/orders/MobileGrid.tsx

@@ -1,6 +1,5 @@
 // in src/comments.js
 import * as React from 'react';
-import { FC } from 'react';
 import { Card, CardHeader, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -45,7 +44,8 @@ interface MobileGridProps {
     basePath?: string;
 }
 
-const MobileGrid: FC<MobileGridProps> = ({ ids, data, basePath }) => {
+const MobileGrid = (props: MobileGridProps) => {
+    const { ids, data, basePath } = props;
     const translate = useTranslate();
     const classes = useListStyles();
 

examples/demo/src/orders/OrderEdit.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import {
     BooleanInput,
     DateField,
@@ -32,7 +31,7 @@ interface OrderTitleProps {
     record?: Order;
 }
 
-const OrderTitle: FC<OrderTitleProps> = ({ record }) => {
+const OrderTitle = ({ record }: OrderTitleProps) => {
     const translate = useTranslate();
     return record ? (
         <span>
@@ -228,7 +227,7 @@ const OrderForm = (props: any) => {
         />
     );
 };
-const OrderEdit: FC<EditProps> = props => {
+const OrderEdit = (props: EditProps) => {
     const classes = useEditStyles();
     return (
         <Edit

examples/demo/src/orders/OrderList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, Fragment, useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import {
     AutocompleteInput,
     BooleanField,
@@ -87,7 +87,7 @@ const useGetTotals = (filterValues: any) => {
     };
 };
 
-const TabbedDatagrid: FC<TabbedDatagridProps> = props => {
+const TabbedDatagrid = (props: TabbedDatagridProps) => {
     const listContext = useListContext();
     const { ids, filterValues, setFilters, displayedFilters } = listContext;
     const classes = useDatagridStyles();
@@ -259,7 +259,7 @@ const TabbedDatagrid: FC<TabbedDatagridProps> = props => {
     );
 };
 
-const OrderList: FC<ListProps> = props => (
+const OrderList = (props: ListProps) => (
     <List
         {...props}
         filterDefaultValues={{ status: 'ordered' }}

examples/demo/src/orders/Totals.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import classnames from 'classnames';
 import { Table, TableBody, TableCell, TableRow } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -13,7 +12,8 @@ const useStyles = makeStyles({
     boldCell: { fontWeight: 'bold' },
 });
 
-const Totals: FC<FieldProps<Order>> = ({ record }: { record?: Order }) => {
+const Totals = (props: FieldProps<Order>) => {
+    const { record } = props;
     const classes = useStyles();
     const translate = useTranslate();
 

examples/demo/src/products/Aside.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FC } from 'react';
 import inflection from 'inflection';
 import { Card, CardContent } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -28,7 +27,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const Aside: FC = () => {
+const Aside = () => {
     const { data, ids } = useGetList<Category>(
         'categories',
         { page: 1, perPage: 100 },