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

browser/main/HomePage/SideNav/RepositorySection.styl

@@ -83,6 +83,21 @@
     color white
     background-color $brand-color
 
+.newFolderForm
+  width 100%
+  padding 0 15px
+  height 33px
+
+.newFolderForm-nameInput
+  width 100%
+  height 33px
+  padding 0 10px
+  border-radius 5px
+  border solid 1px $nav-border-color
+  outline none
+  &:focus
+    border-color $focus-border-color
+
 .newFolderButton
   height 33px
   width 100%

browser/main/HomePage/SideNav/index.js

@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
-import { openModal, isModalOpen } from 'browser/lib/modal'
+import { openModal } from 'browser/lib/modal'
 import Preferences from '../../modal/Preferences'
-import CreateNewFolder from '../../modal/CreateNewFolder'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../../modal/NewRepositoryModal'
 

browser/main/store.js

@@ -35,16 +35,36 @@ function repositories (state = initialRepositories, action) {
     case 'ADD_REPOSITORY':
       {
         let repos = state.slice()
+
         repos.push(action.repository)
+
         return repos
       }
     case 'REMOVE_REPOSITORY':
       {
         let repos = state.slice()
+
         let targetIndex = _.findIndex(repos, {key: action.key})
         if (targetIndex > -1) {
           repos.splice(targetIndex, 1)
         }
+
+        return repos
+      }
+    case 'ADD_FOLDER':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.key})
+
+        if (targetRepo == null) return state
+
+        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder.key})
+        if (targetFolderIndex < 0) {
+          targetRepo.folders.push(action.folder)
+        } else {
+          targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
+        }
+
         return repos
       }
   }