Merge pull request #667 from shinytang6/feature-2/interactive-console

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 '../utils/custom-hooks';
+import { useModalBehavior } from '../modules/IDE/hooks/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">
-        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {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 } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -23,40 +23,58 @@ 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 '../../../utils/custom-hooks';
+import { useDidUpdate } from '../hooks/custom-hooks';
+import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
+import { listen } from '../../../utils/dispatcher';
 
 const getConsoleFeedStyle = (theme, times, fontSize) => {
-  const style = {};
+  const style = {
+    BASE_FONT_FAMILY: 'Inconsolata, monospace',
+  };
   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_INFO_ICON: `url(${infoLightUrl})`,
+    LOG_COMMAND_ICON: `url(${commandLightUrl})`,
+    LOG_RESULT_ICON: `url(${resultLightUrl})`
   };
   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_INFO_ICON: `url(${infoDarkUrl})`,
+    LOG_COMMAND_ICON: `url(${commandDarkUrl})`,
+    LOG_RESULT_ICON: `url(${resultDarkUrl})`
   };
   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_INFO_ICON: `url(${infoContrastUrl})`,
+    LOG_COMMAND_ICON: `url(${commandContrastUrl})`,
+    LOG_RESULT_ICON: `url(${resultContrastUrl})`
   };
   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) {
@@ -77,21 +95,25 @@ 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
@@ -117,26 +139,36 @@ const Console = ({ t }) => {
           </button>
         </div>
       </header>
-      <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 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>
-              }
-              <ConsoleFeed
-                styles={getConsoleFeedStyle(theme, times, fontSize)}
-                logs={[consoleEvent]}
-              />
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
+        { isExpanded && isPlaying &&
+          <ConsoleInput
+            theme={theme}
+            dispatchConsoleEvent={dispatchConsoleEvent}
+            fontSize={fontSize}
+          />
+        }
       </div>
     </section>
   );