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

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