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

bump react-select

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