Add file removal

src/components/ContentWrap2.jsx

@@ -52,14 +52,16 @@ export default class ContentWrap2 extends Component {
 		}
 	}
 	componentDidUpdate() {
+		const { currentItem } = this.props;
+
+		// Select a new file if nothing is selected already or the selected file exists no more.
 		if (
-			this.props.currentItem &&
+			currentItem &&
-			this.props.currentItem.files &&
+			currentItem.files &&
-			!this.state.selectedFile
+			(!this.state.selectedFile ||
+				!currentItem.files.includes(this.state.selectedFile))
 		) {
-			this.setState({
+			this.fileSelectHandler(this.props.currentItem.files[0]);
-				selectedFile: this.props.currentItem.files[0]
-			});
 		}
 		// HACK: becuase its a DOM manipulation
 		// window.logCountEl.textContent = this.logCount;
@@ -438,6 +440,7 @@ export default class ContentWrap2 extends Component {
 						selectedFile={this.state.selectedFile}
 						onFileSelect={this.fileSelectHandler.bind(this)}
 						onAddFile={this.props.onAddFile}
+						onRemoveFile={this.props.onRemoveFile}
 					/>
 				</div>
 				<div class="code-side" id="js-code-side">

src/components/SidePane.jsx

@@ -64,8 +64,15 @@ export class SidePane extends Component {
 			this.setState({ isEditing: false });
 		}
 	}
+	removeFileClickHandler(file, e) {
+		e.stopPropagation();
+		const answer = confirm(`Are you sure you want to delete ${file.name}?`);
+		if (answer) {
+			this.props.onRemoveFile(file);
+		}
+	}
 	render() {
-		const { files, onFileSelect, selectedFile } = this.props;
+		const { files, onFileSelect, selectedFile, onRemoveFile } = this.props;
 
 		return (
 			<div class="sidebar">
@@ -105,8 +112,24 @@ export class SidePane extends Component {
 							type="button"
 							onClick={onFileSelect.bind(null, file)}
 						>
-							<FileIcon fileName={file.name} />
+							<div class="flex flex-v-center">
-							{file.name}
+								<FileIcon fileName={file.name} />
+								{file.name}
+							</div>
+							<div class="sidebar__file-options">
+								<button
+									type="button"
+									class="btn btn--dark"
+									onClick={this.removeFileClickHandler.bind(this, file)}
+								>
+									<svg
+										viewBox="0 0 24 24"
+										style="vertical-align:middle;width:14px;height:14px"
+									>
+										<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
+									</svg>
+								</button>
+							</div>
 						</button>
 					</div>
 				))}

src/components/app.jsx

@@ -1191,6 +1191,16 @@ export default class App extends Component {
 			}
 		});
 	}
+	removeFileHandler(fileToRemove) {
+		this.setState({
+			currentItem: {
+				...this.state.currentItem,
+				files: this.state.currentItem.files.filter(
+					file => file !== fileToRemove
+				)
+			}
+		});
+	}
 
 	render() {
 		return (
@@ -1222,6 +1232,7 @@ export default class App extends Component {
 						onEditorFocus={this.editorFocusHandler.bind(this)}
 						onSplitUpdate={this.splitUpdateHandler.bind(this)}
 						onAddFile={this.addFileHandler.bind(this)}
+						onRemoveFile={this.removeFileHandler.bind(this)}
 					/>
 
 					<Footer

src/style.css

@@ -1615,17 +1615,19 @@ body:not(.is-app) .show-when-app {
 }
 
 .sidebar__file {
-	color: #f3f3f3;
+	color: #bbb;
 	background: transparent;
 	border: none;
 	width: 100%;
 	text-align: left;
 	display: flex;
+	padding: 2px 4px;
 	align-items: center;
+	justify-content: space-between;
 }
 .sidebar__file.selected {
 	color: white;
-	background-color: mediumblue;
+	background-color: rgba(255, 255, 255, 0.1);
 }
 
 .sidebar__file-icon {
@@ -1633,7 +1635,13 @@ body:not(.is-app) .show-when-app {
 	height: 16px;
 	margin-right: 10px;
 }
-
+.sidebar__file-options {
+	visibility: hidden;
+}
+.sidebar__file:hover .sidebar__file-options,
+.sidebar__file:focus .sidebar__file-options {
+	visibility: visible;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;