Merge pull request #1624 from processing/revert-667-feature-2/interactive-console

Revert "Make console interactive"

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

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/images/console-command-dark.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';
 
@@ -23,58 +23,40 @@ 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,
     BASE_FONT_SIZE: fontSize,
     ARROW_FONT_SIZE: fontSize,
     LOG_ICON_WIDTH: fontSize,
-    LOG_ICON_HEIGHT: 1.45 * fontSize
+    LOG_ICON_HEIGHT: 1.45 * fontSize,
   };
 
   if (times > 1) {
@@ -95,25 +77,21 @@ 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 {
     collapseConsole, expandConsole, clearConsole, 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
@@ -139,36 +117,26 @@ 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 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>
-            );
-          })}
-        </div>
-        { isExpanded && isPlaying &&
-          <ConsoleInput
-            theme={theme}
-            dispatchConsoleEvent={dispatchConsoleEvent}
-            fontSize={fontSize}
-          />
-        }
+              }
+              <ConsoleFeed
+                styles={getConsoleFeedStyle(theme, times, fontSize)}
+                logs={[consoleEvent]}
+              />
+            </div>
+          );
+        })}
       </div>
     </section>
   );