add Member setting, Team setting, FolderSetting(80%)

bump react-select

lib/components/modal/CreateNewFolder.js

@@ -12,6 +12,9 @@ export default class CreateNewFolder extends React.Component {
       public: false
     }
   }
+  handleCloseButton (e) {
+    this.props.close()
+  }
 
   handlePublicButtonClick (value) {
     console.log(value)
@@ -61,7 +64,7 @@ export default class CreateNewFolder extends React.Component {
 
     return (
       <div className='CreateNewFolder modal'>
-        <button className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+        <button onClick={e => this.handleCloseButton(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
 
         <div className='title'>Create new folder</div>
 

lib/components/modal/CreateNewTeam.js

@@ -140,8 +140,7 @@ export default class CreateNewTeam extends React.Component {
   handleMemberDeleteButtonClick (name) {
     let selectState = this.state.select
     let input = {
-      name: name,
-      role: 'member'
+      name: name
     }
 
     return e => {
@@ -175,15 +174,7 @@ export default class CreateNewTeam extends React.Component {
 
       setMember(selectState.team.id, input)
         .then(res => {
-          let selectState = this.state.select
-          let team = res.body
-          team.Members = team.Members.sort((a, b) => {
-            return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
-          })
-          selectState.team = team
-          selectState.newMember = ''
-
-          this.setState({select: selectState})
+          console.log(res.body)
         })
         .catch(err => {
           if (err.status != null) throw err

lib/components/modal/Preference/AppSettingTab.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react'
+
+export default class AppSettingTab extends React.Component {
+  render () {
+    return (
+      <div className='AppSettingTab content'>
+        <div className='section'>
+          <div className='sectionTitle'>Hotkey</div>
+          <div className='sectionInput'>
+            <label>Toggle Finder(popup)</label>
+            <input type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button>Save</button>
+          </div>
+          <div className='description'>
+            <ul>
+              <li><code>0</code> to <code>9</code></li>
+              <li><code>A</code> to <code>Z</code></li>
+              <li><code>F1</code> to <code>F24</code></li>
+              <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+              <li><code>Plus</code></li>
+              <li><code>Space</code></li>
+              <li><code>Backspace</code></li>
+              <li><code>Delete</code></li>
+              <li><code>Insert</code></li>
+              <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+              <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+              <li><code>Home</code> and <code>End</code></li>
+              <li><code>PageUp</code> and <code>PageDown</code></li>
+              <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+              <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+              <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

lib/components/modal/Preference/FolderRow.js

@@ -0,0 +1,121 @@
+import React, { PropTypes } from 'react'
+import api from 'boost/api'
+import linkState from 'boost/linkState'
+import FolderMark from 'boost/components/FolderMark'
+
+const IDLE = 'IDLE'
+const EDIT = 'EDIT'
+const DELETE = 'DELETE'
+
+export default class FolderRow extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE,
+      name: props.folder.name,
+      public: props.folder.public
+    }
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({
+      mode: IDLE,
+      name: this.props.folder.name,
+      public: this.props.folder.public
+    })
+  }
+
+  handleEditButtonClick (e) {
+    this.setState({mode: EDIT})
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({mode: DELETE})
+  }
+
+  handleFolderPublicChange (e) {
+    this.setState({public: e.target.value})
+  }
+
+  handleSaveButtonClick (e) {
+    let input = {
+      name: this.state.name,
+      public: !!parseInt(this.state.public, 10)
+    }
+
+    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)
+      })
+  }
+
+  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)
+      })
+  }
+
+  render () {
+    let folder = this.props.folder
+
+    switch (this.state.mode) {
+      case EDIT:
+        return (
+          <div className='FolderRow edit'>
+            <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>
+            </div>
+          </div>
+        )
+      case DELETE:
+        return (
+          <div className='FolderRow delete'>
+            <div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
+            <div className='folderControl'>
+              <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
+              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </div>
+        )
+      case IDLE:
+      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='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>
+            </div>
+          </div>
+        )
+    }
+  }
+}
+
+FolderRow.propTypes = {
+  folder: PropTypes.shape()
+}
+
+FolderRow.prototype.linkState = linkState

lib/components/modal/Preference/FolderSettingTab.js

@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react'
+import _ from 'lodash'
+import FolderRow from './FolderRow'
+
+export default class FolderSettingTab extends React.Component {
+
+  getCurrentTeam (props) {
+    if (props == null) props = this.props
+    return _.findWhere(props.teams, {id: props.currentTeamId})
+  }
+
+  handleTeamSelectChange (e) {
+    this.props.switchTeam(e.target.value)
+  }
+
+  renderTeamOptions () {
+    return this.props.teams.map(team => {
+      return (
+        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
+    })
+  }
+
+  render () {
+    let team = this.getCurrentTeam()
+    console.log(team.Folders)
+    let folderElements = team.Folders.map(folder => {
+      return (
+        <FolderRow key={'folder-' + folder.id} 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='folderTable'>
+            <div className='folderHeader'>
+              <div className='folderName'>Folder name</div>
+              <div className='folderPublic'>Public/Private</div>
+              <div className='folderControl'>Edit/Delete</div>
+            </div>
+            {folderElements}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+FolderSettingTab.propTypes = {
+  currentTeamId: PropTypes.number,
+  teams: PropTypes.array,
+  switchTeam: PropTypes.func
+}

lib/components/modal/Preference/HelpTab.js

@@ -0,0 +1,11 @@
+import React, { PropTypes } from 'react'
+
+export default class HelpTab extends React.Component {
+  render () {
+    return (
+      <div className='content help'>
+        Comming soon
+      </div>
+    )
+  }
+}

lib/components/modal/Preference/MemberSettingTab.js

@@ -0,0 +1,206 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import Select from 'react-select'
+import api from 'boost/api'
+import _ from 'lodash'
+
+function getUsers (input, cb) {
+  api.searchUser(input)
+    .then(function (res) {
+      let users = res.body
+
+      cb(null, {
+        options: users.map(user => {
+          return { value: user.name, label: user.name }
+        }),
+        complete: false
+      })
+    })
+    .catch(function (err) {
+      console.error(err)
+    })
+}
+
+export default class MemberSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      newMember: ''
+    }
+  }
+
+  getCurrentTeam (props) {
+    if (props == null) props = this.props
+    return _.findWhere(props.teams, {id: props.currentTeamId})
+  }
+
+  handleTeamSelectChange (e) {
+    this.props.switchTeam(e.target.value)
+  }
+
+  handleNewMemberChange (value) {
+    this.setState({newMember: value})
+  }
+
+  handleClickAddMemberButton (e) {
+    let team = this.getCurrentTeam()
+    if (team == null || team.userType !== 'team') return null
+
+    let input = {
+      name: this.state.newMember,
+      role: 'member'
+    }
+    api.setMember(team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+  handleMemberRoleChange (name) {
+    return e => {
+      let team = this.getCurrentTeam()
+      let input = {
+        name: name,
+        role: e.target.value
+      }
+
+      api.setMember(team.id, input)
+        .then(res => {
+          console.log(res.body)
+        })
+        .catch(err => {
+          if (err.status != null) throw err
+          else console.error(err)
+        })
+    }
+  }
+
+  handleMemberDeleteButtonClick (name) {
+    return e => {
+      let team = this.getCurrentTeam()
+      let input = {
+        name: name
+      }
+
+      api.deleteMember(team.id, input)
+        .then(res => {
+          console.log(res.body)
+        })
+        .catch(err => {
+          if (err.status != null) throw err
+          else console.error(err)
+        })
+    }
+  }
+
+  renderTeamOptions () {
+    return this.props.teams.map(team => {
+      return (
+        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
+    })
+  }
+
+  render () {
+    console.log(this.props.teams)
+
+    let team = this.getCurrentTeam()
+
+    if (team == null || team.userType === 'person') {
+      return this.renderNoTeam()
+    }
+
+    let membersEl = team.Members.map(member => {
+      let isCurrentUser = this.props.currentUser.id === member.id
+
+      return (
+        <li key={'user-' + member.id}>
+          <div className='colUserName'>
+            <ProfileImage className='userPhoto' email={member.email} size='30'/>
+            <div className='userInfo'>
+              <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+              <div className='userEmail'>{member.email}</div>
+            </div>
+          </div>
+
+          <div className='colRole'>
+            <select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
+              <option value='owner'>Owner</option>
+              <option value='member'>Member</option>
+            </select>
+            </div>
+          <div className='colDelete'>
+            <button className='deleteButton' onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
+          </div>
+        </li>
+      )
+    })
+
+    return (
+      <div className='MemberSettingTab 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='membersTableSection section'>
+          <div className='sectionTitle'>Members</div>
+          <div className='addMember'>
+            <div className='addMemberLabel'>Add member</div>
+            <div className='addMemberControl'>
+              <Select
+                className='memberName'
+                placeholder='Input username to add'
+                autoload={false}
+                asyncOptions={getUsers}
+                onChange={val => this.handleNewMemberChange(val)}
+                value={this.state.newMember}
+              />
+              <button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
+            </div>
+          </div>
+          <ul className='memberList'>
+            <li className='header'>
+              <div className='colUserName'>Username</div>
+              <div className='colRole'>Role</div>
+              <div className='colDelete'>Delete</div>
+            </li>
+            {membersEl}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+
+  renderNoTeam () {
+    return (
+        <div className='TeamSettingTab 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'>Please select a team</div>
+        </div>
+    )
+  }
+}
+
+MemberSettingTab.propTypes = {
+  currentUser: PropTypes.shape(),
+  teams: PropTypes.array,
+  currentTeamId: PropTypes.number,
+  switchTeam: PropTypes.func
+}

lib/components/modal/Preference/TeamSettingTab.js

@@ -0,0 +1,155 @@
+import React, { PropTypes } from 'react'
+import _ from 'lodash'
+import linkState from 'boost/linkState'
+import api from 'boost/api'
+
+export default class TeamSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+    let team = this.getCurrentTeam(props)
+    this.state = {
+      teamName: team != null ? team.profileName : '',
+      deleteConfirm: false,
+      alert: null
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    let team = this.getCurrentTeam(nextProps)
+
+    this.setState({
+      teamName: team != null ? team.profileName : '',
+      deleteConfirm: false
+    })
+  }
+
+  getCurrentTeam (props) {
+    if (props == null) props = this.props
+    return _.findWhere(props.teams, {id: props.currentTeamId})
+  }
+
+  handleTeamSelectChange (e) {
+    this.props.switchTeam(e.target.value)
+  }
+
+  handleSaveButtonClick (e) {
+    let input = {
+      profileName: this.state.teamName
+    }
+    let alert = {
+      type: 'info',
+      message: 'Sending...'
+    }
+    this.setState({alert}, () => {
+      api.updateTeamInfo(this.props.currentTeamId, input)
+        .then(res => {
+          console.log(res.body)
+          let alert = {
+            type: 'success',
+            message: 'Successfully done!'
+          }
+          this.setState({alert})
+        })
+        .catch(err => {
+          var message
+          if (err.status != null) {
+            message = err.response.body.message
+          } else if (err.code === 'ECONNREFUSED') {
+            message = 'Can\'t connect to API server.'
+          } else throw err
+
+          let alert = {
+            type: 'error',
+            message: message
+          }
+
+          this.setState({alert})
+        })
+    })
+  }
+
+  renderTeamOptions () {
+    return this.props.teams.map(team => {
+      return (
+        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
+    })
+  }
+
+  render () {
+    let team = this.getCurrentTeam()
+
+    if (team == null || team.userType === 'person') {
+      return this.renderNoTeam()
+    }
+
+    return (
+      <div className='TeamSettingTab 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'>Team profile</div>
+          <div className='sectionInput'>
+            <label className='label'>Team Name</label>
+            <input valueLink={this.linkState('teamName')} type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+
+            {this.state.alert != null
+              ? (
+                <div className={'alert ' + this.state.alert.type}>{this.state.alert.message}</div>
+              )
+              : null}
+          </div>
+        </div>
+
+        {!this.state.deleteConfirm
+          ? (
+            <div className='section teamDelete'>
+              <label>Delete this team</label>
+              <button onClick={e => this.setState({deleteConfirm: true})} className='deleteBtn'><i className='fa fa-fw fa-trash'/> Delete</button>
+            </div>
+          )
+          : (
+            <div className='section teamDeleteConfirm'>
+              <label>Are you sure to delete this team?</label>
+              <button onClick={e => this.setState({deleteConfirm: false})}>Cancel</button>
+              <button className='deleteBtn'><i className='fa fa-fw fa-check'/> Sure</button>
+            </div>
+          )}
+      </div>
+    )
+  }
+
+  renderNoTeam () {
+    return (
+        <div className='TeamSettingTab 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'>Please select a team</div>
+        </div>
+    )
+  }
+}
+
+TeamSettingTab.propTypes = {
+  currentTeamId: PropTypes.number,
+  teams: PropTypes.array,
+  switchTeam: PropTypes.func
+}
+
+TeamSettingTab.prototype.linkState = linkState

lib/components/modal/Preferences.js

@@ -1,43 +1,31 @@
 import React, { PropTypes } from 'react'
 import { connect, Provider } from 'react-redux'
-import auth from 'boost/auth'
 import linkState from 'boost/linkState'
-import Select from 'react-select'
 import api from 'boost/api'
-import ProfileImage from 'boost/components/ProfileImage'
 import store from 'boost/store'
+import AppSettingTab from './Preference/AppSettingTab'
+import HelpTab from './Preference/HelpTab'
+import TeamSettingTab from './Preference/TeamSettingTab'
+import MemberSettingTab from './Preference/MemberSettingTab'
+import FolderSettingTab from './Preference/FolderSettingTab'
+import { closeModal } from 'boost/modal'
+
 var { findDOMNode } = require('react-dom')
 
 const PROFILE = 'PROFILE'
-const PREFERENCES = 'PREFERENCES'
+const APP = 'APP'
 const HELP = 'HELP'
 const TEAM = 'TEAM'
 const MEMBER = 'MEMBER'
 const FOLDER = 'FOLDER'
 
-function getUsers (input, cb) {
-  api.searchUser(input)
-    .then(function (res) {
-      let users = res.body
-
-      cb(null, {
-        options: users.map(user => {
-          return { value: user.name, label: user.name }
-        }),
-        complete: false
-      })
-    })
-    .catch(function (err) {
-      console.error(err)
-    })
-}
-
 class Preferences extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
       currentTab: PROFILE,
+      currentTeamId: props.status.userId,
       profile: {
         userInfo: {
           profileName: props.currentUser.profileName,
@@ -54,6 +42,10 @@ class Preferences extends React.Component {
     }
   }
 
+  switchTeam (teamId) {
+    this.setState({currentTeamId: teamId})
+  }
+
   handleNavButtonClick (tab) {
     return e => {
       this.setState({currentTab: tab})
@@ -65,7 +57,7 @@ class Preferences extends React.Component {
 
     let tabs = [
       {target: PROFILE, label: 'Profile'},
-      {target: PREFERENCES, label: 'Preferences'},
+      {target: APP, label: 'Preferences'},
       {target: HELP, label: 'Help & Feedback'},
       {target: TEAM, label: 'Team setting'},
       {target: MEMBER, label: 'Manage member'},
@@ -80,7 +72,7 @@ class Preferences extends React.Component {
       <div className='Preferences modal'>
         <div className='header'>
           <div className='title'>Setting</div>
-          <button onClick={e => this.props.close()} className='closeBtn'>Done</button>
+          <button onClick={e => closeModal()} className='closeBtn'>Done</button>
         </div>
 
         <div className='nav'>
@@ -93,17 +85,39 @@ 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 PREFERENCES:
-        return this.renderPreferences()
+      case APP:
+        return (<AppSettingTab/>)
       case HELP:
-        return this.renderHelp()
+        return (<HelpTab/>)
       case TEAM:
-        return this.renderTeamSetting()
+        return (
+          <TeamSettingTab
+            currentTeamId={currentTeamId}
+            teams={teams}
+            switchTeam={teamId => this.switchTeam(teamId)}
+          />
+        )
       case MEMBER:
-        return this.renderMemberSetting()
+        return (
+          <MemberSettingTab
+            currentUser={this.props.currentUser}
+            currentTeamId={currentTeamId}
+            teams={teams}
+            switchTeam={teamId => this.switchTeam(teamId)}
+          />
+        )
       case FOLDER:
-        return this.renderFolderSetting()
+        return (
+          <FolderSettingTab
+            currentTeamId={currentTeamId}
+            teams={teams}
+            switchTeam={teamId => this.switchTeam(teamId)}
+          />
+        )
       case PROFILE:
       default:
         return this.renderProfile()
@@ -250,7 +264,7 @@ class Preferences extends React.Component {
           <div className='sectionConfirm'>
             <button onClick={e => this.handlePasswordSaveButton(e)}>Save</button>
 
-            {this.state.profile.password.alert != null
+            {profileState.password.alert != null
               ? (
                 <div className={'alert ' + profileState.password.alert.type}>{profileState.password.alert.message}</div>
               )
@@ -261,144 +275,6 @@ class Preferences extends React.Component {
     )
   }
 
-  renderPreferences () {
-    return (
-      <div className='content preferences'>
-        <div className='section passwordSection'>
-          <div className='sectionTitle'>Hotkey</div>
-          <div className='sectionInput'>
-            <label>Toggle Finder(popup)</label>
-            <input type='text'/>
-          </div>
-          <div className='sectionConfirm'>
-            <button>Save</button>
-          </div>
-          <div className='description'>
-            <ul>
-              <li><code>0</code> to <code>9</code></li>
-              <li><code>A</code> to <code>Z</code></li>
-              <li><code>F1</code> to <code>F24</code></li>
-              <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-              <li><code>Plus</code></li>
-              <li><code>Space</code></li>
-              <li><code>Backspace</code></li>
-              <li><code>Delete</code></li>
-              <li><code>Insert</code></li>
-              <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-              <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-              <li><code>Home</code> and <code>End</code></li>
-              <li><code>PageUp</code> and <code>PageDown</code></li>
-              <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-              <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-              <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  renderHelp () {
-    return (
-      <div className='content help'>
-        Comming soon
-      </div>
-    )
-  }
-
-  renderTeamSetting () {
-    return (
-      <div className='content teamSetting'>
-        <div className='header'>
-          <select>
-            <option></option>
-          </select>
-          <div>'s Team Setting</div>
-        </div>
-        <div className='section'>
-          <div className='sectionTitle'>Team profile</div>
-          <div className='sectionInput'>
-            <div className='label'>Team Name</div>
-            <input type='text'/>
-          </div>
-          <div className='sectionConfirm'>
-            <button>Save</button>
-          </div>
-        </div>
-
-        {false
-          ? (
-            <div className='section teamDelete'>
-              <div className='label'>Delete this team</div>
-              <button>Delete</button>
-            </div>
-          )
-          : (
-            <div className='section teamDeleteConfirm'>
-              <div>Are you sure to delete this team?</div>
-              <button>Sure</button>
-              <button>Cancel</button>
-            </div>
-          )}
-      </div>
-    )
-  }
-
-  renderMemberSetting () {
-    let membersEl = [].map(member => {
-      let isCurrentUser = this.state.currentUser.id === member.id
-
-      return (
-        <li key={'user-' + member.id}>
-          <ProfileImage className='userPhoto' email={member.email} size='30'/>
-          <div className='userInfo'>
-            <div className='userName'>{`${member.profileName} (${member.name})`}</div>
-            <div className='userEmail'>{member.email}</div>
-          </div>
-
-          <div className='userControl'>
-            <select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
-              <option value='owner'>Owner</option>
-              <option value='member'>Member</option>
-            </select>
-            <button onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
-          </div>
-        </li>
-      )
-    })
-
-    return (
-      <div className='content memberSetting'>
-        <div className='header'>
-          <select>
-            <option></option>
-          </select>
-          <div>'s Team Setting</div>
-        </div>
-
-        <div>
-          <Select
-            className='memberName'
-            autoload={false}
-            asyncOptions={getUsers}
-            onChange={val => this.handleNewMemberChange(val)}
-            value={null}
-          />
-          <button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
-        </div>
-        <ul className='memberList'>
-          {membersEl}
-        </ul>
-      </div>
-    )
-  }
-
-  renderFolderSetting () {
-    return (
-      <div className='content folderSetting'></div>
-    )
-  }
-
 }
 
 Preferences.propTypes = {
@@ -410,9 +286,11 @@ Preferences.prototype.linkState = linkState
 
 function remap (state) {
   let currentUser = state.currentUser
+  let status = state.status
 
   return {
-    currentUser
+    currentUser,
+    status
   }
 }