prepare alpha.5 (remain work: MD preview, keybind)

lib/components/modal/Preference/FolderRow.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
-import api from 'boost/api'
 import linkState from 'boost/linkState'
 import FolderMark from 'boost/components/FolderMark'
+import store from 'boost/store'
+import { updateFolder, destroyFolder } from 'boost/actions'
 
 const IDLE = 'IDLE'
 const EDIT = 'EDIT'
@@ -12,22 +13,21 @@ export default class FolderRow extends React.Component {
     super(props)
 
     this.state = {
-      mode: IDLE,
-      name: props.folder.name,
-      public: props.folder.public
+      mode: IDLE
     }
   }
 
   handleCancelButtonClick (e) {
     this.setState({
-      mode: IDLE,
-      name: this.props.folder.name,
-      public: this.props.folder.public
+      mode: IDLE
     })
   }
 
   handleEditButtonClick (e) {
-    this.setState({mode: EDIT})
+    this.setState({
+      mode: EDIT,
+      name: this.props.folder.name
+    })
   }
 
   handleDeleteButtonClick (e) {
@@ -39,31 +39,21 @@ export default class FolderRow extends React.Component {
   }
 
   handleSaveButtonClick (e) {
+    let { folder } = this.props
     let input = {
-      name: this.state.name,
-      public: !!parseInt(this.state.public, 10)
+      name: this.state.name
     }
+    Object.assign(folder, input)
 
-    api.updateFolder(this.props.folder.id, input)
-      .then(res => {
-        console.log(res.body)
-        this.setState({mode: IDLE})
-      })
-      .catch(err => {
-        if (err.status != null) throw err
-        else console.error(err)
-      })
+    store.dispatch(updateFolder(folder))
+    this.setState({
+      mode: IDLE
+    })
   }
 
   handleDeleteConfirmButtonClick (e) {
-    api.destroyFolder(this.props.folder.id)
-      .then(res => {
-        console.log(res.body)
-      })
-      .catch(err => {
-        if (err.status != null) throw err
-        else console.error(err)
-      })
+    let { folder } = this.props
+    store.dispatch(destroyFolder(folder.key))
   }
 
   render () {
@@ -76,12 +66,6 @@ export default class FolderRow extends React.Component {
             <div className='folderName'>
               <input valueLink={this.linkState('name')} type='text'/>
             </div>
-            <div className='folderPublic'>
-              <select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
-                <option value='0'>Private</option>
-                <option value='1'>Public</option>
-              </select>
-            </div>
             <div className='folderControl'>
               <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
               <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
@@ -102,8 +86,7 @@ export default class FolderRow extends React.Component {
       default:
         return (
           <div className='FolderRow'>
-            <div className='folderName'><FolderMark id={folder.id}/> {folder.name}</div>
-            <div className='folderPublic'>{folder.public ? 'Public' : 'Private'}</div>
+            <div className='folderName'><FolderMark color={folder.color}/> {folder.name}</div>
             <div className='folderControl'>
               <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
               <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>

lib/components/modal/Preference/FolderSettingTab.js

@@ -1,87 +1,44 @@
 import React, { PropTypes } from 'react'
-import _ from 'lodash'
 import FolderRow from './FolderRow'
 import linkState from 'boost/linkState'
-import api from 'boost/api'
+import { createFolder } from 'boost/actions'
 
 export default class FolderSettingTab extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      name: '',
-      public: 0
+      name: ''
     }
   }
 
-  getCurrentTeam (props) {
-    if (props == null) props = this.props
-    return _.findWhere(props.teams, {id: props.currentTeamId})
-  }
-
-  handleTeamSelectChange (e) {
-    this.props.switchTeam(e.target.value)
-  }
-
-  handleFolderPublicChange (e) {
-    this.setState({public: e.target.value})
-  }
-
   handleSaveButtonClick (e) {
-    let team = this.getCurrentTeam()
-    let input = {
-      UserId: team.id,
-      name: this.state.name,
-      public: !!parseInt(this.state.public, 10)
-    }
+    if (this.state.name.trim().length === 0) return false
 
-    api.createFolder(input)
-      .then(res => {
-        console.log(res.body)
-        this.setState({
-          name: '',
-          public: 0
-        })
-      })
-      .catch(err => {
-        if (err.status != null) throw err
-        else console.error(err)
-      })
-  }
+    let { dispatch } = this.props
 
-  renderTeamOptions () {
-    return this.props.teams.map(team => {
-      return (
-        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
-    })
+    dispatch(createFolder({
+      name: this.state.name
+    }))
+
+    this.setState({name: ''})
   }
 
   render () {
-    let team = this.getCurrentTeam()
-    console.log(team.Folders)
-    let folderElements = team.Folders.map(folder => {
+    let { folders } = this.props
+    let folderElements = folders.map(folder => {
       return (
-        <FolderRow key={'folder-' + folder.id} folder={folder}/>
+        <FolderRow key={'folder-' + folder.key} folder={folder}/>
         )
     })
 
     return (
       <div className='FolderSettingTab content'>
-        <div className='header'>
-          <span>Setting of</span>
-          <select
-            value={this.props.currentTeamId}
-            onChange={e => this.handleTeamSelectChange(e)}
-            className='teamSelect'>
-            {this.renderTeamOptions()}
-          </select>
-        </div>
         <div className='section'>
-          <div className='sectionTitle'>Folders</div>
+          <div className='sectionTitle'>Manage folder</div>
           <div className='folderTable'>
             <div className='folderHeader'>
               <div className='folderName'>Folder name</div>
-              <div className='folderPublic'>Public/Private</div>
               <div className='folderControl'>Edit/Delete</div>
             </div>
             {folderElements}
@@ -89,12 +46,6 @@ export default class FolderSettingTab extends React.Component {
               <div className='folderName'>
                 <input valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
               </div>
-              <div className='folderPublic'>
-                <select value={this.state.public} onChange={e => this.handleFolderPublicChange(e)}>
-                  <option value='0'>Private</option>
-                  <option value='1'>Public</option>
-                </select>
-              </div>
               <div className='folderControl'>
                 <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
               </div>
@@ -107,9 +58,8 @@ export default class FolderSettingTab extends React.Component {
 }
 
 FolderSettingTab.propTypes = {
-  currentTeamId: PropTypes.number,
-  teams: PropTypes.array,
-  switchTeam: PropTypes.func
+  folders: PropTypes.array,
+  dispatch: PropTypes.func
 }
 
 FolderSettingTab.prototype.linkState = linkState