diff options
Diffstat (limited to 'webapp/components/select_team/select_team.jsx')
-rw-r--r-- | webapp/components/select_team/select_team.jsx | 68 |
1 files changed, 30 insertions, 38 deletions
diff --git a/webapp/components/select_team/select_team.jsx b/webapp/components/select_team/select_team.jsx index 084ff64b2..e6156ecb9 100644 --- a/webapp/components/select_team/select_team.jsx +++ b/webapp/components/select_team/select_team.jsx @@ -9,6 +9,7 @@ import ErrorBar from 'components/error_bar.jsx'; import LoadingScreen from 'components/loading_screen.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; +import SelectTeamItem from './components/select_team_item.jsx'; import {Link} from 'react-router/es6'; @@ -22,8 +23,10 @@ export default class SelectTeam extends React.Component { constructor(props) { super(props); this.onTeamChange = this.onTeamChange.bind(this); + this.handleTeamClick = this.handleTeamClick.bind(this); const state = this.getStateFromStores(false); + state.loadingTeamId = ''; this.state = state; } @@ -49,6 +52,10 @@ export default class SelectTeam extends React.Component { }; } + handleTeamClick(team) { + this.setState({loadingTeamId: team.id}); + } + render() { let content = null; let teamContents = []; @@ -56,51 +63,36 @@ export default class SelectTeam extends React.Component { const isSystemAdmin = Utils.isSystemAdmin(UserStore.getCurrentUser().roles); let teamMembersCount = 0; - for (var index in this.state.teamMembers) { - if (this.state.teamMembers.hasOwnProperty(index)) { - var teamMember = this.state.teamMembers[index]; - var team = this.state.teams[teamMember.team_id]; - isAlreadyMember[teamMember.team_id] = true; - teamMembersCount++; - teamContents.push( - <div - key={'team_' + team.name} - className='signup-team-dir' - > - <Link - to={'/' + team.name + '/channels/town-square'} - > - <span className='signup-team-dir__name'>{team.display_name}</span> - <span - className='fa fa-angle-right right signup-team__icon' - aria-hidden='true' - /> - </Link> - </div> - ); - } + for (const teamMember of this.state.teamMembers) { + const teamId = teamMember.team_id; + const team = this.state.teams[teamId]; + isAlreadyMember[teamId] = true; + teamMembersCount++; + + teamContents.push( + <SelectTeamItem + key={'team_' + team.name} + team={team} + url={'/' + team.name + '/channels/town-square'} + onTeamClick={this.handleTeamClick} + loading={this.state.loadingTeamId === teamId} + /> + ); } var openTeamContents = []; - for (var id in this.state.teamListings) { + for (const id in this.state.teamListings) { if (this.state.teamListings.hasOwnProperty(id) && !isAlreadyMember[id]) { - var openTeam = this.state.teamListings[id]; + const openTeam = this.state.teamListings[id]; openTeamContents.push( - <div + <SelectTeamItem key={'team_' + openTeam.name} - className='signup-team-dir' - > - <Link - to={`/signup_user_complete/?id=${openTeam.invite_id}`} - > - <span className='signup-team-dir__name'>{openTeam.display_name}</span> - <span - className='fa fa-angle-right right signup-team__icon' - aria-hidden='true' - /> - </Link> - </div> + team={openTeam} + url={`/signup_user_complete/?id=${openTeam.invite_id}`} + onTeamClick={this.handleTeamClick} + loading={this.state.loadingTeamId === openTeam.id} + /> ); } } |