Fix problems in MobileIDEView (#2184)

client/components/Nav.jsx

@@ -13,6 +13,8 @@ import {
   setAllAccessibleOutput,
   setLanguage
 } from '../modules/IDE/actions/preferences';
+import { DocumentKeyDown } from '../modules/IDE/hooks/useKeyDownHandlers';
+import { selectRootFile } from '../modules/IDE/selectors/files';
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
@@ -63,30 +65,20 @@ class Nav extends React.PureComponent {
     this.toggleDropdownForLang = this.toggleDropdown.bind(this, 'lang');
     this.handleFocusForLang = this.handleFocus.bind(this, 'lang');
     this.handleLangSelection = this.handleLangSelection.bind(this);
-
-    this.closeDropDown = this.closeDropDown.bind(this);
   }
 
   componentDidMount() {
     document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.closeDropDown, false);
   }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.closeDropDown, false);
   }
   setDropdown(dropdown) {
     this.setState({
       dropdownOpen: dropdown
     });
   }
 
-  closeDropDown(e) {
-    if (e.keyCode === 27) {
-      this.setDropdown('none');
-    }
-  }
-
   handleClick(e) {
     if (!this.node) {
       return;
@@ -929,6 +921,11 @@ class Nav extends React.PureComponent {
           {this.renderLeftLayout(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
+        <DocumentKeyDown
+          handlers={{
+            escape: () => this.setDropdown('none')
+          }}
+        />
       </header>
     );
   }
@@ -1001,7 +998,7 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter((file) => file.name === 'root')[0],
+    rootFile: selectRootFile(state),
     language: state.preferences.language,
     isUserOwner: getIsUserOwner(state)
   };

client/components/RootPage.jsx

@@ -1,13 +1,19 @@
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { prop } from '../theme';
 
 const RootPage = styled.div`
-  min-height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
   height: ${({ fixedHeight }) => fixedHeight || 'initial'};
 `;
 
+RootPage.propTypes = {
+  fixedHeight: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+
 export default RootPage;

client/components/mobile/ActionStrip.jsx

@@ -45,7 +45,7 @@ const ActionStrip = ({ actions }) => (
 ActionStrip.propTypes = {
   actions: PropTypes.arrayOf(
     PropTypes.shape({
-      icon: PropTypes.component,
+      icon: PropTypes.elementType,
       aria: PropTypes.string.isRequired,
       action: PropTypes.func.isRequired,
       inverted: PropTypes.bool

client/components/mobile/Explorer.jsx

@@ -1,15 +1,18 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
-import Sidebar from './Sidebar';
+import { useSelector } from 'react-redux';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
+import { selectRootFile } from '../../modules/IDE/selectors/files';
+import Sidebar from './Sidebar';
 
-const Explorer = ({ id, canEdit, onPressClose }) => {
+const Explorer = ({ canEdit, onPressClose }) => {
   const { t } = useTranslation();
+  const root = useSelector(selectRootFile);
   return (
     <Sidebar title={t('Explorer.Files')} onPressClose={onPressClose}>
       <ConnectedFileNode
-        id={id}
+        id={root.id}
         canEdit={canEdit}
         onClickFile={() => onPressClose()}
       />
@@ -18,7 +21,6 @@ const Explorer = ({ id, canEdit, onPressClose }) => {
 };
 
 Explorer.propTypes = {
-  id: PropTypes.number.isRequired,
   onPressClose: PropTypes.func,
   canEdit: PropTypes.bool
 };

client/components/mobile/MobileScreen.jsx

@@ -1,45 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { remSize, prop } from '../../theme';
+import { remSize } from '../../theme';
+import RootPage from '../RootPage';
 
-const ScreenWrapper = styled.div`
+const Screen = styled(RootPage)`
   .toast {
     font-size: ${remSize(12)};
     padding: ${remSize(8)};
-
     border-radius: ${remSize(4)};
     width: 92%;
     top: unset;
     min-width: unset;
     bottom: ${remSize(64)};
   }
-  ${({ fullscreen }) =>
-    fullscreen &&
-    `
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-flow: column;
-    background-color: ${prop('backgroundColor')}
-  `}
+  height: 100vh;
 `;
 
-const Screen = ({ children, fullscreen, slimheader }) => (
-  <ScreenWrapper fullscreen={fullscreen} slimheader={slimheader}>
-    {children}
-  </ScreenWrapper>
-);
-
-Screen.defaultProps = {
-  fullscreen: false,
-  slimheader: false
-};
-
-Screen.propTypes = {
-  children: PropTypes.node.isRequired,
-  fullscreen: PropTypes.bool,
-  slimheader: PropTypes.bool
-};
-
 export default Screen;

client/constants.js

@@ -59,6 +59,7 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT';
 export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
+export const TOGGLE_CONSOLE = 'TOGGLE_CONSOLE';
 
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';

client/modules/App/components/Overlay.jsx

@@ -4,19 +4,18 @@ import { browserHistory } from 'react-router';
 import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
+import { DocumentKeyDown } from '../../IDE/hooks/useKeyDownHandlers';
 
 class Overlay extends React.Component {
   constructor(props) {
     super(props);
     this.close = this.close.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.keyPressHandle = this.keyPressHandle.bind(this);
   }
 
   componentWillMount() {
     document.addEventListener('mousedown', this.handleClick, false);
-    document.addEventListener('keydown', this.keyPressHandle);
   }
 
   componentDidMount() {
@@ -25,7 +24,6 @@ class Overlay extends React.Component {
 
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    document.removeEventListener('keydown', this.keyPressHandle);
   }
 
   handleClick(e) {
@@ -40,14 +38,6 @@ class Overlay extends React.Component {
     this.close();
   }
 
-  keyPressHandle(e) {
-    // escape key code = 27.
-    // So here we are checking if the key pressed was Escape key.
-    if (e.keyCode === 27) {
-      this.close();
-    }
-  }
-
   close() {
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
@@ -90,6 +80,7 @@ class Overlay extends React.Component {
               </div>
             </header>
             {children}
+            <DocumentKeyDown handlers={{ escape: () => this.close() }} />
           </section>
         </div>
       </div>

client/modules/IDE/actions/ide.js

@@ -115,6 +115,12 @@ export function collapseConsole() {
   };
 }
 
+export function toggleConsole() {
+  return {
+    type: ActionTypes.TOGGLE_CONSOLE
+  };
+}
+
 export function openPreferences() {
   return {
     type: ActionTypes.OPEN_PREFERENCES

client/modules/IDE/components/About.jsx

@@ -8,7 +8,7 @@ import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
 import packageData from '../../../../package.json';
 
-function About(props) {
+function About() {
   const { t } = useTranslation();
   const p5version = useSelector((state) => {
     const index = state.files.find((file) => file.name === 'index.html');