From 7307156c49b194c4afd946cd9e57715d45b5b21d Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Wed, 26 Apr 2017 15:49:15 -0400 Subject: PLT-6213 Move team store and actions over to use redux (#6222) * Move team store and actions over to user redux * Fix JS error when inviting by email --- webapp/components/member_list_team/index.js | 24 +++ .../member_list_team/member_list_team.jsx | 166 +++++++++++++++++++++ 2 files changed, 190 insertions(+) create mode 100644 webapp/components/member_list_team/index.js create mode 100644 webapp/components/member_list_team/member_list_team.jsx (limited to 'webapp/components/member_list_team') diff --git a/webapp/components/member_list_team/index.js b/webapp/components/member_list_team/index.js new file mode 100644 index 000000000..dc5b0b9f2 --- /dev/null +++ b/webapp/components/member_list_team/index.js @@ -0,0 +1,24 @@ +// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {getTeamStats} from 'mattermost-redux/actions/teams'; + +import MemberListTeam from './member_list_team.jsx'; + +function mapStateToProps(state, ownProps) { + return { + ...ownProps + }; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({ + getTeamStats + }, dispatch) + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(MemberListTeam); diff --git a/webapp/components/member_list_team/member_list_team.jsx b/webapp/components/member_list_team/member_list_team.jsx new file mode 100644 index 000000000..40d65c7f1 --- /dev/null +++ b/webapp/components/member_list_team/member_list_team.jsx @@ -0,0 +1,166 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import SearchableUserList from 'components/searchable_user_list/searchable_user_list_container.jsx'; +import TeamMembersDropdown from 'components/team_members_dropdown'; + +import UserStore from 'stores/user_store.jsx'; +import TeamStore from 'stores/team_store.jsx'; + +import {searchUsers, loadProfilesAndTeamMembers, loadTeamMembersForProfilesList} from 'actions/user_actions.jsx'; + +import Constants from 'utils/constants.jsx'; + +import * as UserAgent from 'utils/user_agent.jsx'; + +import React from 'react'; + +import store from 'stores/redux_store.jsx'; +import {searchProfilesInCurrentTeam} from 'mattermost-redux/selectors/entities/users'; + +const USERS_PER_PAGE = 50; + +export default class MemberListTeam extends React.Component { + static propTypes = { + isAdmin: React.PropTypes.bool, + actions: React.PropTypes.shape({ + getTeamStats: React.PropTypes.func.isRequired + }).isRequired + } + + constructor(props) { + super(props); + + this.onChange = this.onChange.bind(this); + this.onStatsChange = this.onStatsChange.bind(this); + this.search = this.search.bind(this); + this.loadComplete = this.loadComplete.bind(this); + + this.searchTimeoutId = 0; + this.term = ''; + + const stats = TeamStore.getCurrentStats(); + + this.state = { + users: UserStore.getProfileListInTeam(), + teamMembers: Object.assign([], TeamStore.getMembersInTeam()), + total: stats.total_member_count, + loading: true + }; + } + + componentDidMount() { + 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); + this.props.actions.getTeamStats(TeamStore.getCurrentId()); + } + + componentWillUnmount() { + UserStore.removeInTeamChangeListener(this.onChange); + UserStore.removeStatusesChangeListener(this.onChange); + TeamStore.removeChangeListener(this.onChange); + TeamStore.removeStatsChangeListener(this.onStatsChange); + } + + loadComplete() { + this.setState({loading: false}); + } + + onChange() { + let users; + if (this.term) { + users = searchProfilesInCurrentTeam(store.getState(), this.term); + } else { + users = UserStore.getProfileListInTeam(); + } + + this.setState({users, teamMembers: Object.assign([], TeamStore.getMembersInTeam())}); + } + + onStatsChange() { + const stats = TeamStore.getCurrentStats(); + this.setState({total: stats.total_member_count}); + } + + nextPage(page) { + loadProfilesAndTeamMembers(page, USERS_PER_PAGE); + } + + search(term) { + clearTimeout(this.searchTimeoutId); + this.term = term; + + if (term === '') { + this.setState({loading: false}); + this.searchTimeoutId = ''; + this.onChange(); + return; + } + + const searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + TeamStore.getCurrentId(), + {}, + (users) => { + if (searchTimeoutId !== this.searchTimeoutId) { + return; + } + this.setState({loading: true}); + loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete); + } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS + ); + + this.searchTimeoutId = searchTimeoutId; + } + + render() { + let teamMembersDropdown = null; + if (this.props.isAdmin) { + 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 ( + + ); + } +} -- cgit v1.2.3-1-g7c22