file tree renders, select file works and editor changes content, rename works

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

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,

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 });

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,13 +54,21 @@ 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 (
-      <div className={itemClass}>
+      <div
+        className={itemClass}
+        onClick={this.handleFileClick}
+        onBlur={() => setTimeout(() => this.props.hideFileOptions(this.props.id), 100)}
+      >
+        {(() => { // eslint-disable-line
+          if (this.props.name !== 'root') {
+            return (
+              <div className="file-item__content">
                 <a className="sidebar__file-item-name">{this.props.name}</a>
                 <input
                   type="text"
@@ -78,7 +94,6 @@ export class FileNode extends React.Component {
                     <li>
                       <a
                         onClick={() => {
-                  console.log('before show edit file name');
                           this.originalFileName = this.props.name;
                           this.props.showEditFileName(this.props.id);
                           setTimeout(() => this.refs.fileNameInput.focus(), 0);
@@ -101,8 +116,11 @@ export class FileNode extends React.Component {
                     </li>
                   </ul>
                 </div>
+              </div>
+            );
+          }
+        })()}
         {(() => { // eslint-disable-line
-          console.log(this.props.children);
           if (this.props.children) {
             return (
               <ul>
@@ -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);

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 {
             </button>
           </div>
         </div>
-        <ul className="sidebar__file-list" title="project files">
+        { /* <ul className="sidebar__file-list" title="project files">
           {this.props.files.map((file, fileIndex) =>
             <SidebarItem
               key={file.id}
@@ -66,7 +66,7 @@ class Sidebar extends React.Component {
               updateFileName={this.props.updateFileName}
             />
           )}
-        </ul>
+        </ul> */ }
         <ConnectedFileNode id={'0'} />
       </nav>
     );

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);

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']
   }];