Manage members fix (#267)

app/components/custom_list/member_list_row.js

@@ -55,6 +55,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             alignItems: 'center',
             justifyContent: 'center'
         },
+        selectorDisabled: {
+            backgroundColor: '#888'
+        },
         selectorFilled: {
             backgroundColor: '#378FD2',
             borderWidth: 0
@@ -71,15 +74,15 @@ function createTouchableComponent(children, action) {
 }
 
 function MemberListRow(props) {
-    const {id, displayName, username, onPress, theme, user} = props;
+    const {id, displayName, username, onPress, theme, user, disableSelect} = props;
     const style = getStyleFromTheme(theme);
 
     const RowComponent = (
         <View style={style.container}>
             {props.selectable &&
-                <TouchableWithoutFeedback onPress={props.onRowSelect}>
+                <TouchableWithoutFeedback onPress={disableSelect ? () => false : props.onRowSelect}>
                     <View style={style.selectorContainer}>
-                        <View style={[style.selector, (props.selected && style.selectorFilled)]}>
+                        <View style={[style.selector, (props.selected && style.selectorFilled), (disableSelect && style.selectorDisabled)]}>
                             {props.selected &&
                                 <Icon
                                     name='check'
@@ -130,7 +133,8 @@ MemberListRow.propTypes = {
     onPress: PropTypes.func,
     selectable: PropTypes.bool,
     onRowSelect: PropTypes.func,
-    selected: PropTypes.bool
+    selected: PropTypes.bool,
+    disableSelect: PropTypes.bool
 };
 
 export default MemberListRow;

app/scenes/channel_members/channel_members.js

@@ -11,12 +11,14 @@ import {
 import {injectIntl, intlShape} from 'react-intl';
 
 import MemberList from 'app/components/custom_list';
-import {createMembersSections, loadingText, renderMemberRow} from 'app/utils/member_list';
+import {createMembersSections, loadingText} from 'app/utils/member_list';
+import MemberListRow from 'app/components/custom_list/member_list_row';
+import {displayUsername} from 'service/utils/user_utils';
+import {Constants} from 'service/constants';
+import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import ChannelMembersTitle from './channel_members_title';
 import RemoveMemberButton from './remove_member_button';
-import {Constants} from 'service/constants';
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return StyleSheet.create({
@@ -34,6 +36,7 @@ class ChannelMembers extends PureComponent {
         currentChannel: PropTypes.object,
         currentChannelMembers: PropTypes.array.isRequired,
         currentChannelMemberCount: PropTypes.number.isRequired,
+        currentUserId: PropTypes.string.isRequired,
         currentTeam: PropTypes.object,
         preferences: PropTypes.object,
         requestStatus: PropTypes.string,
@@ -141,6 +144,32 @@ class ChannelMembers extends PureComponent {
         });
     };
 
+    renderMemberRow = (user, sectionId, rowId, preferences, theme, selectable, onPress, onSelect) => {
+        const {id, username} = user;
+        const displayName = displayUsername(user, preferences);
+        let onRowSelect = null;
+        if (selectable) {
+            onRowSelect = () => onSelect(sectionId, rowId);
+        }
+
+        const disableSelect = user.id === this.props.currentUserId;
+
+        return (
+            <MemberListRow
+                id={id}
+                user={user}
+                displayName={displayName}
+                username={username}
+                theme={theme}
+                onPress={onPress}
+                selectable={selectable}
+                selected={user.selected}
+                onRowSelect={onRowSelect}
+                disableSelect={disableSelect}
+            />
+        );
+    }
+
     render() {
         const {currentChannel, isAdmin, theme} = this.props;
         const canManage = (isAdmin && currentChannel.type !== Constants.DM_CHANNEL && currentChannel.name !== Constants.DEFAULT_CHANNEL);
@@ -157,7 +186,7 @@ class ChannelMembers extends PureComponent {
                     loadingText={loadingText}
                     selectable={canManage}
                     onRowSelect={this.handleRowSelect}
-                    renderRow={renderMemberRow}
+                    renderRow={this.renderMemberRow}
                     createSections={createMembersSections}
                 />
             </View>

app/scenes/channel_members/channel_members_container.js

@@ -26,6 +26,7 @@ function mapStateToProps(state) {
         currentChannel: getCurrentChannel(state),
         currentChannelMembers: getProfilesInCurrentChannel(state),
         currentChannelMemberCount,
+        currentUserId: state.entities.users.currentId,
         currentTeam: getCurrentTeam(state),
         preferences: getMyPreferences(state),
         requestStatus: state.requests.users.getProfilesInChannel.status,