Folders in the side nav are now draggable

browser/components/StorageItem.js

@@ -6,6 +6,7 @@ import React from 'react'
 import styles from './StorageItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 import _ from 'lodash'
+import { SortableHandle } from 'react-sortable-hoc'
 
 /**
  * @param {boolean} isActive
@@ -23,7 +24,9 @@ import _ from 'lodash'
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
   folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
-}) => (
+}) => {
+  const FolderDragger = SortableHandle(({ className }) => <i className={className} />)
+  return (
     <button styleName={isActive
       ? 'folderList-item--active'
       : 'folderList-item'
@@ -37,7 +40,7 @@ const StorageItem = ({
       <span styleName={isFolded
         ? 'folderList-item-name--folded' : 'folderList-item-name'
       }>
-      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
+        <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <FolderDragger className='fa fa-folder-open-o' /> : <FolderDragger className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
       </span>
       {(!isFolded && _.isNumber(noteCount)) &&
         <span styleName='folderList-item-noteCount'>{noteCount}</span>
@@ -48,7 +51,8 @@ const StorageItem = ({
         </span>
       }
     </button>
-)
+  )
+}
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,

browser/main/SideNav/StorageItem.js

@@ -9,6 +9,7 @@ import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
+import { SortableElement } from 'react-sortable-hoc'
 
 const { remote } = require('electron')
 const { Menu, dialog } = remote
@@ -236,7 +237,8 @@ class StorageItem extends React.Component {
   render () {
     const { storage, location, isFolded, data, dispatch } = this.props
     const { folderNoteMap, trashedSet } = data
-    const folderList = storage.folders.map((folder) => {
+    const SortableStorageItemChild = SortableElement(StorageItemChild)
+    const folderList = storage.folders.map((folder, index) => {
       const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
@@ -250,8 +252,9 @@ class StorageItem extends React.Component {
         noteCount = noteSet.size - trashedNoteCount
       }
       return (
-        <StorageItemChild
+        <SortableStorageItemChild
           key={folder.key}
+          index={index}
           isActive={isActive}
           handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
           handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}

browser/main/SideNav/index.js

@@ -17,6 +17,7 @@ import EventEmitter from 'browser/main/lib/eventEmitter'
 import PreferenceButton from './PreferenceButton'
 import ListButton from './ListButton'
 import TagButton from './TagButton'
+import {SortableContainer} from 'react-sortable-hoc'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -68,6 +69,17 @@ class SideNav extends React.Component {
     router.push('/alltags')
   }
 
+  onSortEnd (storage) {
+    return ({oldIndex, newIndex}) => {
+      const { dispatch } = this.props
+      dataApi
+        .reorderFolder(storage.key, oldIndex, newIndex)
+        .then((data) => {
+          dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
+        })
+    }
+  }
+
   SideNavComponent (isFolded, storageList) {
     const { location, data } = this.props
 
@@ -180,13 +192,16 @@ class SideNav extends React.Component {
     const isFolded = config.isSideNavFolded
 
     const storageList = data.storageMap.map((storage, key) => {
-      return <StorageItem
+      const SortableStorageItem = SortableContainer(StorageItem)
+      return <SortableStorageItem
         key={storage.key}
         storage={storage}
         data={data}
         location={location}
         isFolded={isFolded}
         dispatch={dispatch}
+        onSortEnd={this.onSortEnd.bind(this)(storage)}
+        useDragHandle
       />
     })
     const style = {}