From 40704b4b004f50c74acffc9657ed6ea315b422a7 Mon Sep 17 00:00:00 2001
From: therewasaguy <jason.sigal@gmail.com>
Date: Sun, 17 Jul 2016 20:49:57 -0400
Subject: [PATCH] console: shouldComponentUpdate and componentWilLReceiveProps
 tweaks

---
 client/modules/IDE/components/Console.js | 35 ++++++++++++------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/client/modules/IDE/components/Console.js b/client/modules/IDE/components/Console.js
index 362856a0..c604cc41 100644
--- a/client/modules/IDE/components/Console.js
+++ b/client/modules/IDE/components/Console.js
@@ -18,32 +18,31 @@ class Console extends React.Component {
     this.children = [];
   }
 
-  shouldComponentUpdate(nextProps) {
-    // clear children if paused, but only update when new consoleEvent happens
-    if (!nextProps.isPlaying) {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isPlaying && !this.props.isPlaying) {
       this.children = [];
+    } else if (nextProps.consoleEvent !== this.props.consoleEvent) {
+      const args = nextProps.consoleEvent.arguments;
+      const method = nextProps.consoleEvent.method;
+      const nextChild = (
+        <div key={this.children.length} className={method}>
+          {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
+        </div>
+      );
+      this.children.push(nextChild);
     }
-    return nextProps.consoleEvent !== this.props.consoleEvent;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (nextProps.consoleEvent !== this.props.consoleEvent) || (nextProps.isPlaying && !this.props.isPlaying);
   }
 
   render() {
-    const args = this.props.consoleEvent.arguments;
-    const method = this.props.consoleEvent.method;
-
-    const nextChild = (
-      <div key={this.children.length} className={method}>
-        {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
-      </div>
-    );
-    this.children.push(nextChild);
-
-    if (this.children.length > consoleMax) {
-      this.children = this.children.slice(0, 1);
-    }
+    const childrenToDisplay = this.children.slice(-consoleMax);
 
     return (
       <div ref="console" className="preview-console">
-        {this.children}
+        {childrenToDisplay}
       </div>
     );
   }