Convert Overlay to a function component.

Author: lindapaiste

client/modules/App/components/Overlay.jsx

@@ -1,111 +1,81 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
+import { useSelector } from 'react-redux';
 import { browserHistory } from 'react-router';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import useModalClose from '../../../common/useModalClose';
 
 import ExitIcon from '../../../images/exit.svg';
 
-class Overlay extends React.Component {
-  constructor(props) {
-    super(props);
-    this.close = this.close.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.keyPressHandle = this.keyPressHandle.bind(this);
-  }
+const Overlay = ({
+  actions,
+  ariaLabel,
+  children,
+  closeOverlay,
+  isFixedHeight,
+  title
+}) => {
+  const { t } = useTranslation();
 
-  componentWillMount() {
-    document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.keyPressHandle);
-  }
+  const previousPath = useSelector((state) => state.ide.previousPath);
 
-  componentDidMount() {
-    this.node.focus();
-  }
+  const ref = useRef(null);
 
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.keyPressHandle);
-  }
-
-  handleClick(e) {
-    if (this.node.contains(e.target)) {
-      return;
-    }
-
-    this.handleClickOutside(e);
-  }
-
-  handleClickOutside() {
-    this.close();
-  }
-
-  keyPressHandle(e) {
-    // escape key code = 27.
-    // So here we are checking if the key pressed was Escape key.
-    if (e.keyCode === 27) {
-      this.close();
-    }
-  }
-
-  close() {
+  const close = useCallback(() => {
+    const node = ref.current;
+    if (!node) return;
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
-    if (this.node.parentElement.parentElement !== overlays[overlays.length - 1])
+    if (node.parentElement.parentElement !== overlays[overlays.length - 1])
       return;
 
-    if (!this.props.closeOverlay) {
-      browserHistory.push(this.props.previousPath);
+    if (!closeOverlay) {
+      browserHistory.push(previousPath);
     } else {
-      this.props.closeOverlay();
+      closeOverlay();
     }
-  }
+  }, [previousPath, closeOverlay, ref]);
 
-  render() {
-    const { ariaLabel, title, children, actions, isFixedHeight } = this.props;
-    return (
-      <div
-        className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
-      >
-        <div className="overlay__content">
-          <section
-            role="main"
-            aria-label={ariaLabel}
-            ref={(node) => {
-              this.node = node;
-            }}
-            className="overlay__body"
-          >
-            <header className="overlay__header">
-              <h2 className="overlay__title">{title}</h2>
-              <div className="overlay__actions">
-                {actions}
-                <button
-                  className="overlay__close-button"
-                  onClick={this.close}
-                  aria-label={this.props.t('Overlay.AriaLabel', { title })}
-                >
-                  <ExitIcon focusable="false" aria-hidden="true" />
-                </button>
-              </div>
-            </header>
-            {children}
-          </section>
-        </div>
+  useModalClose(close, ref);
+
+  return (
+    <div
+      className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
+    >
+      <div className="overlay__content">
+        <section
+          role="main"
+          aria-label={ariaLabel}
+          ref={ref}
+          className="overlay__body"
+        >
+          <header className="overlay__header">
+            <h2 className="overlay__title">{title}</h2>
+            <div className="overlay__actions">
+              {actions}
+              <button
+                className="overlay__close-button"
+                onClick={close}
+                aria-label={t('Overlay.AriaLabel', { title })}
+              >
+                <ExitIcon focusable="false" aria-hidden="true" />
+              </button>
+            </div>
+          </header>
+          {children}
+        </section>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 Overlay.propTypes = {
   children: PropTypes.element,
   actions: PropTypes.element,
   closeOverlay: PropTypes.func,
   title: PropTypes.string,
   ariaLabel: PropTypes.string,
-  previousPath: PropTypes.string,
-  isFixedHeight: PropTypes.bool,
-  t: PropTypes.func.isRequired
+  isFixedHeight: PropTypes.bool
 };
 
 Overlay.defaultProps = {
@@ -114,8 +84,7 @@ Overlay.defaultProps = {
   title: 'Modal',
   closeOverlay: null,
   ariaLabel: 'modal',
-  previousPath: '/',
   isFixedHeight: false
 };
 
-export default withTranslation()(Overlay);
+export default Overlay;