Merge branch 'release-2.19.4' into release

Author: raclim

client/common/Button.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
+import { Button, ButtonDisplays, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {

client/index.jsx

@@ -7,8 +7,8 @@ import { useTranslation } from 'react-i18next';
 import browserHistory from './browserHistory';
 import { setupStore } from './store';
 import Routing from './routes';
-import ThemeProvider from './modules/App/components/ThemeProvider';
-import Loader from './modules/App/components/loader';
+import { ThemeProvider } from './modules/App/components/ThemeProvider';
+import { Loader } from './modules/App/components/Loader';
 import './i18n';
 import { SkipLink } from './components/SkipLink';
 

client/modules/App/App.jsx client/modules/App/App.tsxclient/modules/App/App.jsx renamed to client/modules/App/App.tsx

@@ -1,40 +1,38 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { showReduxDevTools } from '../../store';
-import DevTools from './components/DevTools';
+import { DevTools } from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
 import { CookieConsent } from '../User/components/CookieConsent';
+import type { RootState } from '../../reducers';
 
-function hideCookieConsent(pathname) {
+function hideCookieConsent(pathname: string) {
   if (pathname.includes('/full/') || pathname.includes('/embed/')) {
     return true;
   }
   return false;
 }
 
-const App = ({ children }) => {
+export const App = ({ children }: { children?: React.ReactNode }) => {
   const dispatch = useDispatch();
 
-  const location = useLocation();
+  const location = useLocation<{ skipSavingPath?: boolean }>();
 
-  const theme = useSelector((state) => state.preferences.theme);
+  const theme = useSelector((state: RootState) => state.preferences.theme);
   useEffect(() => {
     document.body.className = theme;
   }, [theme]);
 
   // TODO: this is only needed for the initial load and would be better handled elsewhere - Linda
-  const language = useSelector((state) => state.preferences.language);
+  const language = useSelector(
+    (state: RootState) => state.preferences.language
+  );
   useEffect(() => {
     dispatch(setLanguage(language, { persistPreference: false }));
   }, [language]);
 
-  // TODO: do we actually need this? - Linda
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(() => setIsMounted(true), []);
-
   const previousLocationRef = useRef(location);
   useEffect(() => {
     const prevLocation = previousLocationRef.current;
@@ -52,18 +50,8 @@ const App = ({ children }) => {
   return (
     <div className="app">
       <CookieConsent hide={hide} />
-      {isMounted && showReduxDevTools() && <DevTools />}
+      {showReduxDevTools() && <DevTools />}
       {children}
     </div>
   );
 };
-
-App.propTypes = {
-  children: PropTypes.element
-};
-
-App.defaultProps = {
-  children: null
-};
-
-export default App;

…ient/modules/App/components/DevTools.jsx …ient/modules/App/components/DevTools.tsxclient/modules/App/components/DevTools.jsx renamed to client/modules/App/components/DevTools.tsx client/modules/App/components/DevTools.jsx renamed to client/modules/App/components/DevTools.tsx

@@ -9,4 +9,4 @@ const devTools = (
   </DockMonitor>
 );
 
-export default createDevTools(devTools);
+export const DevTools = createDevTools(devTools);

client/modules/App/components/loader.jsx client/modules/App/components/Loader.tsxclient/modules/App/components/loader.jsx renamed to client/modules/App/components/Loader.tsx

@@ -44,12 +44,11 @@ const LoaderCircle = styled.div`
   }
 `;
 
-const Loader = () => (
+export const Loader = () => (
   <Container>
     <LoaderWrapper>
       <LoaderCircle />
       <LoaderCircle />
     </LoaderWrapper>
   </Container>
 );
-export default Loader;

client/modules/App/components/Overlay.jsx client/modules/App/components/Overlay.tsxclient/modules/App/components/Overlay.jsx renamed to 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/App/components/ThemeProvider.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { ThemeProvider as TProvider } from 'styled-components';
+import theme from '../../../theme';
+import type { RootState } from '../../../reducers';
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const currentTheme = useSelector(
+    (state: RootState) => state.preferences.theme
+  );
+  return <TProvider theme={{ ...theme[currentTheme] }}>{children}</TProvider>;
+};

client/modules/App/components/ThemeProvider.tsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import Loader from '../../App/components/loader';
+import { Loader } from '../../App/components/Loader';
 import {
   addToCollection,
   getCollections,

client/modules/IDE/components/AddToCollectionList.jsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { addToCollection, removeFromCollection } from '../actions/collections';
 import { getProjects } from '../actions/projects';
 import getSortedSketches from '../selectors/projects';
-import Loader from '../../App/components/loader';
+import { Loader } from '../../App/components/Loader';
 import QuickAddList from './QuickAddList';
 import {
   CollectionAddSketchWrapper,