Going LIte

lib/components/CodeEditor.js

@@ -1,5 +1,5 @@
 import React from 'react'
-let ReactDOM = require('react-dom')
+import ReactDOM from 'react-dom'
 var ace = window.ace
 
 module.exports = React.createClass({
@@ -15,17 +15,21 @@ module.exports = React.createClass({
       readOnly: false
     }
   },
+  componentWillReceiveProps: function (nextProps) {
+    if (nextProps.readOnly !== this.props.readOnly) {
+      this.editor.setReadOnly(!!nextProps.readOnly)
+    }
+  },
   componentDidMount: function () {
     var el = ReactDOM.findDOMNode(this.refs.target)
-    var editor = ace.edit(el)
+    var editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.setValue(this.props.code)
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
     editor.clearSelection()
-    if (this.props.readOnly) {
-      editor.setReadOnly(true)
-    }
+
+    editor.setReadOnly(!!this.props.readOnly)
 
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {

lib/components/FolderMark.js

@@ -34,7 +34,7 @@ function getColorByIndex (index) {
 
 export default class FolderMark extends React.Component {
   render () {
-    let color = getColorByIndex(this.props.id)
+    let color = getColorByIndex(this.props.color)
     return (
       <i className='fa fa-square fa-fw' style={{color: color}}/>
     )
@@ -42,5 +42,5 @@ export default class FolderMark extends React.Component {
 }
 
 FolderMark.propTypes = {
-  id: PropTypes.number
+  color: PropTypes.number
 }

lib/components/TagLink.js

@@ -4,17 +4,15 @@ import { setTagFilter } from '../actions'
 
 export default class TagLink extends React.Component {
   handleClick (e) {
-    store.dispatch(setTagFilter(this.props.tag.name))
+    store.dispatch(setTagFilter(this.props.tag))
   }
   render () {
     return (
-      <a onClick={e => this.handleClick(e)}>{this.props.tag.name}</a>
+      <a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
     )
   }
 }
 
 TagLink.propTypes = {
-  tag: PropTypes.shape({
-    name: PropTypes.string
-  })
+  tag: PropTypes.string
 }

lib/components/TagSelect.js

@@ -0,0 +1,77 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import _ from 'lodash'
+import linkState from 'boost/linkState'
+
+export default class TagSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      input: ''
+    }
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode !== 13) return false
+    e.preventDefault()
+
+    let tags = this.props.tags.slice(0)
+    let newTag = this.state.input
+
+    tags.push(newTag)
+    tags = _.uniq(tags)
+
+    if (_.isFunction(this.props.onChange)) {
+      this.props.onChange(newTag, tags)
+    }
+    this.setState({input: ''})
+  }
+
+  handleThisClick (e) {
+    ReactDOM.findDOMNode(this.refs.tagInput).focus()
+  }
+
+  handleItemRemoveButton (tag) {
+    return e => {
+      e.stopPropagation()
+
+      let tags = this.props.tags.slice(0)
+      tags.splice(tags.indexOf(tag), 1)
+
+      if (_.isFunction(this.props.onChange)) {
+        this.props.onChange(null, tags)
+      }
+    }
+  }
+
+  render () {
+    var tagElements = _.isArray(this.props.tags)
+      ? this.props.tags.map(tag => (
+        <span key={tag} className='tagItem'>
+          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
+          <span className='tagLabel'>{tag}</span>
+        </span>))
+      : null
+
+    return (
+      <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
+        {tagElements}
+        <input
+          type='text'
+          onKeyDown={e => this.handleKeyDown(e)}
+          ref='tagInput'
+          valueLink={this.linkState('input')}
+          placeholder='new tag'
+          className='tagInput'/>
+      </div>
+    )
+  }
+}
+
+TagSelect.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func
+}
+
+TagSelect.prototype.linkState = linkState

lib/components/modal/CreateNewFolder.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
-import api from 'boost/api'
-import { pick } from 'lodash'
+import keygen from 'boost/keygen'
+import { createFolder } from 'boost/actions'
+import store from 'boost/store'
 
 export default class CreateNewFolder extends React.Component {
   constructor (props) {
@@ -9,54 +10,42 @@ export default class CreateNewFolder extends React.Component {
 
     this.state = {
       name: '',
-      public: false
+      alert: null
     }
   }
+
   handleCloseButton (e) {
     this.props.close()
   }
 
-  handlePublicButtonClick (value) {
-    console.log(value)
-    return e => {
-      this.setState({public: value})
-    }
-  }
-
   handleConfirmButton (e) {
-    let { user, close } = this.props
-    let input = pick(this.state, ['public', 'name'])
-    input.UserId = user.id
+    let { close } = this.props
+    let key = keygen()
+    let name = this.state.name
+    let input = {
+      name,
+      key,
+      createAt: new Date(),
+      updatedAt: new Date(),
+      // random number (0-7)
+      color: Math.round(Math.random() * 7)
+    }
 
-    api.createFolder(input)
-      .then(res => {
-        console.log(res.body)
-        close()
-      })
-      .catch(err => {
-        console.log(err)
-        var alert
-        if (err.code === 'ECONNREFUSED') {
-          alert = {
-            type: 'error',
-            message: 'Can\'t connect to API server.'
-          }
-        } else if (err.status != null) {
-          alert = {
-            type: 'error',
-            message: err.response.body.message
-          }
-        } else {
-          throw err
-        }
-
-        this.setState({alert: alert})
-      })
+    store.dispatch(createFolder(input))
+    try {
+    } catch (e) {
+      this.setState({alert: {
+        type: 'error',
+        message: e.message
+      }})
+      return
+    }
+    close()
   }
 
   render () {
     let alert = this.state.alert
-    let alertEl = alert != null ? (
+    let alertElement = alert != null ? (
         <p className={`alert ${alert.type}`}>
           {alert.message}
         </p>
@@ -69,13 +58,7 @@ export default class CreateNewFolder extends React.Component {
         <div className='title'>Create new folder</div>
 
         <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
-
-        <div className='public'>
-          <button className={!this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(false)(e)}>Private</button>
-          <span className='divider'>/</span>
-          <button className={this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(true)(e)}>Public</button>
-        </div>
-        {alertEl}
+        {alertElement}
 
         <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
       </div>
@@ -84,7 +67,6 @@ export default class CreateNewFolder extends React.Component {
 }
 
 CreateNewFolder.propTypes = {
-  user: PropTypes.shape(),
   close: PropTypes.func
 }
 

lib/components/modal/Preference/AppSettingTab.js

@@ -1,6 +1,24 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import linkState from 'boost/linkState'
+import remote from 'remote'
+import ipc from 'ipc'
 
 export default class AppSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+    let keymap = remote.getGlobal('keymap')
+
+    this.state = {
+      toggleFinder: keymap.toggleFinder
+    }
+  }
+
+  handleSaveButtonClick (e) {
+    ipc.send('hotkeyUpdated', {
+      toggleFinder: this.state.toggleFinder
+    })
+  }
+
   render () {
     return (
       <div className='AppSettingTab content'>
@@ -8,10 +26,10 @@ export default class AppSettingTab extends React.Component {
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
             <label>Toggle Finder(popup)</label>
-            <input type='text'/>
+            <input valueLink={this.linkState('toggleFinder')} type='text'/>
           </div>
           <div className='sectionConfirm'>
-            <button>Save</button>
+            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
           </div>
           <div className='description'>
             <ul>
@@ -38,3 +56,5 @@ export default class AppSettingTab extends React.Component {
     )
   }
 }
+
+AppSettingTab.prototype.linkState = linkState

lib/components/modal/Preferences.js

@@ -24,21 +24,7 @@ class Preferences extends React.Component {
     super(props)
 
     this.state = {
-      currentTab: PROFILE,
-      currentTeamId: props.status.userId,
-      profile: {
-        userInfo: {
-          profileName: props.currentUser.profileName,
-          email: props.currentUser.email,
-          alert: null
-        },
-        password: {
-          currentPassword: '',
-          newPassword: '',
-          confirmation: '',
-          error: null
-        }
-      }
+      currentTab: APP
     }
   }
 
@@ -56,12 +42,8 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: PROFILE, label: 'Profile'},
-      {target: APP, label: 'Preferences'},
-      {target: HELP, label: 'Help & Feedback'},
-      {target: TEAM, label: 'Team setting'},
-      {target: MEMBER, label: 'Manage member'},
-      {target: FOLDER, label: 'Manage folder'}
+      {target: APP, label: 'Preferences'}
+      // {target: FOLDER, label: 'Manage folder'}
     ]
 
     let navButtons = tabs.map(tab => (
@@ -85,42 +67,12 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let currentTeamId = parseInt(this.state.currentTeamId, 10)
-    let teams = [this.props.currentUser].concat(this.props.currentUser.Teams)
-
     switch (this.state.currentTab) {
-      case APP:
-        return (<AppSettingTab/>)
       case HELP:
         return (<HelpTab/>)
-      case TEAM:
-        return (
-          <TeamSettingTab
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case MEMBER:
-        return (
-          <MemberSettingTab
-            currentUser={this.props.currentUser}
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case FOLDER:
-        return (
-          <FolderSettingTab
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case PROFILE:
+      case APP:
       default:
-        return this.renderProfile()
+        return (<AppSettingTab/>)
     }
   }