client/modules/App/components/Overlay: update to types & to named export

Author: clairep94

client/modules/App/components/Overlay.tsx

@@ -1,26 +1,37 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useRef } from 'react';
 import MediaQuery from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useModalClose } from '../../../common/useModalClose';
+import type { RootState } from '../../../reducers';
 
 import ExitIcon from '../../../images/exit.svg';
 
-const Overlay = ({
+type OverlayProps = {
+  children?: React.ReactElement;
+  actions?: React.ReactElement;
+  closeOverlay?: () => void;
+  title?: string;
+  ariaLabel?: string;
+  isFixedHeight?: boolean;
+};
+
+export const Overlay = ({
   actions,
-  ariaLabel,
+  ariaLabel = 'modal',
   children,
   closeOverlay,
-  isFixedHeight,
-  title
-}) => {
+  isFixedHeight = false,
+  title = 'Modal'
+}: OverlayProps) => {
   const { t } = useTranslation();
 
-  const previousPath = useSelector((state) => state.ide.previousPath);
+  const previousPath = useSelector(
+    (state: RootState) => state.ide.previousPath
+  );
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLElement>(null);
 
   const browserHistory = useHistory();
 
@@ -29,7 +40,7 @@ const Overlay = ({
     if (!node) return;
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
-    if (node.parentElement.parentElement !== overlays[overlays.length - 1])
+    if (node.parentElement?.parentElement !== overlays[overlays.length - 1])
       return;
 
     if (!closeOverlay) {
@@ -76,23 +87,3 @@ const Overlay = ({
     </div>
   );
 };
-
-Overlay.propTypes = {
-  children: PropTypes.element,
-  actions: PropTypes.element,
-  closeOverlay: PropTypes.func,
-  title: PropTypes.string,
-  ariaLabel: PropTypes.string,
-  isFixedHeight: PropTypes.bool
-};
-
-Overlay.defaultProps = {
-  children: null,
-  actions: null,
-  title: 'Modal',
-  closeOverlay: null,
-  ariaLabel: 'modal',
-  isFixedHeight: false
-};
-
-export default Overlay;

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -13,7 +13,7 @@ import * as ToastActions from '../../actions/toast';
 import * as SortingActions from '../../actions/sorting';
 import getSortedCollections from '../../selectors/collections';
 import { Loader } from '../../../App/components/Loader';
-import Overlay from '../../../App/components/Overlay';
+import { Overlay } from '../../../App/components/Overlay';
 import AddToCollectionSketchList from '../AddToCollectionSketchList';
 import { SketchSearchbar } from '../Searchbar';
 

client/modules/IDE/components/Header/MobileNav.jsx

@@ -32,7 +32,7 @@ import { selectSketchPath } from '../../selectors/project';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
-import Overlay from '../../../App/components/Overlay';
+import { Overlay } from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
 

client/modules/IDE/components/IDEOverlays.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
-import Overlay from '../../App/components/Overlay';
+import { Overlay } from '../../App/components/Overlay';
 import {
   closeKeyboardShortcutModal,
   closePreferences,

client/modules/IDE/components/SketchList.jsx

@@ -12,7 +12,7 @@ import * as ToastActions from '../actions/toast';
 import * as SortingActions from '../actions/sorting';
 import getSortedSketches from '../selectors/projects';
 import { Loader } from '../../App/components/Loader';
-import Overlay from '../../App/components/Overlay';
+import { Overlay } from '../../App/components/Overlay';
 import AddToCollectionList from './AddToCollectionList';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';

client/modules/User/components/CollectionMetadata.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button } from '../../../common/Button';
-import Overlay from '../../App/components/Overlay';
+import { Overlay } from '../../App/components/Overlay';
 import { editCollection } from '../../IDE/actions/collections';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import EditableInput from '../../IDE/components/EditableInput';

client/modules/User/pages/AccountView.tsx

@@ -14,7 +14,7 @@ import { APIKeyForm } from '../components/APIKeyForm';
 import Nav from '../../IDE/components/Header/Nav';
 import ErrorModal from '../../IDE/components/ErrorModal';
 import { hideErrorModal } from '../../IDE/actions/ide';
-import Overlay from '../../App/components/Overlay';
+import { Overlay } from '../../App/components/Overlay';
 import Toast from '../../IDE/components/Toast';
 import { RootState } from '../../../reducers';
 

client/modules/User/pages/DashboardView.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Button } from '../../../common/Button';
 import Nav from '../../IDE/components/Header/Nav';
-import Overlay from '../../App/components/Overlay';
+import { Overlay } from '../../App/components/Overlay';
 import AssetList from '../../IDE/components/AssetList';
 import AssetSize from '../../IDE/components/AssetSize';
 import CollectionList from '../../IDE/components/CollectionList';

package-lock.json

@@ -148,6 +148,7 @@
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.25",
     "@types/react-helmet": "^6.1.11",
+    "@types/react-responsive": "^8.0.8",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-tabs": "^2.3.1",
     "@types/react-transition-group": "^4.4.12",