♻️ remove getConsoleFeedStyle from Console

Author: ghalestrilo

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,61 +29,64 @@ 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);
+};
+
+const getConsoleFeedStyle = (theme, times, fontSize) => {
+  const style = {};
+  const CONSOLE_FEED_LIGHT_ICONS = {
+    LOG_WARN_ICON: `url(${warnLightUrl})`,
+    LOG_ERROR_ICON: `url(${errorLightUrl})`,
+    LOG_DEBUG_ICON: `url(${debugLightUrl})`,
+    LOG_INFO_ICON: `url(${infoLightUrl})`
+  };
+  const CONSOLE_FEED_DARK_ICONS = {
+    LOG_WARN_ICON: `url(${warnDarkUrl})`,
+    LOG_ERROR_ICON: `url(${errorDarkUrl})`,
+    LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
+    LOG_INFO_ICON: `url(${infoDarkUrl})`
+  };
+  const CONSOLE_FEED_CONTRAST_ICONS = {
+    LOG_WARN_ICON: `url(${warnContrastUrl})`,
+    LOG_ERROR_ICON: `url(${errorContrastUrl})`,
+    LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
+    LOG_INFO_ICON: `url(${infoContrastUrl})`
+  };
+  const CONSOLE_FEED_SIZES = {
+    TREENODE_LINE_HEIGHT: 1.2,
+    BASE_FONT_SIZE: fontSize,
+    ARROW_FONT_SIZE: fontSize,
+    LOG_ICON_WIDTH: fontSize,
+    LOG_ICON_HEIGHT: 1.45 * fontSize,
+  };
+
+  if (times > 1) {
+    Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
   }
+  switch (theme) {
+    case 'light':
+      return Object.assign(CONSOLE_FEED_LIGHT_STYLES, CONSOLE_FEED_LIGHT_ICONS, CONSOLE_FEED_SIZES, style);
+    case 'dark':
+      return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
+    case 'contrast':
+      return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
+    default:
+      return '';
+  }
+};
 
-  getConsoleFeedStyle(theme, times) {
-    const style = {};
-    const CONSOLE_FEED_LIGHT_ICONS = {
-      LOG_WARN_ICON: `url(${warnLightUrl})`,
-      LOG_ERROR_ICON: `url(${errorLightUrl})`,
-      LOG_DEBUG_ICON: `url(${debugLightUrl})`,
-      LOG_INFO_ICON: `url(${infoLightUrl})`
-    };
-    const CONSOLE_FEED_DARK_ICONS = {
-      LOG_WARN_ICON: `url(${warnDarkUrl})`,
-      LOG_ERROR_ICON: `url(${errorDarkUrl})`,
-      LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
-      LOG_INFO_ICON: `url(${infoDarkUrl})`
-    };
-    const CONSOLE_FEED_CONTRAST_ICONS = {
-      LOG_WARN_ICON: `url(${warnContrastUrl})`,
-      LOG_ERROR_ICON: `url(${errorContrastUrl})`,
-      LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
-      LOG_INFO_ICON: `url(${infoContrastUrl})`
-    };
-    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,
-    };
-
-    if (times > 1) {
-      Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
-    }
-    switch (theme) {
-      case 'light':
-        return Object.assign(CONSOLE_FEED_LIGHT_STYLES, CONSOLE_FEED_LIGHT_ICONS, CONSOLE_FEED_SIZES, style);
-      case 'dark':
-        return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
-      case 'contrast':
-        return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
-      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;