🚧 refactor <Consle /> to hooks

client/modules/IDE/components/Console.jsx

@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 
 import { bindActionCreators } from 'redux';
 
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, useState } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import {
@@ -84,88 +83,17 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
   }
 };
 
-class ConsoleComponent extends React.Component {
+// 1 . FIXME: Object is not a function 🤷🏻
-  componentDidUpdate(prevProps) {
-    this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
-  }
-
-  render() {
-    const consoleClass = classNames({
-      'preview-console': true,
-      'preview-console--collapsed': !this.props.isExpanded
-    });
-
-    console.log(this.props.isExpanded);
-
-    return (
-      <section className={consoleClass} >
-        <header className="preview-console__header">
-          <h2 className="preview-console__header-title">Console</h2>
-          <div className="preview-console__header-buttons">
-            <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
-              Clear
-            </button>
-            <button
-              className="preview-console__collapse"
-              onClick={this.props.collapseConsole}
-              aria-label="Close console"
-            >
-              <DownArrowIcon focusable="false" aria-hidden="true" />
-            </button>
-            <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="Open console" >
-              <UpArrowIcon focusable="false" aria-hidden="true" />
-            </button>
-          </div>
-        </header>
-        <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
-          {this.props.consoleEvents.map((consoleEvent) => {
-            const { method, times } = consoleEvent;
-            const { theme } = this.props;
-            return (
-              <div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}>
-                { times > 1 &&
-                  <div
-                    className="preview-console__logged-times"
-                    style={{ fontSize: this.props.fontSize, borderRadius: this.props.fontSize / 2 }}
-                  >
-                    {times}
-                  </div>
-                }
-                <ConsoleFeed
-                  styles={getConsoleFeedStyle(theme, times, this.props.fontSize)}
-                  logs={[consoleEvent]}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </section>
-    );
-  }
-}
-
-ConsoleComponent.propTypes = {
-  consoleEvents: PropTypes.arrayOf(PropTypes.shape({
-    method: PropTypes.string.isRequired,
-    args: PropTypes.arrayOf(PropTypes.string)
-  })),
-  isExpanded: PropTypes.bool.isRequired,
-  collapseConsole: PropTypes.func.isRequired,
-  expandConsole: PropTypes.func.isRequired,
-  clearConsole: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
-  fontSize: PropTypes.number.isRequired
-};
-
-ConsoleComponent.defaultProps = {
-  consoleEvents: []
-};
-
 const Console = () => {
   const consoleEvents = useSelector(state => state.console);
-  const { consoleIsExpanded } = useSelector(state => state.ide);
+  const isExpanded = useSelector(state => state.ide.consoleIsExpanded);
   const { theme, fontSize } = useSelector(state => state.preferences);
 
+  const [cm, setCm] = useState({});
+
+  // 2. FIXME: Console is not opening/closing, and I suspect it has to do with this
+  useDidUpdate(() => { if (cm) cm.scrollTop = cm.scrollHeight; });
+
   const {
     collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
@@ -175,18 +103,59 @@ const Console = () => {
     dispatchConsoleEvent(consoleEvents);
   }, [theme, fontSize]);
 
+  // const [consoleMessages, setConsoleMessages] = useState({});
+  // this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
+
+
+  const consoleClass = classNames({
+    'preview-console': true,
+    'preview-console--collapsed': isExpanded
+  });
+
   return (
-    <ConsoleComponent
+    <section className={consoleClass} >
-      consoleEvents={consoleEvents}
+      <header className="preview-console__header">
-      isExpanded={consoleIsExpanded}
+        <h2 className="preview-console__header-title">Console</h2>
-      theme={theme}
+        <div className="preview-console__header-buttons">
-      fontSize={fontSize}
+          <button className="preview-console__clear" onClick={clearConsole} aria-label="Clear console">
-      collapseConsole={collapseConsole}
+            Clear
-      expandConsole={expandConsole}
+          </button>
-      clearConsole={clearConsole}
+          <button
-      dispatchConsoleEvent={dispatchConsoleEvent}
+            className="preview-console__collapse"
-    />
+            onClick={collapseConsole}
+            aria-label="Close console"
+          >
+            <DownArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+          <button className="preview-console__expand" onClick={expandConsole} aria-label="Open console" >
+            <UpArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+        </div>
+      </header>
+      <div ref={element => setCm(element)} className="preview-console__messages">
+        {consoleEvents.map((consoleEvent) => {
+          const { method, times } = consoleEvent;
+          return (
+            <div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}>
+              { times > 1 &&
+              <div
+                className="preview-console__logged-times"
+                style={{ fontSize, borderRadius: fontSize / 2 }}
+              >
+                {times}
+              </div>
+              }
+              <ConsoleFeed
+                styles={getConsoleFeedStyle(theme, times, fontSize)}
+                logs={[consoleEvent]}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </section>
   );
 };
 
+
 export default Console;