From 8e5b5fdd9b192eba3176abbee0f36c9b47458a57 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sun, 30 Sep 2018 15:28:47 +0530
Subject: [PATCH] =?UTF-8?q?add=20working=20POC=20for=20files=20?=
 =?UTF-8?q?=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContentWrap2.jsx | 24 +++++++++++-----------
 src/components/app.jsx          | 35 +++++++++++++++++++++++----------
 src/index.html                  |  2 +-
 src/style.css                   |  7 +++++++
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/components/ContentWrap2.jsx b/src/components/ContentWrap2.jsx
index 0cd9216..6bee0d9 100644
--- a/src/components/ContentWrap2.jsx
+++ b/src/components/ContentWrap2.jsx
@@ -24,6 +24,10 @@ class Sidebar extends Component {
 							type="button"
 							onClick={this.props.onFileSelect.bind(null, file)}
 						>
+							<img
+								src="http://icons-for-free.com/icon/download-css_html_html5_icon-498356.png"
+								width="16"
+							/>
 							{file.name}
 						</button>
 					</div>
@@ -38,14 +42,12 @@ export default class ContentWrap2 extends Component {
 		super(props);
 		this.state = {
 			isConsoleOpen: false,
-			isCssSettingsModalOpen: false,
-			files: [
-				{ name: 'index.html' },
-				{ name: 'style.css' },
-				{ name: 'script.js' }
-			]
+			isCssSettingsModalOpen: false
 		};
-		this.state.selectedFile = this.state.files[0];
+		this.state.selectedFile =
+			this.currentItem && this.currentItem.files
+				? this.currentItem.files[0]
+				: null;
 		this.updateTimer = null;
 		this.updateDelay = 500;
 		this.htmlMode = HtmlModes.HTML;
@@ -135,10 +137,9 @@ export default class ContentWrap2 extends Component {
 				this.detachedWindow.postMessage({ contents }, '*');
 			} else {
 				var obj = {};
-				this.state.files.forEach(file => {
+				this.props.currentItem.files.forEach(file => {
 					obj[`/user/${file.name}`] = file.content || '';
 				});
-				// obj[`/user/index.html`] = this.cmCodes.html;
 
 				navigator.serviceWorker.controller.postMessage(obj);
 				this.frame.src = '/user/index.html';
@@ -474,6 +475,7 @@ export default class ContentWrap2 extends Component {
 			this.updateCssMode('html');
 		}
 		this.cm.html.setValue(file.content || '');
+		this.cm.html.focus();
 	}
 
 	render() {
@@ -490,7 +492,7 @@ export default class ContentWrap2 extends Component {
 			>
 				<div id="js-sidebar">
 					<Sidebar
-						files={this.state.files}
+						files={this.props.currentItem.files || []}
 						onFileSelect={this.fileSelectHandler.bind(this)}
 					/>
 				</div>
@@ -507,7 +509,7 @@ export default class ContentWrap2 extends Component {
 							title="Double click to toggle code pane"
 						>
 							<label class="btn-group" dropdow title="Click to change">
-								{this.state.selectedFile.name}
+								{this.state.selectedFile ? this.state.selectedFile.name : ''}
 							</label>
 							<div class="code-wrap__header-right-options">
 								<a
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 85cb482..0bc7ce2 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -264,9 +264,9 @@ export default class App extends Component {
 		alertsService.add(`"${sourceItem.title}" was forked`);
 		trackEvent('fn', 'itemForked');
 	}
-	createNewItem() {
-		var d = new Date();
-		this.setCurrentItem({
+	createNewItem(isProject = true) {
+		const d = new Date();
+		let item = {
 			title:
 				'Untitled ' +
 				d.getDate() +
@@ -275,13 +275,28 @@ export default class App extends Component {
 				'-' +
 				d.getHours() +
 				':' +
-				d.getMinutes(),
-			html: '',
-			css: '',
-			js: '',
-			externalLibs: { js: '', css: '' },
-			layoutMode: this.state.currentLayoutMode
-		}).then(() => this.refreshEditor());
+				d.getMinutes()
+		};
+		if (isProject) {
+			item = {
+				...item,
+				files: [
+					{ name: 'index.html' },
+					{ name: 'style.css' },
+					{ name: 'script.js' }
+				]
+			};
+		} else {
+			item = {
+				...item,
+				html: '',
+				css: '',
+				js: '',
+				externalLibs: { js: '', css: '' },
+				layoutMode: this.state.currentLayoutMode
+			};
+		}
+		this.setCurrentItem(item).then(() => this.refreshEditor());
 		alertsService.add('New item created');
 	}
 	openItem(item) {
diff --git a/src/index.html b/src/index.html
index 2f164a3..e6f22da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -67,7 +67,7 @@
 				</style>
 	</head>
 
-	<body>
+	<body class="is-project">
 		<!-- SCRIPT-TAGS -->
 		<%= htmlWebpackPlugin.options.ssr({
 			url: '/'
diff --git a/src/style.css b/src/style.css
index 697e426..88d5dfe 100644
--- a/src/style.css
+++ b/src/style.css
@@ -383,6 +383,10 @@ body:not(.light-version).overlay-visible .main-container {
 	width: auto;
 }
 
+.is-project .content-wrap {
+	flex-direction: row;
+}
+
 /* All vertical layout */
 
 .layout-5 .code-side {
@@ -447,6 +451,9 @@ body:not(.light-version).overlay-visible .main-container {
 	height: auto;
 	width: 33%;
 }
+.is-project .code-wrap {
+	flex-basis: 100%;
+}
 
 .code-wrap__header {
 	display: flex;