Migrating dialog to functional component and using react-hotkeys-hook

webapp/src/components/dialog.tsx

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 import React from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
+import {useHotkeys} from 'react-hotkeys-hook'
 
 import IconButton from '../widgets/buttons/iconButton'
 import CloseIcon from '../widgets/icons/close'
@@ -16,40 +17,22 @@ type Props = {
     intl: IntlShape
 }
 
-class Dialog extends React.PureComponent<Props> {
+const Dialog = React.memo((props: Props) => {
-    public componentDidMount(): void {
+    const {toolsMenu, intl} = props
-        document.addEventListener('keydown', this.keydownHandler)
-    }
-
-    public componentWillUnmount(): void {
-        document.removeEventListener('keydown', this.keydownHandler)
-    }
-
-    private keydownHandler = (e: KeyboardEvent): void => {
-        if (e.target !== document.body) {
-            return
-        }
-
-        if (e.keyCode === 27) {
-            this.closeClicked()
-            e.stopPropagation()
-        }
-    }
-
-    public render(): JSX.Element {
-        const {toolsMenu, intl} = this.props
 
     const closeDialogText = intl.formatMessage({
         id: 'Dialog.closeDialog',
         defaultMessage: 'Close dialog',
     })
 
+    useHotkeys('esc', () => props.onClose())
+
     return (
         <div
             className='Dialog dialog-back'
             onMouseDown={(e) => {
                 if (e.target === e.currentTarget) {
-                        this.closeClicked()
+                    props.onClose()
                 }
             }}
         >
@@ -58,7 +41,7 @@ class Dialog extends React.PureComponent<Props> {
                     {toolsMenu &&
                     <>
                         <IconButton
-                                onClick={this.closeClicked}
+                            onClick={props.onClose}
                             icon={<CloseIcon/>}
                             title={closeDialogText}
                             className='IconButton--large'
@@ -74,15 +57,10 @@ class Dialog extends React.PureComponent<Props> {
                     </>
                     }
                 </div>
-                    {this.props.children}
+                {props.children}
             </div>
         </div>
     )
-    }
+})
-
-    private closeClicked = () => {
-        this.props.onClose()
-    }
-}
 
 export default injectIntl(Dialog)