From dcdaa20897e94fb3f79a71bf97009b27d642ccad Mon Sep 17 00:00:00 2001 From: jaytula Date: Fri, 23 Aug 2019 10:19:50 -0700 Subject: [PATCH 1/3] Replace connect with useDispatch and useSelector --- .../ra-ui-materialui/src/layout/AppBar.js | 33 ++++++++----------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index c940e4c7e53..f383aaa51f5 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -1,6 +1,6 @@ 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'; @@ -9,8 +9,7 @@ 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 { toggleSidebar } from 'ra-core'; import LoadingIndicator from './LoadingIndicator'; import DefaultUserMenu from './UserMenu'; @@ -54,15 +53,22 @@ const AppBar = ({ logout, open, title, - toggleSidebar, userMenu, width, ...rest }) => { const classes = useStyles({ classes: classesOverride }); + const dispatch = useDispatch(); + const locale = useSelector(state => state.i18n.locale); + return ( - + dispatch(toggleSidebar())} className={classNames(classes.menuButton)} > , }; -const enhance = compose( - connect( - state => ({ - locale: state.i18n.locale, // force redraw on locale change - }), - { - toggleSidebar: toggleSidebarAction, - } - ), - withWidth() -); - -export default enhance(AppBar); +export default withWidth()(AppBar); From 5df028e1ec3511f01b9c4ff1413b5f4c773c3657 Mon Sep 17 00:00:00 2001 From: jaytula Date: Fri, 23 Aug 2019 10:40:42 -0700 Subject: [PATCH 2/3] Replace withWidth with useWidth --- .../ra-ui-materialui/src/layout/AppBar.js | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index f383aaa51f5..c061d4f05ab 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -8,13 +8,31 @@ 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 { useTheme } from '@material-ui/styles'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import { toggleSidebar } from 'ra-core'; import LoadingIndicator from './LoadingIndicator'; import DefaultUserMenu from './UserMenu'; import HideOnScroll from './HideOnScroll'; +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ +function useWidth() { + const theme = useTheme(); + const keys = [...theme.breakpoints.keys].reverse(); + return ( + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.up(key)); + return !output && matches ? key : output; + }, null) || 'xs' + ); +} + const useStyles = makeStyles(theme => ({ toolbar: { paddingRight: 24, @@ -54,12 +72,12 @@ const AppBar = ({ open, title, userMenu, - width, ...rest }) => { const classes = useStyles({ classes: classesOverride }); const dispatch = useDispatch(); const locale = useSelector(state => state.i18n.locale); + const width = useWidth(); return ( @@ -113,11 +131,10 @@ AppBar.propTypes = { logout: PropTypes.element, open: PropTypes.bool, userMenu: PropTypes.element, - width: PropTypes.string, }; AppBar.defaultProps = { userMenu: , }; -export default withWidth()(AppBar); +export default AppBar; From 5f5e30c825b5933f9aa1e47fa88d7c1d94a070ec Mon Sep 17 00:00:00 2001 From: jaytula Date: Mon, 26 Aug 2019 08:44:38 -0700 Subject: [PATCH 3/3] Change to useMediaQuery instead of useWidth --- .../ra-ui-materialui/src/layout/AppBar.js | 22 ++----------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index c061d4f05ab..ed284b4f042 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -8,7 +8,6 @@ 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 { useTheme } from '@material-ui/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { toggleSidebar } from 'ra-core'; @@ -16,23 +15,6 @@ import LoadingIndicator from './LoadingIndicator'; import DefaultUserMenu from './UserMenu'; import HideOnScroll from './HideOnScroll'; -/** - * Be careful using this hook. It only works because the number of - * breakpoints in theme is static. It will break once you change the number of - * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level - */ -function useWidth() { - const theme = useTheme(); - const keys = [...theme.breakpoints.keys].reverse(); - return ( - keys.reduce((output, key) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const matches = useMediaQuery(theme.breakpoints.up(key)); - return !output && matches ? key : output; - }, null) || 'xs' - ); -} - const useStyles = makeStyles(theme => ({ toolbar: { paddingRight: 24, @@ -77,7 +59,7 @@ const AppBar = ({ const classes = useStyles({ classes: classesOverride }); const dispatch = useDispatch(); const locale = useSelector(state => state.i18n.locale); - const width = useWidth(); + const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs')); return ( @@ -89,7 +71,7 @@ const AppBar = ({ >