Merge pull request #3688 from marmelab/withStyles-cleanup

[RFR] Code cleanup
marmelab · Sep 13, 2019 · 0360aaa · 0360aaa
2 parents e5ddaca + ab35db3
commit 0360aaa
Show file tree

Hide file tree

Showing 18 changed files with 233 additions and 263 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -687,25 +687,30 @@ The `List` component accepts the usual `className` prop but you can override man
 
 Here is an example of how you can override some of these classes:
 
-You can customize the list styles by passing a `classes` object as prop, through `withStyles()`. Here is an example:
+You can customize the list styles by passing a `classes` object as prop, through `useStyles()`. Here is an example:
 
 {% raw %}
 ```jsx
-const styles = {
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
     header: {
         backgroundColor: '#ccc',
     },
-};
+});
 
-const PostList = ({ classes, ...props }) => (
-    <List {...props} classes={{ header: classes.header }}>
-        <Datagrid>
-            ...
-        </Datagrid>
-    </List>
-);
+const PostList = props => {
+    const classes = useStyles();
+    return (
+        <List {...props} classes={{ header: classes.header }}>
+            <Datagrid>
+                ...
+            </Datagrid>
+        </List>
+    );
+}
 
-export withStyles(styles)(PostList);
+export PostList;
 ```
 {% endraw %}
 
@@ -974,56 +979,64 @@ The `Datagrid` component accepts the usual `className` prop but you can override
 
 Here is an example of how you can override some of these classes:
 
-You can customize the datagrid styles by passing a `classes` object as prop, through `withStyles()`. Here is an example:
+You can customize the datagrid styles by passing a `classes` object as prop, through `useStyles()`. Here is an example:
 
 {% raw %}
 ```jsx
-const styles = {
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
     row: {
         backgroundColor: '#ccc',
     },
-};
+});
 
-const PostList = ({ classes, ...props) => (
-    <List {...props}>
-        <Datagrid classes={{ row: classes.row }}>
-            ...
-        </Datagrid>
-    </List>
-);
+const PostList = props => {
+    const classes = useStyles();
+    return (
+        <List {...props}>
+            <Datagrid classes={{ row: classes.row }}>
+                ...
+            </Datagrid>
+        </List>
+    );
+}
 
-export withStyles(styles)(PostList);
+export PostList;
 ```
 {% endraw %}
 
 **Tip**: If you want to override the `header` and `cell` styles independently for each column, use the `headerClassName` and `cellClassName` props in `<Field>` components. For instance, to hide a certain column on small screens:
 
 ```jsx
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     hiddenOnSmallScreens: {
         [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
-});
+}));
 
-const PostList = ({ classes, ...props }) => (
-    <List {...props}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField
-                source="views"
-                headerClassName={classes.hiddenOnSmallScreens}
-                cellClassName={classes.hiddenOnSmallScreens}
-            />
-        </Datagrid>
-    </List>
-);
+const PostList = props => {
+    const classes = usestyles();
+    return (
+        <List {...props}>
+            <Datagrid>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField
+                    source="views"
+                    headerClassName={classes.hiddenOnSmallScreens}
+                    cellClassName={classes.hiddenOnSmallScreens}
+                />
+            </Datagrid>
+        </List>
+    );
+};
 
-export default withStyles(styles)(PostList);
+export default PostList;
 ```
 
 ## The `<SimpleList>` component

diff --git a/examples/demo/src/layout/Login.js b/examples/demo/src/layout/Login.js
@@ -163,7 +163,7 @@ Login.propTypes = {
 };
 
 // We need to put the ThemeProvider decoration in another component
