From 9447bb575479dd9020cb25efd649d9170b4eb6dc Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 17 Jul 2020 16:52:45 -0300 Subject: [PATCH] :recycle: remove getConsoleFeedStyle from Console --- client/modules/IDE/components/Console.jsx | 135 +++++++++++----------- 1 file changed, 65 insertions(+), 70 deletions(-) diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx index cdc28cd3..14d32e0d 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 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'; +const useDidUpdate = (callback, deps) => { + const hasMount = useRef(false); + + 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 ''; + } +}; + 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); - } - - if (this.props.fontSize !== prevProps.fontSize) { - this.props.clearConsole(); - this.props.dispatchConsoleEvent(this.props.consoleEvents); - } - } - - 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 ''; - } } render() { @@ -91,6 +95,8 @@ class ConsoleComponent extends React.Component { 'preview-console--collapsed': !this.props.isExpanded }); + console.log(this.props.isExpanded); + return (
@@ -126,7 +132,7 @@ class ConsoleComponent extends React.Component { } @@ -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 ( { ); }; -// 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;