From c44e60e9b215e6230a5a38577c15621809da17cd Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 15:51:54 -0300
Subject: [PATCH 01/11] :construction: remove sidebar (temp)

---
 client/modules/App/App.jsx | 3 ++-
 package-lock.json          | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index af441a9d..15bf7d19 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove "false &&" from line below */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );
diff --git a/package-lock.json b/package-lock.json
index d7e618ac..710be64b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11017,7 +11017,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": ""
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
         }
       }
     },
@@ -34869,7 +34870,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": ""
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
         }
       }
     },

From 18e945c7d5d482ed593f6e7dff555f6aad8c8d4c Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 17:24:12 -0300
Subject: [PATCH 02/11] :construction: Improve Footer, Emplace Console
 component

---
 client/components/mobile/Footer.jsx        | 31 +++++++++++++++++++---
 client/modules/App/App.jsx                 |  1 +
 client/modules/IDE/pages/MobileIDEView.jsx | 22 ++++++++++++++-
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index 5d82d3c7..d84b7275 100644
--- a/client/components/mobile/Footer.jsx
+++ b/client/components/mobile/Footer.jsx
@@ -1,20 +1,43 @@
 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.element
+};
+
+Footer.defaultProps = {
+  before: <></>,
+  children: <></>
+};
+
 export default Footer;
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 15bf7d19..79a8549f 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -36,6 +36,7 @@ class App extends React.Component {
       <div className="app">
         {/* FIXME: remove "false &&" from line below */}
         {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />} */}
         {this.props.children}
       </div>
     );
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 180cbb2e..7bc916f1 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/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);
 
@@ -40,6 +43,11 @@ const MobileIDEView = (props) => {
   const [tmController, setTmController] = useState(null); // eslint-disable-line
   const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
+  // FIXME:
+  const dispatchConsoleEvent = () => {};
+  const expandConsole = () => {};
+  const collapseConsole = () => {};
+
   return (
     <Screen fullscreen>
       <Header
@@ -94,7 +102,19 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer><h2>Bottom Bar</h2></Footer>
+      <Footer before={<Console
+        fontSize={preferences.fontSize}
+        consoleEvents={console}
+        isExpanded={ide.consoleIsExpanded}
+        clearConsole={clearConsole}
+        theme={preferences.theme}
+        dispatchConsoleEvent={dispatchConsoleEvent}
+        expandConsole={expandConsole}
+        collapseConsole={collapseConsole}
+      />}
+      >
+        <h2>Bottom Bar</h2>
+      </Footer>
     </Screen>
   );
 };

From 95295422a3fe84f855903a87055fae1b46d6670a Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 17:32:38 -0300
Subject: [PATCH 03/11] :construction: update children prop type

---
 client/components/mobile/Footer.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index d84b7275..a90079cc 100644
--- a/client/components/mobile/Footer.jsx
+++ b/client/components/mobile/Footer.jsx
@@ -20,7 +20,6 @@ const FooterContent = styled.div`
   padding-left: ${remSize(32)};
 `;
 
