diff options
author | Ryan Wang <R-Wang97@users.noreply.github.com> | 2017-04-25 12:34:21 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-04-25 09:34:21 -0700 |
commit | f1668bad15d27e6e2b40e5079f0b878603b33684 (patch) | |
tree | 5a5852f301ae1f31238bd6f5d6a95322b001354f /webapp/components/channel_header.jsx | |
parent | 6c4c706313eb765eb00c639f381646be74f27b69 (diff) | |
download | chat-f1668bad15d27e6e2b40e5079f0b878603b33684.tar.gz chat-f1668bad15d27e6e2b40e5079f0b878603b33684.tar.bz2 chat-f1668bad15d27e6e2b40e5079f0b878603b33684.zip |
Add confirm dialog before leaving private channel (#6206)
Diffstat (limited to 'webapp/components/channel_header.jsx')
-rw-r--r-- | webapp/components/channel_header.jsx | 65 |
1 files changed, 63 insertions, 2 deletions
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index 82864d48c..f09a4a61d 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -14,6 +14,7 @@ import ChannelMembersModal from './channel_members_modal.jsx'; import ChannelNotificationsModal from './channel_notifications_modal.jsx'; import DeleteChannelModal from './delete_channel_modal.jsx'; import RenameChannelModal from './rename_channel_modal.jsx'; +import ConfirmModal from './confirm_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import ChannelStore from 'stores/channel_store.jsx'; @@ -57,6 +58,8 @@ export default class ChannelHeader extends React.Component { this.initWebrtc = this.initWebrtc.bind(this); this.onBusy = this.onBusy.bind(this); this.openDirectMessageModal = this.openDirectMessageModal.bind(this); + this.createLeaveChannelModal = this.createLeaveChannelModal.bind(this); + this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this); const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; @@ -84,7 +87,8 @@ export default class ChannelHeader extends React.Component { otherUserId, enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true), isBusy: WebrtcStore.isBusy(), - isFavorite: channel && ChannelUtils.isFavoriteChannel(channel) + isFavorite: channel && ChannelUtils.isFavoriteChannel(channel), + showLeaveChannelModal: false }; } @@ -135,7 +139,13 @@ export default class ChannelHeader extends React.Component { } handleLeave() { - ChannelActions.leaveChannel(this.state.channel.id); + if (this.state.channel.type === Constants.PRIVATE_CHANNEL) { + this.setState({ + showLeaveChannelModal: true + }); + } else { + ChannelActions.leaveChannel(this.state.channel.id); + } } toggleFavorite = (e) => { @@ -219,6 +229,54 @@ export default class ChannelHeader extends React.Component { }); } + hideLeaveChannelModal() { + this.setState({ + showLeaveChannelModal: false + }); + } + + createLeaveChannelModal() { + const title = ( + <FormattedMessage + id='leave_private_channel_modal.title' + defaultMessage='Leave Private Channel {channel}' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + + const message = ( + <FormattedMessage + id='leave_private_channel_modal.message' + defaultMessage='Are you sure you wish to leave the private channel {channel}? You must be re-invited in order to re-join this channel in the future.' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + + const buttonClass = 'btn btn-danger'; + const button = ( + <FormattedMessage + id='leave_private_channel_modal.leave' + defaultMessage='Yes, leave channel' + /> + ); + + return ( + <ConfirmModal + show={this.state.showLeaveChannelModal} + title={title} + message={message} + confirmButtonClass={buttonClass} + confirmButton={button} + onConfirm={() => ChannelActions.leaveChannel(this.state.channel.id)} + onCancel={this.hideLeaveChannelModal} + /> + ); + } + render() { const flagIcon = Constants.FLAG_ICON_SVG; const pinIcon = Constants.PIN_ICON; @@ -764,6 +822,8 @@ export default class ChannelHeader extends React.Component { ); } + const leaveChannelModal = this.createLeaveChannelModal(); + return ( <div id='channel-header' @@ -876,6 +936,7 @@ export default class ChannelHeader extends React.Component { </table> {editPurposeModal} {channelMembersModal} + {leaveChannelModal} <RenameChannelModal show={this.state.showRenameChannelModal} onHide={this.hideRenameChannelModal} |