PLT-5049 (Webapp) New Channel Members UI. (#5036)

This replaces the existing Channel Members UI with one based on the Team
Members UI, so that either a button, a role or a role with a menu can be
displayed.

Basic logic for which actions and roles are displayed is implemented,
although this doesn't change behaviour or functionality at all, as that
will come in later PRs. It does, however, add code to fetch the
ChannelMember objects as that is necessary to provide the full set of
actions and roles as intended.

1 files changed, 7 insertions, 146 deletions

diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index 351efed96..96d90e5cc 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/webapp/components/channel_members_modal.jsx
@@ -1,170 +1,29 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import SearchableUserList from './searchable_user_list.jsx';
-import LoadingScreen from './loading_screen.jsx';
-
-import UserStore from 'stores/user_store.jsx';
-import ChannelStore from 'stores/channel_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
-
-import {searchUsers} from 'actions/user_actions.jsx';
-import {removeUserFromChannel} from 'actions/channel_actions.jsx';
-
-import * as AsyncClient from 'utils/async_client.jsx';
-import * as UserAgent from 'utils/user_agent.jsx';
-import Constants from 'utils/constants.jsx';
+import MemberListChannel from './member_list_channel.jsx';
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
-const USERS_PER_PAGE = 50;
-
 export default class ChannelMembersModal extends React.Component {
     constructor(props) {
         super(props);
 
-        this.onChange = this.onChange.bind(this);
-        this.onStatusChange = this.onStatusChange.bind(this);
         this.onHide = this.onHide.bind(this);
-        this.handleRemove = this.handleRemove.bind(this);
-        this.createRemoveMemberButton = this.createRemoveMemberButton.bind(this);
-        this.search = this.search.bind(this);
-        this.nextPage = this.nextPage.bind(this);
-
-        this.term = '';
-        this.searchTimeoutId = 0;
-
-        const stats = ChannelStore.getStats(props.channel.id);
 
         this.state = {
-            users: [],
-            total: stats.member_count,
-            show: true,
-            search: false,
-            statusChange: false
+            channel: this.props.channel,
+            show: true
         };
     }
 
-    componentDidMount() {
-        ChannelStore.addStatsChangeListener(this.onChange);
-        UserStore.addInChannelChangeListener(this.onChange);
-        UserStore.addStatusesChangeListener(this.onStatusChange);
-
-        AsyncClient.getProfilesInChannel(this.props.channel.id, 0);
-    }
-
-    componentWillUnmount() {
-        ChannelStore.removeStatsChangeListener(this.onChange);
-        UserStore.removeInChannelChangeListener(this.onChange);
-        UserStore.removeStatusesChangeListener(this.onStatusChange);
-    }
-
-    onChange(force) {
-        if (this.state.search && !force) {
-            this.search(this.term);
-            return;
-        }
-
-        const stats = ChannelStore.getStats(this.props.channel.id);
-        this.setState({
-            users: UserStore.getProfileListInChannel(this.props.channel.id),
-            total: stats.member_count
-        });
-    }
-
-    onStatusChange() {
-        // Initiate a render to pick up on new statuses
-        this.setState({
-            statusChange: !this.state.statusChange
-        });
-    }
-
     onHide() {
         this.setState({show: false});
     }
 
-    handleRemove(user) {
-        const userId = user.id;
-
-        removeUserFromChannel(
-            this.props.channel.id,
-            userId,
-            null,
-            (err) => {
-                this.setState({inviteError: err.message});
-            }
-         );
-    }
-
-    createRemoveMemberButton({user}) {
-        if (user.id === UserStore.getCurrentId()) {
-            return null;
-        }
-
-        return (
-            <button
-                type='button'
-                className='btn btn-primary btn-message'
-                onClick={this.handleRemove.bind(this, user)}
-            >
-                <FormattedMessage
-                    id='channel_members_modal.remove'
-                    defaultMessage='Remove'
-                />
-            </button>
-        );
-    }
-
-    nextPage(page) {
-        AsyncClient.getProfilesInChannel(this.props.channel.id, (page + 1) * USERS_PER_PAGE, USERS_PER_PAGE);
-    }
-
-    search(term) {
-        this.term = term;
-
-        if (term === '') {
-            this.onChange(true);
-            this.setState({search: false});
-            return;
-        }
-
-        clearTimeout(this.searchTimeoutId);
-
-        this.searchTimeoutId = setTimeout(
-            () => {
-                searchUsers(
-                    term,
-                    TeamStore.getCurrentId(),
-                    {in_channel_id: this.props.channel.id},
-                    (users) => {
-                        this.setState({search: true, users});
-                    }
-                );
-            },
-            Constants.SEARCH_TIMEOUT_MILLISECONDS
-        );
-    }
-
     render() {
-        let content;
-        if (this.state.loading) {
-            content = (<LoadingScreen/>);
-        } else {
-            content = (
-                <SearchableUserList
-                    users={this.state.users}
-                    usersPerPage={USERS_PER_PAGE}
-                    total={this.state.total}
-                    nextPage={this.nextPage}
-                    search={this.search}
-                    actions={[this.createRemoveMemberButton]}
-                    focusOnMount={!UserAgent.isMobile()}
-                />
-            );
-        }
-
         return (
             <div>
                 <Modal
@@ -177,7 +36,7 @@ export default class ChannelMembersModal extends React.Component {
                         <Modal.Title>
                             <span className='name'>{this.props.channel.display_name}</span>
                             <FormattedMessage
-                                id='channel_memebers_modal.members'
+                                id='channel_members_modal.members'
                                 defaultMessage=' Members'
                             />
                         </Modal.Title>
@@ -198,7 +57,9 @@ export default class ChannelMembersModal extends React.Component {
                     <Modal.Body
                         ref='modalBody'
                     >
-                        {content}
+                        <MemberListChannel
+                            channel={this.props.channel}
+                        />
                     </Modal.Body>
                 </Modal>
             </div>