start to break out console into its own reducer

client/constants.js

@@ -47,6 +47,7 @@ export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
 export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 

client/modules/IDE/actions/console.js

@@ -0,0 +1,14 @@
+import * as ActionTypes from '../../../constants';
+
+export function clearConsole() {
+  return {
+    type: ActionTypes.CLEAR_CONSOLE
+  };
+}
+
+export function dispatchConsoleEvent(...args) {
+  return {
+    type: ActionTypes.CONSOLE_EVENT,
+    event: args[0].data
+  };
+}

client/modules/IDE/actions/ide.js

@@ -61,13 +61,6 @@ export function resetSelectedFile(previousId) {
   };
 }
 
-export function dispatchConsoleEvent(...args) {
-  return {
-    type: ActionTypes.CONSOLE_EVENT,
-    event: args[0].data
-  };
-}
-
 export function newFile() {
   return {
     type: ActionTypes.SHOW_MODAL

client/modules/IDE/components/Console.jsx

@@ -14,13 +14,8 @@ class Console extends React.Component {
 
   constructor(props) {
     super(props);
-
-    /**
-     *  An array of React Elements that include previous console messages
-     *  @type {Array}
-     */
-    this.children = [];
     this.appendConsoleEvent = this.appendConsoleEvent.bind(this);
+    this.clearConsole = this.clearConsole.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -41,11 +36,12 @@ class Console extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps) {
-    return (nextProps.consoleEvent !== this.props.consoleEvent)
-      || (nextProps.isPlaying && !this.props.isPlaying)
-      || (this.props.isExpanded !== nextProps.isExpanded);
-  }
+  // shouldComponentUpdate(nextProps) {
+  //   return (nextProps.consoleEvent !== this.props.consoleEvent)
+  //     || (nextProps.isPlaying && !this.props.isPlaying)
+  //     || (this.props.isExpanded !== nextProps.isExpanded)
+  //     || ;
+  // }
 
   componentDidUpdate() {
     this.refs.console_messages.scrollTop = this.refs.console_messages.scrollHeight;
@@ -71,6 +67,10 @@ class Console extends React.Component {
     this.children.push(nextChild);
   }
 
+  clearConsole() {
+    this.children = [];
+  }
+
   render() {
     const childrenToDisplay = this.children.slice(-consoleMax);
     const consoleClass = classNames({
@@ -82,6 +82,10 @@ class Console extends React.Component {
       <div ref="console" className={consoleClass} role="main" tabIndex="0" title="console">
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">console</h2>
+          <div className="preview-console__header-buttons">
+            <button className="preview-console__clear" onClick={this.clearConsole} aria-label="clear console">
+              Clear
+            </button>
             <button className="preview-console__collapse" onClick={this.props.collapseConsole} aria-label="collapse console">
               <InlineSVG src={downArrowUrl} />
             </button>
@@ -89,6 +93,7 @@ class Console extends React.Component {
               <InlineSVG src={upArrowUrl} />
             </button>
           </div>
+        </div>
         <div ref="console_messages" className="preview-console__messages">
           {childrenToDisplay}
         </div>
@@ -99,7 +104,7 @@ class Console extends React.Component {
 }
 
 Console.propTypes = {
-  consoleEvent: PropTypes.array,
+  consoleLines: PropTypes.array,
   isPlaying: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   collapseConsole: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.jsx

@@ -23,6 +23,7 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import * as UserActions from '../../User/actions';
 import * as ToastActions from '../actions/toast';
+import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
@@ -323,7 +324,7 @@ class IDEView extends React.Component {
                   collapseSidebar={this.props.collapseSidebar}
                 />
                 <Console
-                  consoleEvent={this.props.ide.consoleEvent}
+                  consoleLines={this.props.console}
                   isPlaying={this.props.ide.isPlaying}
                   isExpanded={this.props.ide.consoleIsExpanded}
                   expandConsole={this.props.expandConsole}
@@ -586,6 +587,7 @@ IDEView.propTypes = {
   resetProject: PropTypes.func.isRequired,
   closeForceAuthentication: PropTypes.func.isRequired,
   openForceAuthentication: PropTypes.func.isRequired,
+  console: PropTypes.array.isRequired
 };
 
 function mapStateToProps(state) {
@@ -598,7 +600,8 @@ function mapStateToProps(state) {
     editorAccessibility: state.editorAccessibility,
     user: state.user,
     project: state.project,
-    toast: state.toast
+    toast: state.toast,
+    console: state.console
   };
 }
 
@@ -610,7 +613,8 @@ function mapDispatchToProps(dispatch) {
     IDEActions,
     PreferencesActions,
     UserActions,
-    ToastActions),
+    ToastActions,
+    ConsoleActions),
   dispatch);
 }
 

client/modules/IDE/reducers/console.js

@@ -0,0 +1,17 @@
+import * as ActionTypes from '../../../constants';
+
+const consoleMax = 200;
+const initialState = [];
+
+const console = (state = initialState, action) => {
+  switch (action.type) {
+    case ActionTypes.CONSOLE_EVENT:
+      return [...state, action.event].slice(-consoleMax);
+    case ActionTypes.CLEAR_CONSOLE:
+      return [];
+    default:
+      return state;
+  }
+};
+
+export default console;

client/modules/IDE/reducers/ide.js

@@ -3,7 +3,6 @@ import * as ActionTypes from '../../../constants';
 const initialState = {
   isPlaying: false,
   isTextOutputPlaying: false,
-  consoleEvent: [],
   modalIsVisible: false,
   sidebarIsExpanded: false,
   consoleIsExpanded: true,

client/reducers.js

@@ -7,6 +7,7 @@ import editorAccessibility from './modules/IDE/reducers/editorAccessibility';
 import user from './modules/User/reducers';
 import sketches from './modules/IDE/reducers/projects';
 import toast from './modules/IDE/reducers/toast';
+import console from './modules/IDE/reducers/console';
 import { reducer as form } from 'redux-form';
 
 const rootReducer = combineReducers({
@@ -18,7 +19,8 @@ const rootReducer = combineReducers({
   project,
   sketches,
   editorAccessibility,
-  toast
+  toast,
+  console
 });
 
 export default rootReducer;