♻️ remove getConsoleFeedStyle from Console

client/modules/IDE/components/Console.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+
 import { bindActionCreators } from 'redux';
 
 import { useSelector, useDispatch } from 'react-redux';
@@ -28,21 +29,19 @@ import DownArrowIcon from '../../../images/down-arrow.svg';
 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) {
-      this.props.clearConsole();
-      this.props.dispatchConsoleEvent(this.props.consoleEvents);
-    }
+const useDidUpdate = (callback, deps) => {
+  const hasMount = useRef(false);
 
-    if (this.props.fontSize !== prevProps.fontSize) {
-      this.props.clearConsole();
-      this.props.dispatchConsoleEvent(this.props.consoleEvents);
-    }
+  useEffect(() => {
+    if (hasMount.current) {
+      callback();
+    } else {
+      hasMount.current = true;
     }
+  }, deps);
+};
 
-  getConsoleFeedStyle(theme, times) {
+const getConsoleFeedStyle = (theme, times, fontSize) => {
   const style = {};
   const CONSOLE_FEED_LIGHT_ICONS = {
     LOG_WARN_ICON: `url(${warnLightUrl})`,
@@ -64,10 +63,10 @@ class ConsoleComponent extends React.Component {
   };
   const CONSOLE_FEED_SIZES = {
     TREENODE_LINE_HEIGHT: 1.2,
-      BASE_FONT_SIZE: this.props.fontSize,
-      ARROW_FONT_SIZE: this.props.fontSize,
-      LOG_ICON_WIDTH: this.props.fontSize,
-      LOG_ICON_HEIGHT: 1.45 * this.props.fontSize,
+    BASE_FONT_SIZE: fontSize,
+    ARROW_FONT_SIZE: fontSize,
+    LOG_ICON_WIDTH: fontSize,
+    LOG_ICON_HEIGHT: 1.45 * fontSize,
   };
 
   if (times > 1) {
@@ -83,6 +82,11 @@ class ConsoleComponent extends React.Component {
     default:
       return '';
   }
+};
+
+class ConsoleComponent extends React.Component {
+  componentDidUpdate(prevProps) {
+    this.consoleMessages.scrollTop = this.consoleMessages.scrollHeight;
   }
 
   render() {
@@ -91,6 +95,8 @@ class ConsoleComponent extends React.Component {
       'preview-console--collapsed': !this.props.isExpanded
     });
 
+    console.log(this.props.isExpanded);
+
     return (
       <section className={consoleClass} >
         <header className="preview-console__header">
@@ -126,7 +132,7 @@ class ConsoleComponent extends React.Component {
                   </div>
                 }
                 <ConsoleFeed
-                  styles={this.getConsoleFeedStyle(theme, times)}
+                  styles={getConsoleFeedStyle(theme, times, this.props.fontSize)}
                   logs={[consoleEvent]}
                 />
               </div>
@@ -147,7 +153,6 @@ ConsoleComponent.propTypes = {
   collapseConsole: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   clearConsole: PropTypes.func.isRequired,
-  dispatchConsoleEvent: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
   fontSize: PropTypes.number.isRequired
 };
@@ -165,6 +170,11 @@ const Console = () => {
     collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
+  useDidUpdate(() => {
+    clearConsole();
+    dispatchConsoleEvent(consoleEvents);
+  }, [theme, fontSize]);
+
   return (
     <ConsoleComponent
       consoleEvents={consoleEvents}
@@ -179,19 +189,4 @@ const Console = () => {
   );
 };
 
-// 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;