♻️ refactor <Console /> to use hooks

Author: ghalestrilo

client/components/mobile/Footer.jsx

@@ -1,20 +1,42 @@
 import React from 'react';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
+
 const background = prop('MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
-const Footer = styled.div`
+const FooterWrapper = styled.div`
   position: fixed;
   width: 100%;
+  bottom: 0;
+`;
+
+const FooterContent = styled.div`
   background: ${background};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(32)};
-  z-index: 1;
-
-  bottom: 0;
 `;
 
+const Footer = ({ before, children }) => (
+  <FooterWrapper>
+    {before}
+    <FooterContent>
+      {children}
+    </FooterContent>
+  </FooterWrapper>
+);
+
+Footer.propTypes = {
+  before: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+};
+
+Footer.defaultProps = {
+  before: <></>,
+  children: <></>
+};
+
 export default Footer;

client/modules/IDE/components/Console.jsx

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { bindActionCreators } from 'redux';
+
+import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import {
@@ -22,7 +25,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 +138,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 +152,46 @@ Console.propTypes = {
   fontSize: PropTypes.number.isRequired
 };
 
-Console.defaultProps = {
+ConsoleComponent.defaultProps = {
   consoleEvents: []
 };
 
+const Console = () => {
+  const consoleEvents = useSelector(state => state.console);
+  const { consoleIsExpanded } = useSelector(state => state.ide);
+  const { theme, fontSize } = useSelector(state => state.preferences);
+
+  const {
+    collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
+  } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
+
+  return (
+    <ConsoleComponent
+      consoleEvents={consoleEvents}
+      isExpanded={consoleIsExpanded}
+      theme={theme}
+      fontSize={fontSize}
+      collapseConsole={collapseConsole}
+      expandConsole={expandConsole}
+      clearConsole={clearConsole}
+      dispatchConsoleEvent={dispatchConsoleEvent}
+    />
+  );
+};
+
+// 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,6 +26,8 @@ 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);
 
@@ -94,7 +97,9 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer><h2>Bottom Bar</h2></Footer>
+      <Footer before={<Console />} >
+        <h2>Bottom Bar</h2>
+      </Footer>
     </Screen>
   );
 };

client/modules/Mobile/MobilePreferences.jsx

@@ -89,27 +89,4 @@ const MobilePreferences = () => {
     </Screen>);
 };
 
-
-MobilePreferences.propTypes = {
-  fontSize: PropTypes.number.isRequired,
-  lineNumbers: PropTypes.bool.isRequired,
-  autosave: PropTypes.bool.isRequired,
-  linewrap: PropTypes.bool.isRequired,
-  textOutput: PropTypes.bool.isRequired,
-  gridOutput: PropTypes.bool.isRequired,
-  soundOutput: PropTypes.bool.isRequired,
-  lintWarning: PropTypes.bool.isRequired,
-  theme: PropTypes.string.isRequired,
-
-  setLinewrap: PropTypes.func.isRequired,
-  setLintWarning: PropTypes.func.isRequired,
-  setTheme: PropTypes.func.isRequired,
-  setFontSize: PropTypes.func.isRequired,
-  setLineNumbers: PropTypes.func.isRequired,
-  setAutosave: PropTypes.func.isRequired,
-  setTextOutput: PropTypes.func.isRequired,
-  setGridOutput: PropTypes.func.isRequired,
-  setSoundOutput: PropTypes.func.isRequired,
-};
-
 export default withRouter(MobilePreferences);

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';
@@ -17,6 +18,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`
   z-index: 0;
@@ -73,6 +75,7 @@ const MobileSketchView = (props) => {
           clearConsole={clearConsole}
         />
       </Content>
+      <Footer before={<Console />} />
     </Screen>);
 };