🚧 connect <Console />

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;

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>

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>);
 };