-// Because otherwise the withStyles() HOC used in EnhancedLogin won't get
+// Because otherwise the useStyles() hook used in Login won't get
 // the right theme
 const LoginWithTheme = props => (
     <ThemeProvider theme={createMuiTheme(lightTheme)}>

diff --git a/examples/simple/src/comments/index.js b/examples/simple/src/comments/index.js
@@ -2,7 +2,6 @@ import ChatBubbleIcon from '@material-ui/icons/ChatBubble';
 import CommentCreate from './CommentCreate';
 import CommentEdit from './CommentEdit';
 import CommentList from './CommentList';
-import CommentShow from './CommentShow';
 import { ShowGuesser } from 'react-admin';
 
 export default {

diff --git a/packages/ra-core/src/controller/input/useGetMatchingReferences.spec.tsx b/packages/ra-core/src/controller/input/useGetMatchingReferences.spec.tsx
@@ -19,7 +19,7 @@ describe('useMatchingReferences', () => {
     afterEach(cleanup);
 
     it('should fetch matchingReferences only on mount', () => {
-        const { dispatch, rerender } = renderHook(() => {
+        const { dispatch } = renderHook(() => {
             return useMatchingReferences(defaultProps);
         });
 

diff --git a/packages/ra-core/src/controller/usePaginationState.ts b/packages/ra-core/src/controller/usePaginationState.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useReducer, useCallback, useRef } from 'react';
+import { useEffect, useReducer, useCallback, useRef } from 'react';
 import { Pagination } from '../types';
 
 interface PaginationProps {

diff --git a/packages/ra-core/src/controller/useShowController.ts b/packages/ra-core/src/controller/useShowController.ts
@@ -15,7 +15,6 @@ export interface ShowProps {
     hasList?: boolean;
     id: Identifier;
     resource: string;
-    undoable?: boolean;
     [key: string]: any;
 }
 
@@ -48,7 +47,7 @@ export interface ShowControllerProps {
  */
 const useShowController = (props: ShowProps): ShowControllerProps => {
     useCheckMinimumRequiredProps('Show', ['basePath', 'resource'], props);
-    const { basePath, id, resource, undoable = true } = props;
+    const { basePath, id, resource } = props;
     const translate = useTranslate();
     const notify = useNotify();
     const redirect = useRedirect();

diff --git a/packages/ra-core/src/dataProvider/useGetMany.spec.tsx b/packages/ra-core/src/dataProvider/useGetMany.spec.tsx
@@ -19,11 +19,6 @@ const UseGetMany = ({
 };
 
 describe('useGetMany', () => {
-    const defaultProps = {
-        ids: [1],
-        resource: 'posts',
-    };
-
     afterEach(cleanup);
 
     it('should call the dataProvider with a GET_MANY on mount', async () => {
@@ -100,7 +95,7 @@ describe('useGetMany', () => {
             .mockReturnValueOnce(
                 Promise.resolve({ data: [{ id: 5 }, { id: 6 }, { id: 7 }] })
             );
-        const { dispatch } = renderWithRedux(
+        renderWithRedux(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseGetMany resource="posts" ids={[1, 2]} />
                 <UseGetMany resource="posts" ids={[2, 3]} />

diff --git a/packages/ra-core/src/dataProvider/useGetMany.ts b/packages/ra-core/src/dataProvider/useGetMany.ts
@@ -186,8 +186,9 @@ const callQueries = debounce(() => {
                             loaded: true,
                         }));
                         if (onSuccess) {
-                            const subData = ids.map(id =>
-                                response.data.find(datum => datum.id == id)
+                            const subData = ids.map(
+                                id =>
+                                    response.data.find(datum => datum.id == id) // eslint-disable-line eqeqeq
                             );
                             onSuccess({ data: subData });
                         }

diff --git a/packages/ra-ui-materialui/src/Link.tsx b/packages/ra-ui-materialui/src/Link.tsx
@@ -2,29 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link as RRLink } from 'react-router-dom';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme =>
-    createStyles({
-        link: {
-            textDecoration: 'none',
-            color: theme.palette.primary.main,
-        },
-    });
+const useStyles = makeStyles(theme => ({
+    link: {
+        textDecoration: 'none',
+        color: theme.palette.primary.main,
+    },
+}));
 
 /**
  * @deprecated Use react-router-dom's Link instead
  */
-const Link = ({ to, children, className, classes, ...rest }) => (
-    <RRLink to={to} className={classNames(classes.link, className)} {...rest}>
-        {children}
-    </RRLink>
-);
+const Link = ({
+    to,
+    children,
+    classes: classesOverride,
+    className,
+    ...rest
+}) => {
+    const classes = useStyles({ classes: classesOverride });
+    return (
+        <RRLink
+            to={to}
+            className={classNames(classes.link, className)}
+            {...rest}
+        >
+            {children}
+        </RRLink>
+    );
+};
+
 Link.propTypes = {
     className: PropTypes.string,
-    classes: PropTypes.object,
     children: PropTypes.node,
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
 
-export default withStyles(styles)(Link);
+export default Link;
diff --git a/packages/ra-ui-materialui/src/field/FileField.tsx b/packages/ra-ui-materialui/src/field/FileField.tsx
@@ -1,4 +1,4 @@
-import React, { SFC, ComponentType } from 'react';
+import React, { SFC } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { makeStyles } from '@material-ui/core/styles';

diff --git a/packages/ra-ui-materialui/src/field/ImageField.tsx b/packages/ra-ui-materialui/src/field/ImageField.tsx
@@ -1,4 +1,4 @@
-import React, { SFC, ComponentType } from 'react';
+import React, { SFC } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { makeStyles } from '@material-ui/core/styles';

diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx
@@ -42,8 +42,9 @@ const CheckboxGroupInputItem = ({
                     className={classes.checkbox}
                     checked={
                         value
-                            ? value.find(v => v == get(choice, optionValue)) !==
-                              undefined // eslint-disable-line eqeqeq
+                            ? value.find(
+                                  v => v == get(choice, optionValue) // eslint-disable-line eqeqeq
+                              ) !== undefined
                             : false
                     }
                     value={String(get(choice, optionValue))}

diff --git a/packages/ra-ui-materialui/src/list/BulkDeleteAction.js b/packages/ra-ui-materialui/src/list/BulkDeleteAction.js
@@ -1,64 +1,48 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import compose from 'recompose/compose';
-import { crudDeleteMany, startUndoable, translate } from 'ra-core';
+import { useDispatch } from 'react-redux';
+import { crudDeleteMany, startUndoable } from 'ra-core';
 
-class BulkDeleteAction extends Component {
-    componentDidMount = () => {
+/**
+ *@deprecated use BulkDeleteButton instead
+ */
+const BulkDeleteAction = props => {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
         if (process.env.NODE_ENV !== 'production') {
             // eslint-disable-next-line no-console
             console.warn(
                 '<BulkDeleteAction> is deprecated. Use the <BulkDeleteButton> component instead, via the bulkActionButton props.'
             );
         }
-        const {
-            basePath,
-            dispatchCrudDeleteMany,
-            resource,
-            selectedIds,
-            startUndoable,
-            undoable,
-        } = this.props;
+        const { basePath, resource, selectedIds, undoable, onExit } = props;
         if (undoable) {
-            startUndoable(crudDeleteMany(resource, selectedIds, basePath));
+            dispatch(
+                startUndoable(crudDeleteMany(resource, selectedIds, basePath))
+            );
         } else {
-            dispatchCrudDeleteMany(resource, selectedIds, basePath);
+            dispatch(crudDeleteMany(resource, selectedIds, basePath));
         }
-        this.props.onExit();
-    };
+        onExit();
+    }, [dispatch, props]);
 
-    render() {
-        return null;
-    }
-}
+    return null;
+};
 
 BulkDeleteAction.propTypes = {
     basePath: PropTypes.string,
-    dispatchCrudDeleteMany: PropTypes.func.isRequired,
     label: PropTypes.string,
     onExit: PropTypes.func.isRequired,
     resource: PropTypes.string.isRequired,
-    startUndoable: PropTypes.func,
     selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
     translate: PropTypes.func.isRequired,
     undoable: PropTypes.bool,
 };
 
-const EnhancedBulkDeleteAction = compose(
-    connect(
-        undefined,
-        {
-            startUndoable,
-            dispatchCrudDeleteMany: crudDeleteMany,
-        }
-    ),
-    translate
-)(BulkDeleteAction);
-
-EnhancedBulkDeleteAction.defaultProps = {
+BulkDeleteAction.defaultProps = {
     label: 'ra.action.delete',
     undoable: true,
 };
 
-export default EnhancedBulkDeleteAction;
+export default BulkDeleteAction;