From 74cfa9e3272688dde4ae9c31c07d82a003621b45 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sat, 29 Sep 2018 13:15:03 +0530
Subject: [PATCH] Move Console to separate component.

---
 src/components/Console.jsx     | 70 +++++++++++++++++++++++++++++
 src/components/ContentWrap.jsx | 80 +++++++++-------------------------
 2 files changed, 90 insertions(+), 60 deletions(-)
 create mode 100644 src/components/Console.jsx

diff --git a/src/components/Console.jsx b/src/components/Console.jsx
new file mode 100644
index 0000000..eda09bd
--- /dev/null
+++ b/src/components/Console.jsx
@@ -0,0 +1,70 @@
+import { h } from 'preact';
+import CodeMirrorBox from './CodeMirrorBox';
+
+export function Console({
+	isConsoleOpen,
+	onConsoleHeaderDblClick,
+	onClearConsoleBtnClick,
+	toggleConsole,
+	onEvalInputKeyup,
+	onReady
+}) {
+	return (
+		<div
+			id="consoleEl"
+			class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
+		>
+			<div id="consoleLogEl" class="console__log">
+				<div
+					class="js-console__header  code-wrap__header"
+					title="Double click to toggle console"
+					onDblClick={onConsoleHeaderDblClick}
+				>
+					<span class="code-wrap__header-label">
+						Console (<span id="logCountEl">0</span>)
+					</span>
+					<div class="code-wrap__header-right-options">
+						<a
+							class="code-wrap__header-btn"
+							title="Clear console (CTRL + L)"
+							onClick={onClearConsoleBtnClick}
+						>
+							<svg>
+								<use xlinkHref="#cancel-icon" />
+							</svg>
+						</a>
+						<a
+							class="code-wrap__header-btn  code-wrap__collapse-btn"
+							title="Toggle console"
+							onClick={toggleConsole}
+						/>
+					</div>
+				</div>
+				<CodeMirrorBox
+					options={{
+						mode: 'javascript',
+						lineWrapping: true,
+						theme: 'monokai',
+						foldGutter: true,
+						readOnly: true,
+						gutters: ['CodeMirror-foldgutter']
+					}}
+					onCreation={el => onReady(el)}
+				/>
+			</div>
+			<div
+				id="consolePromptEl"
+				class="console__prompt flex flex-v-center flex-shrink-0"
+			>
+				<svg width="18" height="18" fill="#346fd2">
+					<use xlinkHref="#chevron-icon" />
+				</svg>
+				<input
+					tabIndex={isConsoleOpen ? 0 : -1}
+					onKeyUp={onEvalInputKeyup}
+					class="console-exec-input"
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 363a456..d7fb727 100644
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@@ -6,7 +6,7 @@ import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
 import { SplitPane } from './SplitPane.jsx';
 import { trackEvent } from '../analytics';
 import CodeMirror from '../CodeMirror';
-import CodeMirrorBox from './CodeMirrorBox';
+import { Console } from './Console';
 import { deferred } from '../deferred';
 import CssSettingsModal from './CssSettingsModal';
 const minCodeWrapSize = 33;
@@ -52,7 +52,7 @@ export default class ContentWrap extends Component {
 	}
 	componentDidUpdate() {
 		// HACK: becuase its a DOM manipulation
-		window.logCountEl.textContent = this.logCount;
+		this.updateLogCount();
 
 		// log('🚀', 'didupdate', this.props.currentItem);
 		// if (this.isValidItem(this.props.currentItem)) {
@@ -583,6 +583,12 @@ export default class ContentWrap extends Component {
 		}, 500);
 	}
 
+	updateLogCount() {
+		if (window.logCountEl) {
+			logCountEl.textContent = this.logCount;
+		}
+	}
+
 	onMessageFromConsole() {
 		/* eslint-disable no-param-reassign */
 		[...arguments].forEach(arg => {
@@ -614,7 +620,7 @@ export default class ContentWrap extends Component {
 			this.consoleCm.scrollTo(0, Infinity);
 			this.logCount++;
 		});
-		logCountEl.textContent = this.logCount;
+		this.updateLogCount();
 
 		/* eslint-enable no-param-reassign */
 	}
@@ -638,7 +644,7 @@ export default class ContentWrap extends Component {
 	clearConsole() {
 		this.consoleCm.setValue('');
 		this.logCount = 0;
-		window.logCountEl.textContent = this.logCount;
+		this.updateLogCount();
 	}
 	clearConsoleBtnClickHandler() {
 		this.clearConsole();
@@ -884,62 +890,16 @@ export default class ContentWrap extends Component {
 						id="demo-frame"
 						allowfullscreen
 					/>
-					<div
-						id="consoleEl"
-						class={`console ${this.state.isConsoleOpen ? '' : 'is-minimized'}`}
-					>
-						<div id="consoleLogEl" class="console__log">
-							<div
-								class="js-console__header  code-wrap__header"
-								title="Double click to toggle console"
-								onDblClick={this.consoleHeaderDblClickHandler.bind(this)}
-							>
-								<span class="code-wrap__header-label">
-									Console (<span id="logCountEl">0</span>)
-								</span>
-								<div class="code-wrap__header-right-options">
-									<a
-										class="code-wrap__header-btn"
-										title="Clear console (CTRL + L)"
-										onClick={this.clearConsoleBtnClickHandler.bind(this)}
-									>
-										<svg>
-											<use xlinkHref="#cancel-icon" />
-										</svg>
-									</a>
-									<a
-										class="code-wrap__header-btn  code-wrap__collapse-btn"
-										title="Toggle console"
-										onClick={this.toggleConsole.bind(this)}
-									/>
-								</div>
-							</div>
-							<CodeMirrorBox
-								options={{
-									mode: 'javascript',
-									lineWrapping: true,
-									theme: 'monokai',
-									foldGutter: true,
-									readOnly: true,
-									gutters: ['CodeMirror-foldgutter']
-								}}
-								onCreation={el => (this.consoleCm = el)}
-							/>
-						</div>
-						<div
-							id="consolePromptEl"
-							class="console__prompt flex flex-v-center flex-shrink-0"
-						>
-							<svg width="18" height="18" fill="#346fd2">
-								<use xlinkHref="#chevron-icon" />
-							</svg>
-							<input
-								tabIndex={this.state.isConsoleOpen ? 0 : -1}
-								onKeyUp={this.evalConsoleExpr.bind(this)}
-								class="console-exec-input"
-							/>
-						</div>
-					</div>
+					<Console
+						isConsoleOpen={this.state.isConsoleOpen}
+						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
+							this
+						)}
+						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
+						toggleConsole={this.toggleConsole.bind(this)}
+						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
+						onReady={el => (this.consoleCm = el)}
+					/>
 					<CssSettingsModal
 						show={this.state.isCssSettingsModalOpen}
 						closeHandler={() =>