From cbb272ec14217e48fb361eff5d223602e716d959 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 23 Aug 2016 13:52:31 -0400 Subject: [PATCH] file tree renders, select file works and editor changes content, rename works --- client/modules/IDE/actions/files.js | 1 - client/modules/IDE/actions/ide.js | 7 ++ client/modules/IDE/actions/project.js | 1 - client/modules/IDE/components/FileNode.js | 129 ++++++++++++---------- client/modules/IDE/components/Sidebar.js | 6 +- client/modules/IDE/pages/IDEView.js | 1 - client/modules/IDE/reducers/files.js | 10 +- 7 files changed, 88 insertions(+), 67 deletions(-) diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index cf09198b..96bb5ce5 100644 --- a/client/modules/IDE/actions/files.js +++ b/client/modules/IDE/actions/files.js @@ -130,7 +130,6 @@ export function hideFileOptions(fileId) { } export function showEditFileName(id) { - console.log('in show edit file name'); return { type: ActionTypes.SHOW_EDIT_FILE_NAME, id diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 4cb32913..b758c915 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -37,6 +37,13 @@ export function setSelectedFile(fileId) { }; } +export function resetSelectedFile() { + return (dispatch, getState) => { + const state = getState(); + setSelectedFile(state.files[1].id); + }; +} + export function dispatchConsoleEvent(...args) { return { type: ActionTypes.CONSOLE_EVENT, diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index a491de48..01937f1f 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -121,7 +121,6 @@ export function exportProjectAsZip() { const state = getState(); const zip = new JSZip(); async.each(state.files, (file, cb) => { - console.log(file); if (file.url) { JSZipUtils.getBinaryContent(file.url, (err, data) => { zip.file(file.name, data, { binary: true }); diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js index 5d4d8bb4..bfe3c8f6 100644 --- a/client/modules/IDE/components/FileNode.js +++ b/client/modules/IDE/components/FileNode.js @@ -1,10 +1,12 @@ import React, { PropTypes } from 'react'; import * as FileActions from '../actions/files'; +import * as IDEActions from '../actions/ide'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import InlineSVG from 'react-inlinesvg'; const downArrowUrl = require('../../../images/down-arrow.svg'); import classNames from 'classnames'; +import { setSelectedFile } from '../reducers/files'; export class FileNode extends React.Component { constructor(props) { @@ -13,6 +15,12 @@ export class FileNode extends React.Component { this.handleKeyPress = this.handleKeyPress.bind(this); this.handleFileNameChange = this.handleFileNameChange.bind(this); this.validateFileName = this.validateFileName.bind(this); + this.handleFileClick = this.handleFileClick.bind(this); + } + + handleFileClick(e) { + e.stopPropagation(); + this.props.setSelectedFile(this.props.id); } handleFileNameChange(event) { @@ -46,63 +54,73 @@ export class FileNode extends React.Component { render() { let itemClass = classNames({ - 'sidebar__file-item': true, + 'sidebar__file-item': this.props.name !== 'root', 'sidebar__file-item--selected': this.props.isSelected, 'sidebar__file-item--open': this.props.isOptionsOpen, 'sidebar__file-item--editing': this.props.isEditingName }); return ( -
- {this.props.name} - { - this.validateFileName(); - this.props.hideEditFileName(this.props.id); - }} - onKeyPress={this.handleKeyPress} - /> - -
- -
+
setTimeout(() => this.props.hideFileOptions(this.props.id), 100)} + > + {(() => { // eslint-disable-line + if (this.props.name !== 'root') { + return ( +
+ {this.props.name} + { + this.validateFileName(); + this.props.hideEditFileName(this.props.id); + }} + onKeyPress={this.handleKeyPress} + /> + +
+ +
+
+ ); + } + })()} {(() => { // eslint-disable-line - console.log(this.props.children); if (this.props.children) { return (
    @@ -124,22 +142,21 @@ FileNode.propTypes = { isOptionsOpen: PropTypes.bool, isEditingName: PropTypes.bool, setSelectedFile: PropTypes.func.isRequired, - fileIndex: PropTypes.number.isRequired, showFileOptions: PropTypes.func.isRequired, hideFileOptions: PropTypes.func.isRequired, deleteFile: PropTypes.func.isRequired, - resetSelectedFile: PropTypes.func.isRequired, showEditFileName: PropTypes.func.isRequired, hideEditFileName: PropTypes.func.isRequired, - updateFileName: PropTypes.func.isRequired + updateFileName: PropTypes.func.isRequired, + resetSelectedFile: PropTypes.func.isRequired }; function mapStateToProps(state, ownProps) { - return state.files.find((file) => file.id === ownProps.id); + return setSelectedFile(state.files, state.ide.selectedFile).find((file) => file.id === ownProps.id); } function mapDispatchToProps(dispatch) { - return bindActionCreators(FileActions, dispatch); + return bindActionCreators(Object.assign(FileActions, IDEActions), dispatch); } const ConnectedFileNode = connect(mapStateToProps, mapDispatchToProps)(FileNode); diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js index 7fae0857..395bba71 100644 --- a/client/modules/IDE/components/Sidebar.js +++ b/client/modules/IDE/components/Sidebar.js @@ -13,7 +13,7 @@ class Sidebar extends React.Component { } resetSelectedFile() { - this.props.setSelectedFile(this.props.files[0].id); + this.props.setSelectedFile(this.props.files[1].id); } render() { @@ -50,7 +50,7 @@ class Sidebar extends React.Component {
- */ } ); diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index b90224bb..14a19320 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -24,7 +24,6 @@ import About from '../components/About'; class IDEView extends React.Component { constructor(props) { - console.log(props); super(props); this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index ab4ee3e7..b12fac71 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -33,6 +33,11 @@ const defaultCSS = // if the project has never been saved, const initialState = [ + { + name: 'root', + id: '0', + children: ['1', '2', '3'] + }, { name: 'sketch.js', content: defaultSketch, @@ -47,11 +52,6 @@ const initialState = [ name: 'style.css', content: defaultCSS, id: '3' - }, - { - name: 'root', - id: '0', - children: ['1', '2', '3'] }];