add Folder

browser/main/HomePage/SideNav/RepositorySection.js

@@ -9,10 +9,28 @@ const Menu = remote.Menu
 const MenuItem = remote.MenuItem
 
 class RepositorySection extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: true,
+      isCreatingFolder: false,
+      isSaving: false,
+      newFolder: {
+        name: ''
+      }
+    }
+  }
+
+  getRepository () {
+    let { repository } = this.props
+    return Repository.find(repository.key)
+  }
+
   handleUnlinkButtonClick () {
     let { dispatch, repository } = this.props
 
-    Repository.find(repository.key)
+    this.getRepository()
       .then((repositoryInstance) => {
         return repositoryInstance.unmount()
       })
@@ -25,16 +43,16 @@ class RepositorySection extends React.Component {
   }
 
   handleToggleButtonClick (e) {
-
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
   }
 
   handleContextButtonClick (e) {
     var menu = new Menu()
     menu.append(new MenuItem({
-      label: 'New Note'
-    }))
-    menu.append(new MenuItem({
-      label: 'New Folder'
+      label: 'New Folder',
+      click: () => this.handleNewFolderButtonClick()
     }))
     menu.append(new MenuItem({ type: 'separator' }))
     menu.append(new MenuItem({
@@ -45,17 +63,62 @@ class RepositorySection extends React.Component {
     menu.popup(remote.getCurrentWindow())
   }
 
+  handleNewFolderButtonClick (e) {
+    this.setState({
+      isCreatingFolder: true,
+      newFolder: {
+        name: 'New Folder'
+      }
+    }, () => {
+      this.refs.nameInput.select()
+      this.refs.nameInput.focus()
+    })
+  }
+
+  handleNewFolderFormChange (e) {
+    let newFolder = this.state.newFolder
+    newFolder.name = this.refs.nameInput.value
+
+    this.setState({
+      newFolder
+    })
+  }
+
+  handleNameInputBlur (e) {
+    let { dispatch, repository } = this.props
+
+    this.getRepository()
+      .then((repositoryInstance) => {
+        return repositoryInstance.addFolder({
+          name: this.state.newFolder.name
+        })
+      })
+      .then((folder) => {
+        console.log(folder)
+        dispatch({
+          type: 'ADD_FOLDER',
+          key: repository.key,
+          folder: folder
+        })
+
+        this.setState({
+          isCreatingFolder: false,
+          isSaving: false
+        })
+      })
+  }
+
   render () {
     let { repository } = this.props
 
     let folderElements = repository.folders.map((folder) => {
       return (
         <div
-          key={folder.name}
+          key={folder.key}
           styleName='folder'
         >
           <div styleName='folder-label'>
-            <i className='fa fa-cube'/> {folder.name}
+            <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
           </div>
           <div styleName='folder-control'>
             <button styleName='folder-control-button'>
@@ -66,6 +129,10 @@ class RepositorySection extends React.Component {
       )
     })
 
+    let toggleButtonIconClassName = this.state.isOpen
+      ? 'fa fa-minus'
+      : 'fa fa-plus'
+
     return (
       <div
         className='RepositorySection'
@@ -85,17 +152,29 @@ class RepositorySection extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleToggleButtonClick(e)}
             >
-              <i className='fa fa-angle-down'/>
+              <i className={toggleButtonIconClassName}/>
             </button>
           </div>
         </div>
+        {this.state.isOpen && <div>
+          {folderElements}
 
-        {folderElements}
-
-        <button styleName='newFolderButton'
-        >
-          <i className='fa fa-plus'/> New Folder
-        </button>
+          {this.state.isCreatingFolder
+            ? <div styleName='newFolderForm'>
+              <input styleName='newFolderForm-nameInput'
+                ref='nameInput'
+                value={this.state.newFolder.name}
+                onChange={(e) => this.handleNewFolderFormChange(e)}
+                onBlur={(e) => this.handleNameInputBlur(e)}
+              />
+            </div>
+            : <button styleName='newFolderButton'
+              onClick={(e) => this.handleNewFolderButtonClick(e)}
+            >
+              <i className='fa fa-plus'/> New Folder
+            </button>
+          }
+        </div>}
       </div>
     )
   }