[RFR] Use makeStyles hooks on examples demo

examples/demo/src/categories/LinkToRelatedProducts.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
 import { useTranslate } from 'react-admin';
 import { stringify } from 'query-string';
 
 import products from '../products';
 
-const styles = {
+const useStyles = makeStyles({
     icon: { paddingRight: '0.5em' },
     link: {
         display: 'inline-flex',
         alignItems: 'center',
     },
-};
+});
 
-const LinkToRelatedProducts = ({ classes, record }) => {
+const LinkToRelatedProducts = ({ record }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Button
             size="small"
@@ -40,4 +41,4 @@ const LinkToRelatedProducts = ({ classes, record }) => {
     );
 };
 
-export default withStyles(styles)(LinkToRelatedProducts);
+export default LinkToRelatedProducts;

examples/demo/src/configuration/Configuration.js

@@ -4,23 +4,18 @@ import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import { useTranslate, changeLocale, Title } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
 import { changeTheme } from './actions';
 
-const styles = {
+const useStyles = makeStyles({
     label: { width: '10em', display: 'inline-block' },
     button: { margin: '1em' },
-};
+});
 
-const Configuration = ({
-    classes,
-    theme,
-    locale,
-    changeTheme,
-    changeLocale,
-}) => {
+const Configuration = ({ theme, locale, changeTheme, changeLocale }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Card>
             <Title title={translate('pos.configuration')} />
@@ -80,8 +75,7 @@ const enhance = compose(
             changeLocale,
             changeTheme,
         }
-    ),
-    withStyles(styles)
+    )
 );
 
 export default enhance(Configuration);

examples/demo/src/dashboard/CardIcon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     card: {
         float: 'left',
         margin: '-20px 20px 0 15px',
@@ -16,12 +16,15 @@ const styles = {
         padding: 14,
         color: '#fff',
     },
-};
+});
 
-const CardIcon = ({ Icon, classes, bgColor }) => (
-    <Card className={classes.card} style={{ backgroundColor: bgColor }}>
-        <Icon className={classes.icon} />
-    </Card>
-);
+const CardIcon = ({ Icon, bgColor }) => {
+    const classes = useStyles();
+    return (
+        <Card className={classes.card} style={{ backgroundColor: bgColor }}>
+            <Icon className={classes.icon} />
+        </Card>
+    );
+};
 
-export default withStyles(styles)(CardIcon);
+export default CardIcon;

examples/demo/src/dashboard/MonthlyRevenue.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
 import DollarIcon from '@material-ui/icons/AttachMoney';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { useTranslate } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
