Merge branch 'release-1.3.1' into release

Author: catarak

client/components/useAsModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
+import { useModalBehavior } from '../utils/custom-hooks';
 
 const BackgroundOverlay = styled.div`
   position: fixed;

client/images/console-command-contrast.svg

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -25,51 +25,33 @@ import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl';
 import infoLightUrl from '../../../images/console-info-light.svg?byUrl';
 import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl';
 import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl';
-import ConsoleInput from './ConsoleInput';
-
-import commandLightUrl from '../../../images/console-command-light.svg?byUrl';
-import resultLightUrl from '../../../images/console-result-light.svg?byUrl';
-import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl';
-import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl';
-import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl';
-import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl';
 
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
 
 import * as IDEActions from '../../IDE/actions/ide';
 import * as ConsoleActions from '../../IDE/actions/console';
-import { useDidUpdate } from '../hooks/custom-hooks';
-import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
-import { listen } from '../../../utils/dispatcher';
+import { useDidUpdate } from '../../../utils/custom-hooks';
 
 const getConsoleFeedStyle = (theme, times, fontSize) => {
-  const style = {
-    BASE_FONT_FAMILY: 'Inconsolata, monospace'
-  };
+  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})`,
-    LOG_COMMAND_ICON: `url(${commandLightUrl})`,
-    LOG_RESULT_ICON: `url(${resultLightUrl})`
+    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})`,
-    LOG_COMMAND_ICON: `url(${commandDarkUrl})`,
-    LOG_RESULT_ICON: `url(${resultDarkUrl})`
+    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})`,
-    LOG_COMMAND_ICON: `url(${commandContrastUrl})`,
-    LOG_RESULT_ICON: `url(${resultContrastUrl})`
+    LOG_INFO_ICON: `url(${infoContrastUrl})`
   };
   const CONSOLE_FEED_SIZES = {
     TREENODE_LINE_HEIGHT: 1.2,
@@ -112,7 +94,6 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
 const Console = ({ t }) => {
   const consoleEvents = useSelector((state) => state.console);
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
-  const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
 
   const {
@@ -122,20 +103,17 @@ const Console = ({ t }) => {
     dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
+  useDidUpdate(() => {
+    clearConsole();
+    dispatchConsoleEvent(consoleEvents);
+  }, [theme, fontSize]);
+
   const cm = useRef({});
 
   useDidUpdate(() => {
     cm.current.scrollTop = cm.current.scrollHeight;
   });
 
-  const handleMessageEvent = useHandleMessageEvent();
-  useEffect(() => {
-    const unsubscribe = listen(handleMessageEvent);
-    return function cleanup() {
-      unsubscribe();
-    };
-  });
-
   const consoleClass = classNames({
     'preview-console': true,
     'preview-console--collapsed': !isExpanded
@@ -169,39 +147,29 @@ const Console = ({ t }) => {
           </button>
         </div>
       </header>
-      <div className="preview-console__body">
-        <div ref={cm} 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]}
-                  key={`${consoleEvent.id}-${theme}-${fontSize}`}
-                />
-              </div>
-            );
-          })}
-        </div>
-        {isExpanded && isPlaying && (
-          <ConsoleInput
-            theme={theme}
-            dispatchConsoleEvent={dispatchConsoleEvent}
-            fontSize={fontSize}
-          />
-        )}
+      <div ref={cm} 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>
   );