-
 const Footer = ({ before, children }) => (
   <FooterWrapper>
     {before}
@@ -32,7 +31,7 @@ const Footer = ({ before, children }) => (
 
 Footer.propTypes = {
   before: PropTypes.element,
-  children: PropTypes.element
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
 };
 
 Footer.defaultProps = {

From 8e137d0b6891a577d01c2df94259d093be16e765 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 17:44:47 -0300
Subject: [PATCH 04/11] :construction: Add Console to Preview Screen

---
 client/modules/Mobile/MobileSketchView.jsx | 25 ++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index 64eabb5e..9ba811cc 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/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`
@@ -39,13 +41,16 @@ const MobileSketchView = (props) => {
   // Actions
   const {
     setTextOutput, setGridOutput, setSoundOutput,
-    endSketchRefresh, stopSketch,
+    endSketchRefresh, stopSketch, console,
     dispatchConsoleEvent, expandConsole, clearConsole,
     setBlobUrl,
   } = props;
 
   const { preferences, ide } = props;
 
+  // FIXME:
+  const collapseConsole = () => {};
+
   return (
     <Screen fullscreen>
       <Header
@@ -82,6 +87,17 @@ const MobileSketchView = (props) => {
           clearConsole={clearConsole}
         />
       </Content>
+      <Footer before={<Console
+        fontSize={preferences.fontSize}
+        consoleEvents={console}
+        isExpanded={ide.consoleIsExpanded}
+        clearConsole={clearConsole}
+        theme={preferences.theme}
+        dispatchConsoleEvent={dispatchConsoleEvent}
+        expandConsole={expandConsole}
+        collapseConsole={collapseConsole}
+      />}
+      />
     </Screen>);
 };
 
@@ -146,7 +162,6 @@ MobileSketchView.propTypes = {
     justOpenedProject: PropTypes.bool.isRequired,
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
-    uploadFileModalVisible: PropTypes.bool.isRequired
   }).isRequired,
 
   projectName: PropTypes.string.isRequired,
@@ -160,6 +175,11 @@ MobileSketchView.propTypes = {
   setBlobUrl: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   clearConsole: PropTypes.func.isRequired,
+
+  console: PropTypes.arrayOf(PropTypes.shape({
+    method: PropTypes.string.isRequired,
+    args: PropTypes.arrayOf(PropTypes.string)
+  })).isRequired,
 };
 
 function mapStateToProps(state) {
@@ -169,6 +189,7 @@ function mapStateToProps(state) {
     files: state.files,
     ide: state.ide,
     preferences: state.preferences,
+    console: state.console,
     selectedFile: state.files.find(file => file.isSelectedFile) ||
       state.files.find(file => file.name === 'sketch.js') ||
       state.files.find(file => file.name !== 'root'),

From dd1141bfbc6e979bd32a3dde4b996b7f1e5e5ab7 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 18:17:01 -0300
Subject: [PATCH 05/11] :construction: connect <Console />

---
 client/modules/IDE/components/Console.jsx  | 47 ++++++++++++++++++++--
 client/modules/IDE/pages/MobileIDEView.jsx | 12 +-----
 client/modules/Mobile/MobileSketchView.jsx | 12 +-----
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index 37711d27..e62b9236 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/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,45 @@ 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 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;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 7bc916f1..ba83f6fe 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -102,17 +102,7 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer before={<Console
-        fontSize={preferences.fontSize}
-        consoleEvents={console}
-        isExpanded={ide.consoleIsExpanded}
-        clearConsole={clearConsole}
-        theme={preferences.theme}
-        dispatchConsoleEvent={dispatchConsoleEvent}
-        expandConsole={expandConsole}
-        collapseConsole={collapseConsole}
-      />}
-      >
+      <Footer before={<Console />} >
         <h2>Bottom Bar</h2>
       </Footer>
     </Screen>
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index 9ba811cc..2c47450b 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -87,17 +87,7 @@ const MobileSketchView = (props) => {
           clearConsole={clearConsole}
         />
       </Content>
-      <Footer before={<Console
-        fontSize={preferences.fontSize}
-        consoleEvents={console}
-        isExpanded={ide.consoleIsExpanded}
-        clearConsole={clearConsole}
-        theme={preferences.theme}
-        dispatchConsoleEvent={dispatchConsoleEvent}
-        expandConsole={expandConsole}
-        collapseConsole={collapseConsole}
-      />}
-      />
+      <Footer before={<Console />} />
     </Screen>);
 };
 

From 0c0fceee1a5229c20149f346f8f79d326b528db5 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 15 Jul 2020 18:26:34 -0300
Subject: [PATCH 06/11] :broom: remove console props from MobilePreview

---
 client/modules/IDE/components/Console.jsx  | 40 ++++++++++++----------
 client/modules/Mobile/MobileSketchView.jsx | 11 +-----
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index e62b9236..2bd3af7e 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -154,27 +154,29 @@ ConsoleComponent.defaultProps = {
   consoleEvents: []
 };
 
-// const Console = () => {
-//   const consoleEvents = useSelector(state => state.console);
-//   const { consoleIsExpanded } = useSelector(state => state.ide);
-//   const { theme, fontSize } = useSelector(state => state.preferences);
+// 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 dispatch = useDispatch();
 
+  return (
+    <ConsoleComponent
+      consoleEvents={consoleEvents}
+      isExpanded={consoleIsExpanded}
+      theme={theme}
+      fontSize={fontSize}
+      collapseConsole={() => dispatch({})}
+      expandConsole={() => dispatch({})}
+      clearConsole={() => dispatch({})}
+      dispatchConsoleEvent={() => dispatch({})}
+    />
+  );
+};
+ */
 
 const Console = connect(
   state => ({
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index 2c47450b..91b7c41f 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -41,16 +41,13 @@ const MobileSketchView = (props) => {
   // Actions
   const {
     setTextOutput, setGridOutput, setSoundOutput,
-    endSketchRefresh, stopSketch, console,
+    endSketchRefresh, stopSketch,
     dispatchConsoleEvent, expandConsole, clearConsole,
     setBlobUrl,
   } = props;
 
   const { preferences, ide } = props;
 
-  // FIXME:
-  const collapseConsole = () => {};
-
   return (
     <Screen fullscreen>
       <Header
@@ -165,11 +162,6 @@ MobileSketchView.propTypes = {
   setBlobUrl: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   clearConsole: PropTypes.func.isRequired,
-
-  console: PropTypes.arrayOf(PropTypes.shape({
-    method: PropTypes.string.isRequired,
-    args: PropTypes.arrayOf(PropTypes.string)
-  })).isRequired,
 };
 
 function mapStateToProps(state) {
@@ -179,7 +171,6 @@ function mapStateToProps(state) {
     files: state.files,
     ide: state.ide,
     preferences: state.preferences,
-    console: state.console,
     selectedFile: state.files.find(file => file.isSelectedFile) ||
       state.files.find(file => file.name === 'sketch.js') ||
       state.files.find(file => file.name !== 'root'),

From b55bec18d4f05adb224fff0461246142849024fb Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 16 Jul 2020 18:20:52 -0300
Subject: [PATCH 07/11] :recycle: use connected <Console /> on IDEView

---
 client/modules/IDE/pages/IDEView.jsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index bc05ef2a..fbcecf1b 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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)));
-

From b2ba22a076d0b5f1260f7697419d15558f5ac1ca Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 16 Jul 2020 18:48:18 -0300
Subject: [PATCH 08/11] :ok_hand: revert hide sidebar

---
 client/modules/App/App.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 79a8549f..af441a9d 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -34,9 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {/* FIXME: remove "false &&" from line below */}
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
-        {/* {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />} */}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

From dd15f805adeb3c88fa64d00dfed777278966bfbc Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 16 Jul 2020 18:49:12 -0300
Subject: [PATCH 09/11] :broom: remove FIXME

---
 client/modules/IDE/pages/MobileIDEView.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index ba83f6fe..917415e2 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -43,11 +43,6 @@ const MobileIDEView = (props) => {
   const [tmController, setTmController] = useState(null); // eslint-disable-line
   const [overlay, setOverlay] = useState(null); // eslint-disable-line
 
-  // FIXME:
-  const dispatchConsoleEvent = () => {};
-  const expandConsole = () => {};
-  const collapseConsole = () => {};
-
   return (
     <Screen fullscreen>
       <Header

From 2e07990293136d347c4d6fef8c7380f46c950dc7 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 20 Jul 2020 18:51:42 -0300
Subject: [PATCH 10/11] :ok_hand: refactor <Footer />

---
 client/components/mobile/Footer.jsx        | 31 ++--------------------
 client/modules/IDE/pages/MobileIDEView.jsx | 10 +++++--
 2 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index a90079cc..25f10c1d 100644
--- a/client/components/mobile/Footer.jsx
+++ b/client/components/mobile/Footer.jsx
@@ -1,42 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { prop, remSize } from '../../theme';
+import { prop } from '../../theme';
 
 
 const background = prop('MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
-const FooterWrapper = styled.div`
+export default styled.div`
   position: fixed;
   width: 100%;
   bottom: 0;
-`;
-
-const FooterContent = styled.div`
   background: ${background};
   color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
 `;
-
-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;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 917415e2..943c980e 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -31,6 +31,11 @@ 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,
@@ -97,8 +102,9 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
-      <Footer before={<Console />} >
-        <h2>Bottom Bar</h2>
+      <Footer>
+        <Console />
+        <BottomBarContent>Bottom Bar</BottomBarContent>
       </Footer>
     </Screen>
   );

From c942753866d802a6a27312f1c99989e18bb7d5c3 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 21 Jul 2020 15:58:28 -0300
Subject: [PATCH 11/11] :ok_hand: remove <Console /> from before

---
 client/modules/Mobile/MobileSketchView.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index 91b7c41f..9c80c88d 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -84,7 +84,9 @@ const MobileSketchView = (props) => {
           clearConsole={clearConsole}
         />
       </Content>
-      <Footer before={<Console />} />
+      <Footer>
+        <Console />
+      </Footer>
     </Screen>);
 };