add text:ellipsis to some labels & add member deletion confirm

lib/components/modal/Preference/MemberRow.js

@@ -0,0 +1,106 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import api from 'boost/api'
+
+const IDLE = 'IDLE'
+const DELETE = 'DELETE'
+
+export default class MemberRow extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE
+    }
+  }
+  handleMemberRoleChange (e) {
+    let input = {
+      name: this.props.member.name,
+      role: e.target.value
+    }
+
+    api.setMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({mode: DELETE})
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({mode: IDLE})
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let input = {
+      name: this.props.member.name
+    }
+
+    api.deleteMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  render () {
+    let member = this.props.member
+    let currentUser = this.props.currentUser
+    let isDisabled = (currentUser.id === member.id)
+
+    switch (this.state.mode) {
+      case DELETE:
+        return (
+          <li className='MemberRow edit'>
+            <div className='colDescription'>
+              Are you sure to remove <strong>{member.profileName}</strong> ?
+            </div>
+            <div className='colDeleteConfirm'>
+              <button className='deleteButton primary' onClick={e => this.handleDeleteConfirmButtonClick(e)}>Sure</button>
+              <button className='deleteButton' onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </li>
+        )
+      case IDLE:
+      default:
+        return (
+          <li className='MemberRow'>
+            <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(e)} disabled={isDisabled} 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.handleDeleteButtonClick(e)} disabled={isDisabled}><i className='fa fa-times fa-fw'/></button>
+            </div>
+          </li>
+        )
+    }
+  }
+}
+
+MemberRow.propTypes = {
+  member: PropTypes.shape(),
+  currentUser: PropTypes.shape(),
+  team: PropTypes.shape({
+    id: PropTypes.number
+  })
+}

lib/components/modal/Preference/MemberSettingTab.js

@@ -3,6 +3,7 @@ import ProfileImage from 'boost/components/ProfileImage'
 import Select from 'react-select'
 import api from 'boost/api'
 import _ from 'lodash'
+import MemberRow from './MemberRow'
 
 function getUsers (input, cb) {
   api.searchUser(input)
@@ -60,42 +61,6 @@ export default class MemberSettingTab extends React.Component {
         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 => {
@@ -113,31 +78,9 @@ export default class MemberSettingTab extends React.Component {
       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>
-      )
-    })
+    let membersEl = team.Members.map(member => (
+      <MemberRow key={'user-' + member.id} member={member} team={team} currentUser={this.props.currentUser}/>
+    ))
 
     return (
       <div className='MemberSettingTab content'>