Replace react-hotkeys-hook with react-hotkeys

ui/src/layout/Layout.js

@@ -1,7 +1,8 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { Layout } from 'react-admin'
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Layout, toggleSidebar } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
+import { HotKeys } from 'react-hotkeys'
 import Menu from './Menu'
 import AppBar from './AppBar'
 import Notification from './Notification'
@@ -15,15 +16,23 @@ export default (props) => {
   const theme = useSelector((state) => themes[state.theme] || themes.DarkTheme)
   const queue = useSelector((state) => state.queue)
   const classes = useStyles({ addPadding: queue.queue.length > 0 })
+  const dispatch = useDispatch()
+
+  const keyMap = { TOGGLE_MENU: 'm' }
+  const keyHandlers = {
+    TOGGLE_MENU: useCallback(() => dispatch(toggleSidebar()), [dispatch]),
+  }
 
   return (
-    <Layout
-      {...props}
-      className={classes.root}
-      menu={Menu}
-      appBar={AppBar}
-      theme={theme}
-      notification={Notification}
-    />
+    <HotKeys handlers={keyHandlers} keyMap={keyMap}>
+      <Layout
+        {...props}
+        className={classes.root}
+        menu={Menu}
+        appBar={AppBar}
+        theme={theme}
+        notification={Notification}
+      />
+    </HotKeys>
   )
 }

ui/src/layout/Menu.js

@@ -1,12 +1,7 @@
 import React, { useState, createElement } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { useMediaQuery } from '@material-ui/core'
-import {
-  useTranslate,
-  MenuItemLink,
-  getResources,
-  toggleSidebar,
-} from 'react-admin'
+import { useTranslate, MenuItemLink, getResources } from 'react-admin'
 import { withRouter } from 'react-router-dom'
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
 import ViewListIcon from '@material-ui/icons/ViewList'
@@ -14,7 +9,6 @@ import AlbumIcon from '@material-ui/icons/Album'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
 import albumLists from '../album/albumLists'
-import { useHotkeys } from 'react-hotkeys-hook'
 
 const translatedResourceName = (resource, translate) =>
   translate(`resources.${resource.name}.name`, {
@@ -33,11 +27,6 @@ const Menu = ({ onMenuClick, dense, logout }) => {
   const open = useSelector((state) => state.admin.ui.sidebarOpen)
   const translate = useTranslate()
   const resources = useSelector(getResources)
-  const dispatch = useDispatch()
-
-  useHotkeys('m', () => {
-    dispatch(toggleSidebar())
-  })
 
   // TODO State is not persisted in mobile when you close the sidebar menu. Move to redux?
   const [state, setState] = useState({