From 006a37f8efc0ddcc778d3df3ac8a95df3f67e038 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 11 Oct 2018 16:30:09 +0530 Subject: [PATCH] add folders! --- src/components/ContentWrapFiles.jsx | 41 ++++++++++++++++------------- src/components/SidePane.jsx | 31 ++++++++++++++++------ src/components/app.jsx | 23 ++++++++++------ src/utils.js | 18 +++++++++++++ 4 files changed, 79 insertions(+), 34 deletions(-) diff --git a/src/components/ContentWrapFiles.jsx b/src/components/ContentWrapFiles.jsx index 2292d7c..079f8e2 100644 --- a/src/components/ContentWrapFiles.jsx +++ b/src/components/ContentWrapFiles.jsx @@ -1,7 +1,7 @@ import { h, Component } from 'preact'; import UserCodeMirror from './UserCodeMirror'; import { modes, HtmlModes, CssModes, JsModes } from '../codeModes'; -import { log, loadJS } from '../utils'; +import { log, loadJS, linearizeFiles } from '../utils'; import { SplitPane } from './SplitPane'; import { trackEvent } from '../analytics'; import CodeMirror from '../CodeMirror'; @@ -58,7 +58,7 @@ export default class ContentWrapFiles extends Component { } componentDidUpdate() { const { currentItem } = this.props; - const linearFiles = this.linearizeFiles(currentItem.files); + const linearFiles = linearizeFiles(currentItem.files); // Select a new file if nothing is selected already or the selected file exists no more. if ( @@ -79,18 +79,7 @@ export default class ContentWrapFiles extends Component { componentDidMount() { this.props.onRef(this); } - linearizeFiles(files) { - function reduceToLinearFiles(files) { - return files.reduce((list, currentFile) => { - if (currentFile.isFolder) { - return [...list, ...reduceToLinearFiles(currentFile.children)]; - } else { - return [...list, currentFile]; - } - }, []); - } - return reduceToLinearFiles(files); - } + getEditorOptions(fileName = '') { let options = { gutters: [ @@ -172,6 +161,17 @@ export default class ContentWrapFiles extends Component { }, this.updateDelay); } + constructFilePaths(files, parentPath = '/user') { + files.forEach(file => { + if (file.isFolder) { + this.constructFilePaths(file.children, `${parentPath}/${file.name}`); + } else { + file.path = `${parentPath}/${file.name}`; + } + }); + return files; + } + createPreviewFile(html, css, js) { // Track if people have written code. if (!trackEvent.hasTrackedCode && (html || css || js)) { @@ -180,12 +180,17 @@ export default class ContentWrapFiles extends Component { } var obj = {}; - this.props.currentItem.files.forEach(file => { - obj[`/user/${file.name}`] = file.content || ''; + const duplicateFiles = JSON.parse( + JSON.stringify(this.props.currentItem.files) + ); + const files = linearizeFiles(this.constructFilePaths(duplicateFiles)); + + files.forEach(file => { + obj[file.path] = file.content || ''; // Add screenlog to index.html if (file.name === 'index.html') { - obj[`/user/${file.name}`] = + obj[file.path] = '' + - obj[`/user/${file.name}`]; + obj[file.path]; } }); diff --git a/src/components/SidePane.jsx b/src/components/SidePane.jsx index bdcb31f..7c0035e 100644 --- a/src/components/SidePane.jsx +++ b/src/components/SidePane.jsx @@ -170,7 +170,10 @@ function Folder(props) { export class SidePane extends Component { addFileButtonClickHandler() { - this.setState({ isEditing: true }); + this.setState({ isAddingFile: true }); + } + addFolderButtonClickHandler() { + this.setState({ isAddingFolder: true }); } /** * Checks if the passed filename already exists and if so, warns the user. @@ -194,8 +197,8 @@ export class SidePane extends Component { addFile(e) { // This gets called twice when enter is pressed, because blur also fires. - // So check `isEditing` before proceeding. - if (!this.state.isEditing) { + // So check `isAddingFile` before proceeding. + if (!this.state.isAddingFile && !this.state.isAddingFolder) { return; } const newFileName = e.target.value; @@ -203,15 +206,15 @@ export class SidePane extends Component { return; } if (newFileName) { - this.props.onAddFile(newFileName); + this.props.onAddFile(newFileName, this.state.isAddingFolder); } - this.setState({ isEditing: false }); + this.setState({ isAddingFile: false, isAddingFolder: false }); } newFileNameInputKeyDownHandler(e) { if (e.which === ENTER_KEY) { this.addFile(e); } else if (e.which === ESCAPE_KEY) { - this.setState({ isEditing: false }); + this.setState({ isAddingFile: false, isAddingFolder: false }); } } removeFileClickHandler(file, e) { @@ -262,7 +265,7 @@ export class SidePane extends Component {
Files -
+
+
- {this.state.isEditing ? ( + {this.state.isAddingFile || this.state.isAddingFolder ? (
{ + linearizeFiles(this.state.currentItem.files).map(file => { if (file.name === type.name) { file.content = code; } @@ -1187,17 +1188,23 @@ export default class App extends Component { }); this.setState({ isCreateNewModalOpen: false }); } - addFileHandler(fileName) { + addFileHandler(fileName, isFolder) { + let newEntry = { name: fileName, content: '' }; + if (isFolder) { + newEntry = { + ...newEntry, + isFolder: true, + children: [], + isCollapsed: true + }; + } + this.setState({ currentItem: { ...this.state.currentItem, - files: [ - ...this.state.currentItem.files, - { name: fileName, content: '' } - ] + files: [...this.state.currentItem.files, newEntry] } }); - console.log(11, this.state.currentItem); } removeFileHandler(fileToRemove) { this.setState({ diff --git a/src/utils.js b/src/utils.js index 4f5e495..de4c730 100644 --- a/src/utils.js +++ b/src/utils.js @@ -465,3 +465,21 @@ if (window.IS_EXTENSION) { } else { document.body.classList.add('is-app'); } + +/** + * Returns a linear file list from a nested file strcuture. + * It excludes the folders from the returned list. + * @param {array} files Nested file structure + */ +export function linearizeFiles(files) { + function reduceToLinearFiles(files) { + return files.reduce((list, currentFile) => { + if (currentFile.isFolder) { + return [...list, ...reduceToLinearFiles(currentFile.children)]; + } else { + return [...list, currentFile]; + } + }, []); + } + return reduceToLinearFiles(files); +}