-const styles = {
+const useStyles = makeStyles({
     main: {
         flex: '1',
         marginRight: '1em',
@@ -19,10 +19,11 @@ const styles = {
         padding: 16,
         minHeight: 52,
     },
-};
+});
 
-const MonthlyRevenue = ({ value, classes }) => {
+const MonthlyRevenue = ({ value }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <div className={classes.main}>
             <CardIcon Icon={DollarIcon} bgColor="#31708f" />
@@ -38,4 +39,4 @@ const MonthlyRevenue = ({ value, classes }) => {
     );
 };
 
-export default withStyles(styles)(MonthlyRevenue);
+export default MonthlyRevenue;

examples/demo/src/dashboard/NbNewOrders.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import Card from '@material-ui/core/Card';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { useTranslate } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
-const styles = {
+const useStyles = makeStyles({
     main: {
         flex: '1',
         marginLeft: '1em',
@@ -19,10 +19,11 @@ const styles = {
         padding: 16,
         minHeight: 52,
     },
-};
+});
 
-const NbNewOrders = ({ value, classes }) => {
+const NbNewOrders = ({ value }) => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <div className={classes.main}>
             <CardIcon Icon={ShoppingCartIcon} bgColor="#ff9800" />
@@ -38,4 +39,4 @@ const NbNewOrders = ({ value, classes }) => {
     );
 };
 
-export default withStyles(styles)(NbNewOrders);
+export default NbNewOrders;

examples/demo/src/dashboard/Welcome.js

@@ -7,22 +7,23 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import HomeIcon from '@material-ui/icons/Home';
 import CodeIcon from '@material-ui/icons/Code';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { useTranslate } from 'react-admin';
 
-const styles = {
+const useStyles = makeStyles({
     media: {
         height: '18em',
     },
-};
+});
 
 const mediaUrl = `https://marmelab.com/posters/beard-${parseInt(
     Math.random() * 10,
     10
 ) + 1}.jpeg`;
 
-const Welcome = ({ classes }) => {
+const Welcome = () => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
         <Card>
             <CardMedia image={mediaUrl} className={classes.media} />
@@ -48,4 +49,4 @@ const Welcome = ({ classes }) => {
     );
 };
 
-export default withStyles(styles)(Welcome);
+export default Welcome;

examples/demo/src/layout/AppBar.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { AppBar, UserMenu, MenuItemLink, useTranslate } from 'react-admin';
 import Typography from '@material-ui/core/Typography';
 import SettingsIcon from '@material-ui/icons/Settings';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Logo from './Logo';
 
-const styles = {
+const useStyles = makeStyles({
     title: {
         flex: 1,
         textOverflow: 'ellipsis',
@@ -16,7 +16,7 @@ const styles = {
     spacer: {
         flex: 1,
     },
-};
+});
 
 const CustomUserMenu = props => {
     const translate = useTranslate();
@@ -31,17 +31,20 @@ const CustomUserMenu = props => {
     );
 };
 
-const CustomAppBar = ({ classes, ...props }) => (
-    <AppBar {...props} userMenu={<CustomUserMenu />}>
-        <Typography
-            variant="h6"
-            color="inherit"
-            className={classes.title}
-            id="react-admin-title"
-        />
-        <Logo />
-        <span className={classes.spacer} />
-    </AppBar>
-);
+const CustomAppBar = ({ props }) => {
+    const classes = useStyles();
+    return (
+        <AppBar {...props} userMenu={<CustomUserMenu />}>
+            <Typography
+                variant="h6"
+                color="inherit"
+                className={classes.title}
+                id="react-admin-title"
+            />
+            <Logo />
+            <span className={classes.spacer} />
+        </AppBar>
+    );
+};
 
-export default withStyles(styles)(CustomAppBar);
+export default CustomAppBar;

examples/demo/src/orders/MobileGrid.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardContent from '@material-ui/core/CardContent';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import {
     DateField,
     EditButton,
@@ -15,7 +15,7 @@ import {
 
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 
-const listStyles = theme => ({
+const useListStyles = makeStyles(theme => ({
     card: {
         height: '100%',
         display: 'flex',
@@ -35,10 +35,11 @@ const listStyles = theme => ({
         alignItems: 'center',
         margin: '0.5rem 0',
     },
-});
+}));
 
-const MobileGrid = ({ classes, ids, data, basePath }) => {
+const MobileGrid = ({ ids, data, basePath }) => {
     const translate = useTranslate();
+    const classes = useListStyles();
     return (
         <div style={{ margin: '1em' }}>
             {ids.map(id => (
@@ -112,4 +113,4 @@ MobileGrid.defaultProps = {
     ids: [],
 };
 
-export default withStyles(listStyles)(MobileGrid);
+export default MobileGrid;

examples/demo/src/orders/OrderEdit.js

@@ -9,7 +9,7 @@ import {
     SimpleForm,
     useTranslate,
 } from 'react-admin';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Basket from './Basket';
 
@@ -24,37 +24,45 @@ const OrderTitle = ({ record }) => {
     );
 };
 
-const editStyles = {
+const useEditStyles = makeStyles({
     root: { alignItems: 'flex-start' },
-};
+});
 
-const OrderEdit = props => (
-    <Edit title={<OrderTitle />} aside={<Basket />} {...props}>
-        <SimpleForm>
-            <DateInput source="date" />
-            <ReferenceInput source="customer_id" reference="customers">
-                <AutocompleteInput
-                    optionText={choice =>
-                        `${choice.first_name} ${choice.last_name}`
-                    }
+const OrderEdit = props => {
+    const classes = useEditStyles();
+    return (
+        <Edit
+            title={<OrderTitle />}
+            aside={<Basket />}
+            classes={classes}
+            {...props}
+        >
+            <SimpleForm>
+                <DateInput source="date" />
+                <ReferenceInput source="customer_id" reference="customers">
+                    <AutocompleteInput
+                        optionText={choice =>
+                            `${choice.first_name} ${choice.last_name}`
+                        }
+                    />
+                </ReferenceInput>
+                <SelectInput
+                    source="status"
+                    choices={[
+                        { id: 'delivered', name: 'delivered' },
+                        { id: 'ordered', name: 'ordered' },
+                        { id: 'cancelled', name: 'cancelled' },
+                        {
+                            id: 'unknown',
+                            name: 'unknown',
+                            disabled: true,
+                        },
+                    ]}
                 />
-            </ReferenceInput>
-            <SelectInput
-                source="status"
-                choices={[
-                    { id: 'delivered', name: 'delivered' },
-                    { id: 'ordered', name: 'ordered' },
-                    { id: 'cancelled', name: 'cancelled' },
-                    {
-                        id: 'unknown',
-                        name: 'unknown',
-                        disabled: true,
-                    },
-                ]}
-            />
-            <BooleanInput source="returned" />
-        </SimpleForm>
-    </Edit>
-);
+                <BooleanInput source="returned" />
+            </SimpleForm>
+        </Edit>
+    );
+};
 
-export default withStyles(editStyles)(OrderEdit);
+export default OrderEdit;