Merge branch 'develop' into fix/hindi-translation

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/common/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * If using a native button, specifies on an onClick action
    */
-  onClick?: () => void;
+  onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * If using a button, then type is defines the type of button
    */

client/common/useSyncFormTranslations.ts

@@ -1,30 +1,30 @@
 import { useEffect, MutableRefObject } from 'react';
+import type { FormApi } from 'final-form';
 
-export interface FormLike {
-  getState(): { values: Record<string, unknown> };
-  reset(): void;
-  change(field: string, value: unknown): void;
-}
+// Generic FormLike that mirrors FormApi for any form value type
+export interface FormLike<FormValues = Record<string, unknown>>
+  extends Pick<FormApi<FormValues>, 'getState' | 'reset' | 'change'> {}
 
 /**
  * This hook ensures that form values are preserved when the language changes.
  * @param formRef
  * @param language
  */
-export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+export const useSyncFormTranslations = <FormValues extends Record<string, any>>(
+  formRef: MutableRefObject<FormLike<FormValues> | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();
     form.reset();
 
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
+    (Object.keys(values) as (keyof FormValues)[]).forEach((field) => {
+      const value = values[field];
+      if (value !== undefined && value !== null && value !== '') {
+        form.change(field, value);
       }
     });
   }, [language]);

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 { 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,35 +1,49 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useRef } from 'react';
-import MediaQuery from 'react-responsive';
+import { useMediaQuery } 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.ReactNode;
+  actions?: React.ReactNode;
+  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();
 
+  const isDesktop = useMediaQuery({ minWidth: 770 });
+  const isMobile = useMediaQuery({ maxWidth: 769 });
+
   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 (node.parentElement.parentElement !== overlays[overlays.length - 1])
+    if (node.parentElement?.parentElement !== overlays[overlays.length - 1])
       return;
 
     if (!closeOverlay) {
@@ -55,7 +69,7 @@ const Overlay = ({
           <header className="overlay__header">
             <h2 className="overlay__title">{title}</h2>
             <div className="overlay__actions">
-              <MediaQuery minWidth={770}>{actions}</MediaQuery>
+              {isDesktop && actions}
               <button
                 className="overlay__close-button"
                 onClick={close}
@@ -65,34 +79,12 @@ const Overlay = ({
               </button>
             </div>
           </header>
-          <MediaQuery maxWidth={769}>
-            {actions && (
-              <div className="overlay__actions-mobile">{actions}</div>
-            )}
-          </MediaQuery>
+          {isMobile && actions && (
+            <div className="overlay__actions-mobile">{actions}</div>
+          )}
           {children}
         </section>
       </div>
     </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>;
+};