From 3d572be2f3bb0d4b6b2eb83b69a209234f807231 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 17 Nov 2015 11:10:33 -0500 Subject: Converted DeleteChannelModal to React-Bootstrap --- web/react/components/channel_header.jsx | 12 ++- web/react/components/delete_channel_modal.jsx | 116 ++++++++++---------------- web/react/components/navbar.jsx | 12 ++- web/react/pages/channel.jsx | 6 -- 4 files changed, 53 insertions(+), 93 deletions(-) diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index a0676e929..ffe7cbb5d 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -9,6 +9,7 @@ const ChannelInfoModal = require('./channel_info_modal.jsx'); const ChannelInviteModal = require('./channel_invite_modal.jsx'); const ChannelMembersModal = require('./channel_members_modal.jsx'); const ChannelNotificationsModal = require('./channel_notifications_modal.jsx'); +const DeleteChannelModal = require('./delete_channel_modal.jsx'); const ToggleModalButton = require('./toggle_modal_button.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); @@ -300,16 +301,13 @@ export default class ChannelHeader extends React.Component { key='delete_channel' role='presentation' > - {'Delete '}{channelTerm}{'...'} - + ); } diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index b7d633b38..17694e779 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -1,102 +1,72 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -const Client = require('../utils/client.jsx'); const AsyncClient = require('../utils/async_client.jsx'); -const ChannelStore = require('../stores/channel_store.jsx'); -var TeamStore = require('../stores/team_store.jsx'); +const Client = require('../utils/client.jsx'); +const Modal = require('./modal.jsx'); +const TeamStore = require('../stores/team_store.jsx'); +const Utils = require('../utils/utils.jsx'); export default class DeleteChannelModal extends React.Component { constructor(props) { super(props); this.handleDelete = this.handleDelete.bind(this); - this.onShow = this.onShow.bind(this); - - this.state = { - title: '', - channelId: '' - }; } + handleDelete() { - if (this.state.channelId.length !== 26) { + if (this.props.channel.id.length !== 26) { return; } - Client.deleteChannel(this.state.channelId, - function handleDeleteSuccess() { + Client.deleteChannel( + this.props.channel.id, + () => { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; }, - function handleDeleteError(err) { + (err) => { AsyncClient.dispatchError(err, 'handleDelete'); } ); } - onShow(e) { - var button = $(e.relatedTarget); - this.setState({ - title: button.attr('data-title'), - channelId: button.attr('data-channelid') - }); - } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow); - } + render() { - const channel = ChannelStore.getCurrent(); - let channelType = 'channel'; - if (channel && channel.type === 'P') { - channelType = 'private group'; - } + const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase(); return ( - + {'Confirm DELETE Channel'} + + {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`} + + + + + + ); } } + +DeleteChannelModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 85be96a92..1fcfabccd 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -8,6 +8,7 @@ const ChannelMembersModal = require('./channel_members_modal.jsx'); const ChannelInfoModal = require('./channel_info_modal.jsx'); const ChannelInviteModal = require('./channel_invite_modal.jsx'); const ChannelNotificationsModal = require('./channel_notifications_modal.jsx'); +const DeleteChannelModal = require('./delete_channel_modal.jsx'); const ToggleModalButton = require('./toggle_modal_button.jsx'); const UserStore = require('../stores/user_store.jsx'); @@ -195,16 +196,13 @@ export default class Navbar extends React.Component { deleteChannelOption = (
  • - {'Delete Channel...'} - +
    • ); } diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index b0c494a55..9aba1a564 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -10,7 +10,6 @@ var ErrorStore = require('../stores/error_store.jsx'); var MentionList = require('../components/mention_list.jsx'); var GetLinkModal = require('../components/get_link_modal.jsx'); var EditChannelModal = require('../components/edit_channel_modal.jsx'); -var DeleteChannelModal = require('../components/delete_channel_modal.jsx'); var RenameChannelModal = require('../components/rename_channel_modal.jsx'); var EditPostModal = require('../components/edit_post_modal.jsx'); var DeletePostModal = require('../components/delete_post_modal.jsx'); @@ -100,11 +99,6 @@ function setupChannelPage(props) { document.getElementById('edit_channel_modal') ); - ReactDOM.render( - , - document.getElementById('delete_channel_modal') - ); - ReactDOM.render( , document.getElementById('rename_channel_modal') -- cgit v1.2.3-1-g7c22