Extract common logic from modal component.

Author: lindapaiste

client/common/useModalClose.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Common logic for Modal, Overlay, etc.
+ *
+ * Pass in the `onClose` handler.
+ *
+ * Can optionally pass in a ref, in case the `onClose` function needs to use the ref.
+ *
+ * Calls the provided `onClose` function on:
+ *  - Press Escape key.
+ *  - Click outside the element.
+ *
+ * Returns a ref to attach to the outermost element of the modal.
+ *
+ * @param {() => void} onClose
+ * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
+ * @return {React.MutableRefObject<HTMLElement | null>}
+ */
+export default function useModalClose(onClose, passedRef) {
+  const createdRef = useRef(null);
+  const modalRef = passedRef || createdRef;
+
+  useEffect(() => {
+    modalRef.current?.focus();
+
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    }
+
+    function handleClick(e) {
+      // ignore clicks on the component itself
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        onClose?.();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick, false);
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick, false);
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [onClose, modalRef]);
+
+  return modalRef;
+}

client/components/Nav/NavBar.jsx

@@ -1,49 +1,19 @@
 import PropTypes from 'prop-types';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, NavBarContext } from './contexts';
 
 function NavBar({ children }) {
   const [dropdownOpen, setDropdownOpen] = useState('none');
 
   const timerRef = useRef(null);
 
-  const nodeRef = useRef(null);
-
-  useEffect(() => {
-    function handleClick(e) {
-      if (!nodeRef.current) {
-        return;
-      }
-      if (nodeRef.current.contains(e.target)) {
-        return;
-      }
-      setDropdownOpen('none');
-    }
-    document.addEventListener('mousedown', handleClick, false);
-    return () => {
-      document.removeEventListener('mousedown', handleClick, false);
-    };
-  }, [nodeRef, setDropdownOpen]);
-
-  // TODO: replace with `useKeyDownHandlers` after #2052 is merged
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.keyCode === 27) {
-        setDropdownOpen('none');
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, false);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
+  const handleClose = useCallback(() => {
+    setDropdownOpen('none');
   }, [setDropdownOpen]);
 
+  const nodeRef = useModalClose(handleClose);
+
   const clearHideTimeout = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);

client/modules/IDE/components/Modal.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
+import useModalClose from '../../../common/useModalClose';
 import ExitIcon from '../../../images/exit.svg';
 
 // Common logic from NewFolderModal, NewFileModal, UploadFileModal
@@ -12,23 +13,7 @@ const Modal = ({
   contentClassName,
   children
 }) => {
-  const modalRef = useRef(null);
-
-  const handleOutsideClick = (e) => {
-    // ignore clicks on the component itself
-    if (modalRef.current?.contains?.(e.target)) return;
-
-    onClose();
-  };
-
-  useEffect(() => {
-    modalRef.current?.focus();
-    document.addEventListener('click', handleOutsideClick, false);
-
-    return () => {
-      document.removeEventListener('click', handleOutsideClick, false);
-    };
-  }, []);
+  const modalRef = useModalClose(onClose);
 
   return (
     <section className="modal" ref={modalRef}>

client/modules/IDE/pages/IDEView.jsx

@@ -220,14 +220,6 @@ class IDEView extends React.Component {
       } else {
         this.props.expandConsole();
       }
-    } else if (e.keyCode === 27) {
-      if (this.props.ide.newFolderModalVisible) {
-        this.props.closeNewFolderModal();
-      } else if (this.props.ide.uploadFileModalVisible) {
-        this.props.closeUploadFileModal();
-      } else if (this.props.ide.modalIsVisible) {
-        this.props.closeNewFileModal();
-      }
     }
   }
 
@@ -556,8 +548,6 @@ IDEView.propTypes = {
   openProjectOptions: PropTypes.func.isRequired,
   closeProjectOptions: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,
-  closeNewFolderModal: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,