Merge pull request #1502 from ghalestrilo/feature/error-output

Add <Console /> to Mobile Views

Author: ghalestrilo

client/components/mobile/Footer.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import { prop, remSize } from '../../theme';
+import { prop } from '../../theme';
+
 
 const background = prop('MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
-const Footer = styled.div`
+export default styled.div`
   position: fixed;
   width: 100%;
+  bottom: 0;
   background: ${background};
   color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  z-index: 1;
-
-  bottom: 0;
 `;
-
-export default Footer;

client/modules/IDE/components/Console.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useSelector, useDispatch, connect } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import {
@@ -22,7 +23,10 @@ import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
 
-class Console extends React.Component {
+import * as IDEActions from '../../IDE/actions/ide';
+import * as ConsoleActions from '../../IDE/actions/console';
+
+class ConsoleComponent extends React.Component {
   componentDidUpdate(prevProps) {
     this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
     if (this.props.theme !== prevProps.theme) {
@@ -132,7 +136,7 @@ class Console extends React.Component {
   }
 }
 
-Console.propTypes = {
+ConsoleComponent.propTypes = {
   consoleEvents: PropTypes.arrayOf(PropTypes.shape({
     method: PropTypes.string.isRequired,
     args: PropTypes.arrayOf(PropTypes.string)
@@ -146,8 +150,47 @@ Console.propTypes = {
   fontSize: PropTypes.number.isRequired
 };
 
-Console.defaultProps = {
+ConsoleComponent.defaultProps = {
   consoleEvents: []
 };
 
+// TODO: Use Hooks implementation. Requires react-redux 7.1.0
+/*
+const Console = () => {
+  const consoleEvents = useSelector(state => state.console);
+  const { consoleIsExpanded } = useSelector(state => state.ide);
+  const { theme, fontSize } = useSelector(state => state.preferences);
+
+  const dispatch = useDispatch();
+
+  return (
+    <ConsoleComponent
+      consoleEvents={consoleEvents}
+      isExpanded={consoleIsExpanded}
+      theme={theme}
+      fontSize={fontSize}
+      collapseConsole={() => dispatch({})}
+      expandConsole={() => dispatch({})}
+      clearConsole={() => dispatch({})}
+      dispatchConsoleEvent={() => dispatch({})}
+    />
+  );
+};
+ */
+
+const Console = connect(
+  state => ({
+    consoleEvents: state.console,
+    isExpanded: state.ide.consoleIsExpanded,
+    theme: state.preferences.theme,
+    fontSize: state.preferences.fontSize
+  }),
+  dispatch => ({
+    collapseConsole: () => dispatch(IDEActions.collapseConsole()),
+    expandConsole: () => dispatch(IDEActions.expandConsole()),
+    clearConsole: () => dispatch(ConsoleActions.clearConsole()),
+    dispatchConsoleEvent: msgs => dispatch(ConsoleActions.dispatchConsoleEvent(msgs)),
+  })
+)(ConsoleComponent);
+
 export default Console;

client/modules/IDE/pages/IDEView.jsx

@@ -324,16 +324,7 @@ class IDEView extends React.Component {
                   runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
                   provideController={(ctl) => { this.cmController = ctl; }}
                 />
-                <Console
-                  fontSize={this.props.preferences.fontSize}
-                  consoleEvents={this.props.console}
-                  isExpanded={this.props.ide.consoleIsExpanded}
-                  expandConsole={this.props.expandConsole}
-                  collapseConsole={this.props.collapseConsole}
-                  clearConsole={this.props.clearConsole}
-                  dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                  theme={this.props.preferences.theme}
-                />
+                <Console />
               </SplitPane>
               <section className="preview-frame-holder">
                 <header className="preview-frame__header">
@@ -649,6 +640,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-
 export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
-

client/modules/IDE/pages/MobileIDEView.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { useState } from 'react';
+import styled from 'styled-components';
 
 // Imports to be Refactored
 import { bindActionCreators } from 'redux';
@@ -25,9 +26,16 @@ import Header from '../../../components/mobile/Header';
 import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
+import Console from '../components/Console';
+import { remSize } from '../../../theme';
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
+const BottomBarContent = styled.h2`
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+`;
+
 const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@@ -94,7 +102,10 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer><h2>Bottom Bar</h2></Footer>
+      <Footer>
+        <Console />
+        <BottomBarContent>Bottom Bar</BottomBarContent>
+      </Footer>
     </Screen>
   );
 };

client/modules/Mobile/MobileSketchView.jsx

@@ -7,6 +7,7 @@ import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
 import PreviewFrame from '../IDE/components/PreviewFrame';
 import Screen from '../../components/mobile/MobileScreen';
+import Console from '../IDE/components/Console';
 import * as ProjectActions from '../IDE/actions/project';
 import * as IDEActions from '../IDE/actions/ide';
 import * as PreferencesActions from '../IDE/actions/preferences';
@@ -18,6 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
 
 import { ExitIcon } from '../../common/icons';
 import { remSize } from '../../theme';
+import Footer from '../../components/mobile/Footer';
 
 
 const Content = styled.div`
@@ -82,6 +84,9 @@ const MobileSketchView = (props) => {
           clearConsole={clearConsole}
         />
       </Content>
+      <Footer>
+        <Console />
+      </Footer>
     </Screen>);
 };
 
@@ -146,7 +151,6 @@ MobileSketchView.propTypes = {
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-    uploadFileModalVisible: PropTypes.bool.isRequired
   }).isRequired,
 
   projectName: PropTypes.string.isRequired,