diff --git a/client/modules/IDE/actions/console.js b/client/modules/IDE/actions/console.js
index 7cc0d092..34a77e1f 100644
--- a/client/modules/IDE/actions/console.js
+++ b/client/modules/IDE/actions/console.js
@@ -6,9 +6,9 @@ export function clearConsole() {
};
}
-export function dispatchConsoleEvent(...args) {
+export function dispatchConsoleEvent(messages) {
return {
type: ActionTypes.CONSOLE_EVENT,
- event: args[0].data
+ event: messages
};
}
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index aeb67cfc..576d26a0 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -4,75 +4,12 @@ const upArrowUrl = require('../../../images/up-arrow.svg');
const downArrowUrl = require('../../../images/down-arrow.svg');
import classNames from 'classnames';
-/**
- * How many console messages to store
- * @type {Number}
- */
-const consoleMax = 200;
-
class Console extends React.Component {
-
- constructor(props) {
- super(props);
- this.appendConsoleEvent = this.appendConsoleEvent.bind(this);
- this.clearConsole = this.clearConsole.bind(this);
- }
-
- componentWillReceiveProps(nextProps) {
- if (nextProps.isPlaying && !this.props.isPlaying) {
- this.children = [];
- } else if (nextProps.consoleEvent !== this.props.consoleEvent && this.props.isPlaying) {
- nextProps.consoleEvent.forEach(consoleEvent => {
- const args = consoleEvent.arguments;
- Object.keys(args).forEach((key) => {
- if (args[key].includes('Exiting potential infinite loop')) {
- this.props.stopSketch();
- this.props.expandConsole();
- this.appendConsoleEvent(consoleEvent);
- }
- });
- this.appendConsoleEvent(consoleEvent);
- });
- }
- }
-
- // 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;
}
- appendConsoleEvent(consoleEvent) {
- const args = consoleEvent.arguments;
- const method = consoleEvent.method;
- let nextChild;
- if (Object.keys(args).length === 0) {
- nextChild = (
-
- {'undefined'}
-
- );
- } else {
- nextChild = (
-
- {Object.keys(args).map((key) => {args[key]})}
-
- );
- }
- this.children.push(nextChild);
- }
-
- clearConsole() {
- this.children = [];
- }
-
render() {
- const childrenToDisplay = this.children.slice(-consoleMax);
const consoleClass = classNames({
'preview-console': true,
'preview-console--collapsed': !this.props.isExpanded
@@ -81,11 +18,11 @@ class Console extends React.Component {
return (
-
console
+
Console
-
+
@@ -95,7 +32,22 @@ class Console extends React.Component {
- {childrenToDisplay}
+ {this.props.consoleEvents.map((consoleEvent, index) => {
+ const args = consoleEvent.arguments;
+ const method = consoleEvent.method;
+ if (Object.keys(args).length === 0) {
+ return (
+
+ {'undefined'}
+
+ );
+ }
+ return (
+
+ {Object.keys(args).map((key) => {args[key]})}
+
+ );
+ })}
);
@@ -104,12 +56,12 @@ class Console extends React.Component {
}
Console.propTypes = {
- consoleLines: PropTypes.array,
+ consoleEvents: PropTypes.array,
isPlaying: PropTypes.bool.isRequired,
isExpanded: PropTypes.bool.isRequired,
collapseConsole: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired,
- stopSketch: PropTypes.func.isRequired,
+ clearConsole: PropTypes.func.isRequired
};
export default Console;
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
index 16a4d48b..d8b24771 100644
--- a/client/modules/IDE/components/PreviewFrame.jsx
+++ b/client/modules/IDE/components/PreviewFrame.jsx
@@ -87,8 +87,17 @@ class PreviewFrame extends React.Component {
}
if (this.props.dispatchConsoleEvent) {
- window.addEventListener('message', (msg) => {
- this.props.dispatchConsoleEvent(msg);
+ window.addEventListener('message', (messageEvent) => {
+ messageEvent.data.forEach(message => {
+ const args = message.arguments;
+ Object.keys(args).forEach((key) => {
+ if (args[key].includes('Exiting potential infinite loop')) {
+ this.props.stopSketch();
+ this.props.expandConsole();
+ }
+ });
+ });
+ this.props.dispatchConsoleEvent(messageEvent.data);
});
}
}
@@ -375,7 +384,9 @@ PreviewFrame.propTypes = {
endSketchRefresh: PropTypes.func.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired,
fullView: PropTypes.bool,
- setBlobUrl: PropTypes.func.isRequired
+ setBlobUrl: PropTypes.func.isRequired,
+ stopSketch: PropTypes.func.isRequired,
+ expandConsole: PropTypes.func.isRequired
};
export default PreviewFrame;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index ab9dabb7..d2c91d8a 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -324,12 +324,12 @@ class IDEView extends React.Component {
collapseSidebar={this.props.collapseSidebar}
/>
@@ -359,6 +359,8 @@ class IDEView extends React.Component {
endSketchRefresh={this.props.endSketchRefresh}
stopSketch={this.props.stopSketch}
setBlobUrl={this.props.setBlobUrl}
+ stopSketch={this.props.stopSketch}
+ expandConsole={this.props.expandConsole}
/>
@@ -587,7 +589,8 @@ IDEView.propTypes = {
resetProject: PropTypes.func.isRequired,
closeForceAuthentication: PropTypes.func.isRequired,
openForceAuthentication: PropTypes.func.isRequired,
- console: PropTypes.array.isRequired
+ console: PropTypes.array.isRequired,
+ clearConsole: PropTypes.func.isRequired
};
function mapStateToProps(state) {
diff --git a/client/modules/IDE/reducers/console.js b/client/modules/IDE/reducers/console.js
index e5e60374..215865c0 100644
--- a/client/modules/IDE/reducers/console.js
+++ b/client/modules/IDE/reducers/console.js
@@ -6,7 +6,7 @@ const initialState = [];
const console = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.CONSOLE_EVENT:
- return [...state, action.event].slice(-consoleMax);
+ return state.concat(action.event).slice(-consoleMax);
case ActionTypes.CLEAR_CONSOLE:
return [];
default:
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 8817d2ed..68897e9e 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -52,6 +52,7 @@
padding: #{5 / $base-font-size}rem;
display: flex;
justify-content: space-between;
+ align-items: center;
}
.preview-console__header-title {
@@ -70,6 +71,7 @@
}
.preview-console__collapse {
+ padding-top: #{3 / $base-font-size}rem;
@include themify() {
@extend %icon;
}
@@ -79,6 +81,7 @@
}
.preview-console__expand {
+ padding-top: #{3 / $base-font-size}rem;
@include themify() {
@extend %icon;
}
@@ -87,3 +90,15 @@
display: inline-block;
}
}
+
+.preview-console__header-buttons {
+ display: flex;
+ align-items: center;
+}
+
+.preview-console__clear {
+ padding-right: #{10 / $base-font-size}rem;
+ .preview-console--collapsed & {
+ display: none;
+ }
+}
\ No newline at end of file