1 files changed, 88 insertions, 30 deletions

diff --git a/webapp/components/member_list_team.jsx b/webapp/components/member_list_team.jsx
index 9f18fba33..a3e43af28 100644
--- a/webapp/components/member_list_team.jsx
+++ b/webapp/components/member_list_team.jsx
@@ -1,62 +1,94 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import FilteredUserList from './filtered_user_list.jsx';
-import TeamMembersDropdown from './team_members_dropdown.jsx';
+import SearchableUserList from 'components/searchable_user_list.jsx';
+import TeamMembersDropdown from 'components/team_members_dropdown.jsx';
+
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
+
+import {searchUsers, loadProfilesAndTeamMembers, loadTeamMembersForProfilesList} from 'actions/user_actions.jsx';
+import {getTeamStats} from 'utils/async_client.jsx';
+
+import Constants from 'utils/constants.jsx';
 
 import React from 'react';
 
+const USERS_PER_PAGE = 50;
+
 export default class MemberListTeam extends React.Component {
     constructor(props) {
         super(props);
 
-        this.getUsers = this.getUsers.bind(this);
         this.onChange = this.onChange.bind(this);
-        this.onTeamChange = this.onTeamChange.bind(this);
+        this.onStatsChange = this.onStatsChange.bind(this);
+        this.search = this.search.bind(this);
+        this.loadComplete = this.loadComplete.bind(this);
+
+        const stats = TeamStore.getCurrentStats();
 
         this.state = {
-            users: this.getUsers(),
-            teamMembers: TeamStore.getMembersForTeam()
+            users: UserStore.getProfileListInTeam(),
+            teamMembers: Object.assign([], TeamStore.getMembersInTeam()),
+            total: stats.member_count,
+            search: false,
+            loading: true
         };
     }
 
     componentDidMount() {
-        UserStore.addChangeListener(this.onChange);
-        TeamStore.addChangeListener(this.onTeamChange);
-        AsyncClient.getTeamMembers(TeamStore.getCurrentId());
+        UserStore.addInTeamChangeListener(this.onChange);
+        UserStore.addStatusesChangeListener(this.onChange);
+        TeamStore.addChangeListener(this.onChange);
+        TeamStore.addStatsChangeListener(this.onStatsChange);
+
+        loadProfilesAndTeamMembers(0, Constants.PROFILE_CHUNK_SIZE, TeamStore.getCurrentId(), this.loadComplete);
+        getTeamStats(TeamStore.getCurrentId());
     }
 
     componentWillUnmount() {
-        UserStore.removeChangeListener(this.onChange);
-        TeamStore.removeChangeListener(this.onTeamChange);
+        UserStore.removeInTeamChangeListener(this.onChange);
+        UserStore.removeStatusesChangeListener(this.onChange);
+        TeamStore.removeChangeListener(this.onChange);
+        TeamStore.removeStatsChangeListener(this.onStatsChange);
     }
 
-    getUsers() {
-        const profiles = UserStore.getProfiles();
-        const users = [];
+    loadComplete() {
+        this.setState({loading: false});
+    }
 
-        for (const id of Object.keys(profiles)) {
-            users.push(profiles[id]);
+    onChange() {
+        if (!this.state.search) {
+            this.setState({users: UserStore.getProfileListInTeam()});
         }
 
-        users.sort((a, b) => a.username.localeCompare(b.username));
+        this.setState({teamMembers: Object.assign([], TeamStore.getMembersInTeam())});
+    }
 
-        return users;
+    onStatsChange() {
+        const stats = TeamStore.getCurrentStats();
+        this.setState({total: stats.member_count});
     }
 
-    onChange() {
-        this.setState({
-            users: this.getUsers()
-        });
+    nextPage(page) {
+        loadProfilesAndTeamMembers((page + 1) * USERS_PER_PAGE, USERS_PER_PAGE);
     }
 
-    onTeamChange() {
-        this.setState({
-            teamMembers: TeamStore.getMembersForTeam()
-        });
+    search(term) {
+        if (term === '') {
+            this.setState({search: false, users: UserStore.getProfileListInTeam()});
+            return;
+        }
+
+        searchUsers(
+            term,
+            TeamStore.getCurrentId(),
+            {},
+            (users) => {
+                this.setState({loading: true, search: true, users});
+                loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete);
+            }
+        );
     }
 
     render() {
@@ -65,12 +97,38 @@ export default class MemberListTeam extends React.Component {
             teamMembersDropdown = [TeamMembersDropdown];
         }
 
+        const teamMembers = this.state.teamMembers;
+        const users = this.state.users;
+        const actionUserProps = {};
+
+        let usersToDisplay;
+        if (this.state.loading) {
+            usersToDisplay = null;
+        } else {
+            usersToDisplay = [];
+
+            for (let i = 0; i < users.length; i++) {
+                const user = users[i];
+
+                if (teamMembers[user.id]) {
+                    usersToDisplay.push(user);
+                    actionUserProps[user.id] = {
+                        teamMember: teamMembers[user.id]
+                    };
+                }
+            }
+        }
+
         return (
-            <FilteredUserList
+            <SearchableUserList
                 style={this.props.style}
-                users={this.state.users}
-                teamMembers={this.state.teamMembers}
+                users={usersToDisplay}
+                usersPerPage={USERS_PER_PAGE}
+                total={this.state.total}
+                nextPage={this.nextPage}
+                search={this.search}
                 actions={teamMembersDropdown}
+                actionUserProps={actionUserProps}
             />
         );
     }