client/modules/App/App: update to named export & resolve typeerrors

Author: clairep94

client/modules/App/App.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -7,26 +6,29 @@ 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]);
@@ -57,13 +59,3 @@ const App = ({ children }) => {
     </div>
   );
 };
-
-App.propTypes = {
-  children: PropTypes.element
-};
-
-App.defaultProps = {
-  children: null
-};
-
-export default App;

client/routes.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Route as RouterRoute, Switch } from 'react-router-dom';
 
-import App from './modules/App/App';
+import { App } from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import FullView from './modules/IDE/pages/FullView';
 import { About } from './modules/About/pages/About';