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>