Merge pull request #3595 from jaytula/appbar-usedispatch-useselector

[RFR] Convert AppBar to use useDispatch, useSelector, useWidth
marmelab · Aug 26, 2019 · 2bfb7e3 · 2bfb7e3
2 parents db2e7f7 + 5f5e30c
commit 2bfb7e3
Showing 1 changed file with 16 additions and 24 deletions.
diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js
@@ -1,16 +1,15 @@
 import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 import MuiAppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
-import withWidth from '@material-ui/core/withWidth';
-import compose from 'recompose/compose';
-import { toggleSidebar as toggleSidebarAction } from 'ra-core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { toggleSidebar } from 'ra-core';
 
 import LoadingIndicator from './LoadingIndicator';
 import DefaultUserMenu from './UserMenu';
@@ -54,24 +53,31 @@ const AppBar = ({
     logout,
     open,
     title,
-    toggleSidebar,
     userMenu,
-    width,
     ...rest
 }) => {
     const classes = useStyles({ classes: classesOverride });
+    const dispatch = useDispatch();
+    const locale = useSelector(state => state.i18n.locale);
+    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
+
     return (
         <HideOnScroll>
-            <MuiAppBar className={className} color="secondary" {...rest}>
+            <MuiAppBar
+                className={className}
+                color="secondary"
+                locale={locale}
+                {...rest}
+            >
                 <Toolbar
                     disableGutters
-                    variant={width === 'xs' ? 'regular' : 'dense'}
+                    variant={isXSmall ? 'regular' : 'dense'}
                     className={classes.toolbar}
                 >
                     <IconButton
                         color="inherit"
                         aria-label="open drawer"
-                        onClick={toggleSidebar}
+                        onClick={() => dispatch(toggleSidebar())}
                         className={classNames(classes.menuButton)}
                     >
                         <MenuIcon
@@ -106,25 +112,11 @@ AppBar.propTypes = {
     className: PropTypes.string,
     logout: PropTypes.element,
     open: PropTypes.bool,
-    toggleSidebar: PropTypes.func.isRequired,
     userMenu: PropTypes.element,
-    width: PropTypes.string,
 };
 
 AppBar.defaultProps = {
     userMenu: <DefaultUserMenu />,
 };
 
-const enhance = compose(
-    connect(
-        state => ({
-            locale: state.i18n.locale, // force redraw on locale change
-        }),
-        {
-            toggleSidebar: toggleSidebarAction,
-        }
-    ),
-    withWidth()
-);
-
-export default enhance(AppBar);
+export default AppBar;