<Directory /> component refactored

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react", "es2015"]
-}
+  "presets": ["react", "es2015", "stage-2"]
+}

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "6"

package.json

@@ -4,14 +4,15 @@
   "description": "",
   "main": "./main/main.js",
   "scripts": {
-    "test": "mocha --compilers js:babel-register test/test.js",
+    "test": "mocha --compilers js:babel-register --reporter nyan test/test.js",
     "start": "cross-env NODE_ENV=production electron .",
     "dev-start": "cross-env NODE_ENV=development electron .",
     "dev": "webpack-dev-server --inline --content-base ./renderer"
   },
   "author": "Mark Cruz, Jin Choi, Bita Djaghouri",
   "license": "ISC",
   "dependencies": {
+    "classnames": "^2.2.5",
     "electron": "^1.6.1",
     "electron-debug": "^1.1.0",
     "electron-localshortcut": "^1.1.0",
@@ -29,6 +30,7 @@
     "babel-loader": "^6.3.2",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.23.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.6.1",

renderer/components/App.jsx

@@ -118,7 +118,7 @@ export default class App extends React.Component {
       })
     }
   }
-  //handles click event from delete prompt 
+  //handles click event from delete prompt
   deletePromptHandler(answer) {
     if (answer) {
       ipcRenderer.send('delete', this.state.selectedItem.path);
@@ -280,20 +280,20 @@ export default class App extends React.Component {
     }
   }
   //click handler for plus button on directories, 'opens' new file/dir menu by setting openMenuID state
-  openCreateMenu(id, itemPath, type, event) {
-    event.stopPropagation();
+  openCreateMenu(id, itemPath, proxyEvent) {
+    proxyEvent.stopPropagation();
     this.setState({
       openMenuId: id,
       selectedItem: {
         id: id,
         path: itemPath,
-        type
+        type: null,
       }
     });
   }
-  createForm(id, type, event) {
+  createForm(id, type, proxyEvent) {
     document.body.onkeydown = () => { };
-    event.stopPropagation();
+    proxyEvent.stopPropagation();
     this.setState({
       createMenuInfo: {
         id,

renderer/components/Directory.jsx

@@ -1,76 +1,94 @@
-import React from 'react';
+import React, { Component } from 'react';
+import cx from 'classnames';
 import File from './File.jsx';
 import CreateMenu from './CreateMenu.jsx';
 import CreateForm from './CreateForm.jsx';
 import RenameForm from './RenameForm.jsx';
 
-export default class Directory extends React.Component {
-  constructor() {
-    super();
-  }
+export default class Directory extends Component {
+  handleListItemClick = proxyEvent => (
+    this.props.clickHandler(
+      this.props.id,
+      this.props.directory.path,
+      this.props.directory.type,
+      proxyEvent
+    )
+  )
+
+  handlePlusIconClick = proxyEvent => (
+    this.props.openCreateMenu(
+      this.props.id,
+      this.props.directory.path,
+      proxyEvent
+    )
+  )
+
   render() {
-    const arr = [];
-    let uniqueId;
-    for (var i = 0; i < this.props.directory.subdirectories.length; i++) {
-      arr.push(
-        <Directory
-          key={this.props.directory.subdirectories[i].id}
-          id={this.props.directory.subdirectories[i].id}
-          directory={this.props.directory.subdirectories[i]}
-          openFile={this.props.openFile}
-          clickHandler={this.props.clickHandler}
-          selectedItem={this.props.selectedItem}
-          openCreateMenu={this.props.openCreateMenu}
-          openMenuId={this.props.openMenuId}
-          createMenuInfo={this.props.createMenuInfo}
-          createForm={this.props.createForm}
-          createItem={this.props.createItem}
-          rename={this.props.rename}
-          renameHandler={this.props.renameHandler}
-        />)
-    }
-    for (var i = 0; i < this.props.directory.files.length; i++) {
-      arr.push(
-        <File
-          key={this.props.directory.files[i].id}
-          id={this.props.directory.files[i].id}
-          file={this.props.directory.files[i]}
-          openFile={this.props.openFile}
-          clickHandler={this.props.clickHandler}
-          selectedItem={this.props.selectedItem}
-          rename={this.props.rename}
-          renameHandler={this.props.renameHandler}
-        />)
-    }
-    let item = (
-      <div
-        className="list-item"
-        onClick={this.props.clickHandler.bind(null, this.props.id, this.props.directory.path, this.props.directory.type)}
-      >
+    const subdirectories = this.props.directory.subdirectories.map(directory => (
+      <Directory
+        key={directory.id}
+        id={directory.id}
+        directory={directory}
+        openFile={this.props.openFile}
+        clickHandler={this.props.clickHandler}
+        selectedItem={this.props.selectedItem}
+        openCreateMenu={this.props.openCreateMenu}
+        openMenuId={this.props.openMenuId}
+        createMenuInfo={this.props.createMenuInfo}
+        createForm={this.props.createForm}
+        createItem={this.props.createItem}
+        rename={this.props.rename}
+        renameHandler={this.props.renameHandler}
+      />
+    ));
+    const files = this.props.directory.files.map(file => (
+      <File
+        key={file.id}
+        id={file.id}
+        file={file}
+        openFile={this.props.openFile}
+        clickHandler={this.props.clickHandler}
+        selectedItem={this.props.selectedItem}
+        rename={this.props.rename}
+        renameHandler={this.props.renameHandler}
+      />
+    ));
+    const directory = subdirectories.concat(files);
+
+    const item = (
+      <div className="list-item" onClick={this.handleListItemClick}>
         <span className="icon icon-file-directory">
           {this.props.directory.name}
         </span>
-        <span className="plus-icon" onClick={this.props.openCreateMenu.bind(null, this.props.id, this.props.directory.path)}>+</span>
-        {this.props.openMenuId === this.props.id ? <CreateMenu createForm={this.props.createForm} id={this.props.id} /> : <span />}
-        {this.props.createMenuInfo.id === this.props.id ? <CreateForm createItem={this.props.createItem} /> : <span />}
-    </div>)
-    if (this.props.directory.opened) {
-      return (
-        <li className={this.props.selectedItem.id === this.props.id ? 'list-nested-item selected' : 'list-nested-item'}>
-          {this.props.rename && this.props.selectedItem.id === this.props.id ? <RenameForm renameHandler={this.props.renameHandler} /> : item}
+        <span className="plus-icon" onClick={this.handlePlusIconClick}>+</span>
+        {this.props.openMenuId === this.props.id ?
+          <CreateMenu createForm={this.props.createForm} id={this.props.id} /> :
+          <span />
+        }
+        {this.props.createMenuInfo.id === this.props.id ?
+          <CreateForm createItem={this.props.createItem} /> :
+          <span />
+        }
+      </div>
+    );
+
+    const listItemClassName = cx('list-nested-item', {
+      collapsed: !this.props.directory.opened,
+      selected: this.props.selectedItem.id === this.props.id
+    });
+
+    return (
+      <li className={listItemClassName}>
+        {this.props.rename && this.props.selectedItem.id === this.props.id ?
+          <RenameForm renameHandler={this.props.renameHandler} /> :
+          item
+        }
+        {this.props.directory.opened &&
           <ul className="list-tree">
-            {arr}
+            {directory}
           </ul>
-        </li>
-      )
-    } else {
-      return (
-        <li
-          className={this.props.selectedItem.id === this.props.id ? 'list-nested-item collapsed selected' : 'list-nested-item collapsed'}
-        >
-          {this.props.rename && this.props.selectedItem.id === this.props.id ? <RenameForm renameHandler={this.props.renameHandler} /> : item}
-        </li>
-      )
-    }
+        }
+      </li>
+    )
   }
-}
+}