Add loader for channel_invite_modal and add_users_to_team modal

 * Fix loader for search in all multiselect modals

components/add_users_to_team/add_users_to_team.jsx

@@ -49,7 +49,8 @@ export default class AddUsersToTeam extends React.Component {
  show: true,
  search: false,
  saving: false,
- addError: null
+ addError: null,
+ loadingUsers: true
  };
  }
 
@@ -58,7 +59,9 @@ export default class AddUsersToTeam extends React.Component {
  UserStore.addNotInTeamChangeListener(this.onChange);
  UserStore.addStatusesChangeListener(this.onChange);
 
- this.props.actions.getProfilesNotInTeam(TeamStore.getCurrentId(), 0, USERS_PER_PAGE * 2);
+ this.props.actions.getProfilesNotInTeam(TeamStore.getCurrentId(), 0, USERS_PER_PAGE * 2).then(() => {
+ this.setUsersLoadingState(false);
+ });
  }
 
  componentWillUnmount() {
@@ -124,6 +127,12 @@ export default class AddUsersToTeam extends React.Component {
  this.setState({values});
  }
 
+ setUsersLoadingState = (loadingState) => {
+ this.setState({
+ loadingUsers: loadingState
+ });
+ }
+
  onChange() {
  let users;
  if (this.term) {
@@ -146,7 +155,10 @@ export default class AddUsersToTeam extends React.Component {
 
  handlePageChange(page, prevPage) {
  if (page > prevPage) {
- this.props.actions.getProfilesNotInTeam(TeamStore.getCurrentId(), page + 1, USERS_PER_PAGE);
+ this.setUsersLoadingState(true);
+ this.props.actions.getProfilesNotInTeam(TeamStore.getCurrentId(), page + 1, USERS_PER_PAGE).then(() => {
+ this.setUsersLoadingState(false);
+ });
  }
  }
 
@@ -161,7 +173,10 @@ export default class AddUsersToTeam extends React.Component {
 
  this.searchTimeoutId = setTimeout(
  () => {
- searchUsersNotInTeam(term, TeamStore.getCurrentId(), {});
+ this.setUsersLoadingState(true);
+ searchUsersNotInTeam(term, TeamStore.getCurrentId(), {}).then(() => {
+ this.setUsersLoadingState(false);
+ });
  },
  Constants.SEARCH_TIMEOUT_MILLISECONDS
  );
@@ -273,6 +288,7 @@ export default class AddUsersToTeam extends React.Component {
  numRemainingText={numRemainingText}
  buttonSubmitText={buttonSubmitText}
  saving={this.state.saving}
+ loading={this.state.loadingUsers}
  />
  </Modal.Body>
  </Modal>

components/channel_invite_modal/channel_invite_modal.jsx

@@ -48,7 +48,8 @@ export default class ChannelInviteModal extends React.Component {
  values: [],
  show: true,
  statusChange: false,
- saving: false
+ saving: false,
+ loadingUsers: true
  };
  }
 
@@ -67,7 +68,9 @@ export default class ChannelInviteModal extends React.Component {
  UserStore.addNotInChannelChangeListener(this.onChange);
  UserStore.addStatusesChangeListener(this.onStatusChange);
 
- this.props.actions.getProfilesNotInChannel(TeamStore.getCurrentId(), this.props.channel.id, 0);
+ this.props.actions.getProfilesNotInChannel(TeamStore.getCurrentId(), this.props.channel.id, 0).then(() => {
+ this.setUsersLoadingState(false);
+ });
  this.props.actions.getTeamStats(TeamStore.getCurrentId());
  }
 
@@ -124,9 +127,18 @@ export default class ChannelInviteModal extends React.Component {
  this.setState({values});
  }
 
+ setUsersLoadingState = (loadingState) => {
+ this.setState({
+ loadingUsers: loadingState
+ });
+ }
+
  handlePageChange = (page, prevPage) => {
  if (page > prevPage) {
- this.props.actions.getProfilesNotInChannel(TeamStore.getCurrentId(), this.props.channel.id, page + 1, USERS_PER_PAGE);
+ this.setUsersLoadingState(true);
+ this.props.actions.getProfilesNotInChannel(TeamStore.getCurrentId(), this.props.channel.id, page + 1, USERS_PER_PAGE).then(() => {
+ this.setUsersLoadingState(false);
+ });
  }
  }
 
@@ -169,7 +181,10 @@ export default class ChannelInviteModal extends React.Component {
 
  this.searchTimeoutId = setTimeout(
  () => {
- searchUsers(term, TeamStore.getCurrentId(), {not_in_channel_id: this.props.channel.id});
+ this.setUsersLoadingState(true);
+ searchUsers(term, TeamStore.getCurrentId(), {not_in_channel_id: this.props.channel.id}).then(() => {
+ this.setUsersLoadingState(false);
+ });
  },
  Constants.SEARCH_TIMEOUT_MILLISECONDS
  );

components/more_direct_channels/more_direct_channels.jsx

@@ -65,24 +65,16 @@ export default class MoreDirectChannels extends React.Component {
  values,
  show: true,
  search: false,
- savingChannel: false,
- loadingChannels: true
+ saving: false,
+ loadingUsers: true
  };
  }
 
  componentDidMount() {
  UserStore.addChangeListener(this.onChange);
  UserStore.addInTeamChangeListener(this.onChange);
  UserStore.addStatusesChangeListener(this.onChange);
- if (this.listType === 'any') {
- this.props.actions.getProfiles(0, USERS_PER_PAGE * 2, false).then(() => {
- this.toggleChannelLoadingState();
- });
- } else {
- this.props.actions.getProfilesInTeam(TeamStore.getCurrentId(), 0, USERS_PER_PAGE * 2).then(() => {
- this.toggleChannelLoadingState();
- });
- }
+ this.getUserProfiles();
  }
 
  componentWillUnmount() {
@@ -95,9 +87,9 @@ export default class MoreDirectChannels extends React.Component {
  this.setState({show: false});
  }
 
- toggleChannelLoadingState = (forceFlag) => {
+ setUsersLoadingState = (loadingState) => {
  this.setState({
- loadingChannels: typeof forceFlag === 'undefined' ? !this.state.loadingChannels : forceFlag
+ loadingUsers: loadingState
  });
  }
 
@@ -112,7 +104,7 @@ export default class MoreDirectChannels extends React.Component {
  }
 
  handleSubmit(values = this.state.values) {
- if (this.state.savingChannel) {
+ if (this.state.saving) {
  return;
  }
 
@@ -121,19 +113,19 @@ export default class MoreDirectChannels extends React.Component {
  return;
  }
 
- this.setState({savingChannel: true});
+ this.setState({saving: true});
 
  const success = (channel) => {
  // Due to how react-overlays Modal handles focus, we delay pushing
  // the new channel information until the modal is fully exited.
  // The channel information will be pushed in `handleExit`
  this.exitToChannel = TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name;
- this.setState({savingChannel: false});
+ this.setState({saving: false});
  this.handleHide();
  };
 
  const error = () => {
- this.setState({savingChannel: false});
+ this.setState({saving: false});
  };
 
  if (userIds.length === 1) {
@@ -180,17 +172,23 @@ export default class MoreDirectChannels extends React.Component {
  });
  }
 
+ getUserProfiles(page) {
+ const pageNum = page ? page + 1 : 0;
+ if (this.listType === 'any') {
+ this.props.actions.getProfiles(pageNum, USERS_PER_PAGE * 2).then(() => {
+ this.setUsersLoadingState(false);
+ });
+ } else {
+ this.props.actions.getProfilesInTeam(TeamStore.getCurrentId(), pageNum, USERS_PER_PAGE * 2).then(() => {
+ this.setUsersLoadingState(false);
+ });
+ }
+ }
+
  handlePageChange(page, prevPage) {
  if (page > prevPage) {
- if (this.listType === 'any') {
- this.props.actions.getProfiles(page + 1, USERS_PER_PAGE).then(() => {
- this.toggleChannelLoadingState(false);
- });
- } else {
- this.props.actions.getProfilesInTeam(page + 1, USERS_PER_PAGE).then(() => {
- this.toggleChannelLoadingState(false);
- });
- }
+ this.setUsersLoadingState(true);
+ this.getUserProfiles(page);
  }
  }
 
@@ -219,7 +217,10 @@ export default class MoreDirectChannels extends React.Component {
 
  this.searchTimeoutId = setTimeout(
  () => {
- searchUsers(term, teamId, {}, this.resetPaging);
+ this.setUsersLoadingState(true);
+ searchUsers(term, teamId, {}, this.resetPaging).then(() => {
+ this.setUsersLoadingState(false);
+ });
  },
  Constants.SEARCH_TIMEOUT_MILLISECONDS
  );
@@ -382,8 +383,8 @@ export default class MoreDirectChannels extends React.Component {
  numRemainingText={numRemainingText}
  buttonSubmitText={buttonSubmitText}
  submitImmediatelyOn={this.handleSubmitImmediatelyOn}
- saving={this.state.savingChannel}
- loadingChannels={this.state.loadingChannels}
+ saving={this.state.saving}
+ loading={this.state.loadingUsers}
  />
  </Modal.Body>
  </Modal>

components/multiselect/multiselect.jsx

@@ -191,33 +191,34 @@ export default class MultiSelect extends React.Component {
  const pageStart = this.state.page * this.props.perPage;
  const pageEnd = pageStart + this.props.perPage;
  optionsToDisplay = options.slice(pageStart, pageEnd);
-
- if (options.length > pageEnd) {
- nextButton = (
- <button
- className='btn btn-default filter-control filter-control__next'
- onClick={this.nextPage}
- >
- <FormattedMessage
- id='filtered_user_list.next'
- defaultMessage='Next'
- />
- </button>
- );
- }
-
- if (this.state.page > 0) {
- previousButton = (
- <button
- className='btn btn-default filter-control filter-control__prev'
- onClick={this.prevPage}
- >
- <FormattedMessage
- id='filtered_user_list.prev'
- defaultMessage='Previous'
- />
- </button>
- );
+ if (!this.props.loading) {
+ if (options.length > pageEnd) {
+ nextButton = (
+ <button
+ className='btn btn-default filter-control filter-control__next'
+ onClick={this.nextPage}
+ >
+ <FormattedMessage
+ id='filtered_user_list.next'
+ defaultMessage='Next'
+ />
+ </button>
+ );
+ }
+
+ if (this.state.page > 0) {
+ previousButton = (
+ <button
+ className='btn btn-default filter-control filter-control__prev'
+ onClick={this.prevPage}
+ >
+ <FormattedMessage
+ id='filtered_user_list.prev'
+ defaultMessage='Previous'
+ />
+ </button>
+ );
+ }
  }
  } else {
  optionsToDisplay = options;
@@ -267,7 +268,7 @@ export default class MultiSelect extends React.Component {
  onPageChange={this.props.handlePageChange}
  onAdd={this.onAdd}
  onSelect={this.onSelect}
- loadingChannels={this.props.loadingChannels}
+ loading={this.props.loading}
  />
  <div className='filter-controls'>
  {previousButton}
@@ -295,5 +296,5 @@ MultiSelect.propTypes = {
  buttonSubmitText: PropTypes.node,
  submitImmediatelyOn: PropTypes.func,
  saving: PropTypes.bool,
- loadingChannels: PropTypes.bool
+ loading: PropTypes.bool
 };

components/multiselect/multiselect_list.jsx

@@ -116,7 +116,7 @@ export default class MultiSelectList extends React.Component {
 
  render() {
  const options = this.props.options;
- if (this.props.loadingChannels) {
+ if (this.props.loading) {
  return (
  <div>
  <LoadingScreen
@@ -177,5 +177,5 @@ MultiSelectList.propTypes = {
  onPageChange: PropTypes.func,
  onAdd: PropTypes.func,
  onSelect: PropTypes.func,
- loadingChannels: PropTypes.bool
+ loading: PropTypes.bool
 };