From 2b20c3510f45cfff3b22063b81fddd29df962ecb Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 18 Feb 2016 10:31:44 -0500 Subject: Ported PostDeletedModal to React-Bootstrap --- web/react/components/create_comment.jsx | 53 ++++++++---- web/react/components/create_post.jsx | 34 ++++++-- web/react/components/post_deleted_modal.jsx | 122 ++++++++++++---------------- web/react/pages/channel.jsx | 2 - 4 files changed, 116 insertions(+), 95 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 55dd8276c..5f8f76fab 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -7,6 +7,7 @@ import * as AsyncClient from '../utils/async_client.jsx'; import SocketStore from '../stores/socket_store.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import UserStore from '../stores/user_store.jsx'; +import PostDeletedModal from './post_deleted_modal.jsx'; import PostStore from '../stores/post_store.jsx'; import PreferenceStore from '../stores/preference_store.jsx'; import Textbox from './textbox.jsx'; @@ -60,6 +61,8 @@ class CreateComment extends React.Component { this.handleResize = this.handleResize.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.focusTextbox = this.focusTextbox.bind(this); + this.showPostDeletedModal = this.showPostDeletedModal.bind(this); + this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); PostStore.clearCommentDraftUploads(); @@ -70,7 +73,8 @@ class CreateComment extends React.Component { previews: draft.previews, submitting: false, windowWidth: Utils.windowWidth(), - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + showPostDeletedModal: false }; } componentDidMount() { @@ -141,8 +145,10 @@ class CreateComment extends React.Component { PostStore.storePendingPost(post); PostStore.storeCommentDraft(this.props.rootId, null); - Client.createPost(post, ChannelStore.getCurrent(), - function handlePostSuccess(data) { + Client.createPost( + post, + ChannelStore.getCurrent(), + (data) => { AsyncClient.getPosts(this.props.channelId); const channel = ChannelStore.get(this.props.channelId); @@ -155,27 +161,30 @@ class CreateComment extends React.Component { type: ActionTypes.RECEIVED_POST, post: data }); - }.bind(this), - function handlePostError(err) { - let state = {}; - + }, + (err) => { if (err.id === 'api.post.create_post.root_id.app_error') { - PostStore.removePendingPost(post.channel_id, post.pending_post_id); + this.showPostDeletedModal(); - if ($('#post_deleted').length > 0) { - $('#post_deleted').modal('show'); - } + PostStore.removePendingPost(post.channel_id, post.pending_post_id); } else { post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); } - state.submitting = false; - this.setState(state); - }.bind(this) + this.setState({ + submitting: false + }); + } ); - this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); + this.setState({ + messageText: '', + submitting: false, + postError: null, + previews: [], + serverError: null + }); } commentMsgKeyPress(e) { if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) { @@ -312,6 +321,16 @@ class CreateComment extends React.Component { this.refs.textbox.focus(); } } + showPostDeletedModal() { + this.setState({ + showPostDeletedModal: true + }); + } + hidePostDeletedModal() { + this.setState({ + showPostDeletedModal: false + }); + } render() { let serverError = null; if (this.state.serverError) { @@ -411,6 +430,10 @@ class CreateComment extends React.Component { {serverError} + ); } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index b9fbf09b5..5d90d03d2 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -5,6 +5,7 @@ import MsgTyping from './msg_typing.jsx'; import Textbox from './textbox.jsx'; import FileUpload from './file_upload.jsx'; import FilePreview from './file_preview.jsx'; +import PostDeletedModal from './post_deleted_modal.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; @@ -64,6 +65,8 @@ class CreatePost extends React.Component { this.handleKeyDown = this.handleKeyDown.bind(this); this.sendMessage = this.sendMessage.bind(this); this.focusTextbox = this.focusTextbox.bind(this); + this.showPostDeletedModal = this.showPostDeletedModal.bind(this); + this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); PostStore.clearDraftUploads(); @@ -77,7 +80,8 @@ class CreatePost extends React.Component { submitting: false, initialText: draft.messageText, ctrlSend: false, - showTutorialTip: false + showTutorialTip: false, + showPostDeletedModal: false }; } getCurrentDraft() { @@ -157,7 +161,6 @@ class CreatePost extends React.Component { post.pending_post_id = `${userId}:${time}`; post.user_id = userId; post.create_at = time; - post.root_id = this.state.rootId; post.parent_id = this.state.parentId; const channel = ChannelStore.get(this.state.channelId); @@ -177,20 +180,19 @@ class CreatePost extends React.Component { EventHelpers.emitPostRecievedEvent(data); }, (err) => { - const state = {}; - if (err.id === 'api.post.create_post.root_id.app_error') { - if ($('#post_deleted').length > 0) { - $('#post_deleted').modal('show'); - } + // this should never actually happen since you can't reply from this textbox + this.showPostDeletedModal(); + PostStore.removePendingPost(post.pending_post_id); } else { post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); } - state.submitting = false; - this.setState(state); + this.setState({ + submitting: false + }); } ); } @@ -374,6 +376,16 @@ class CreatePost extends React.Component { }); } } + showPostDeletedModal() { + this.setState({ + showPostDeletedModal: true + }); + } + hidePostDeletedModal() { + this.setState({ + showPostDeletedModal: false + }); + } createTutorialTip() { const screens = []; @@ -479,6 +491,10 @@ class CreatePost extends React.Component { {serverError} + ); } diff --git a/web/react/components/post_deleted_modal.jsx b/web/react/components/post_deleted_modal.jsx index 642befeab..be22989a6 100644 --- a/web/react/components/post_deleted_modal.jsx +++ b/web/react/components/post_deleted_modal.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserStore from '../stores/user_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import Constants from '../utils/constants.jsx'; @@ -9,20 +8,22 @@ import {FormattedMessage} from 'mm-intl'; var ActionTypes = Constants.ActionTypes; +const Modal = ReactBootstrap.Modal; + export default class PostDeletedModal extends React.Component { constructor(props) { super(props); - this.handleClose = this.handleClose.bind(this); - - this.state = {}; + this.handleHide = this.handleHide.bind(this); } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', () => { - this.handleClose(); - }); + + shouldComponentUpdate(nextProps) { + return nextProps.show !== this.props.show; } - handleClose() { + + handleHide(e) { + e.preventDefault(); + AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_SEARCH, results: null @@ -39,67 +40,50 @@ export default class PostDeletedModal extends React.Component { type: ActionTypes.RECEIVED_POST_SELECTED, results: null }); - } - render() { - var currentUser = UserStore.getCurrentUser(); - if (currentUser != null) { - return ( - - ); - } + this.props.onHide(); + } - return
; + render() { + return ( + + + + + + + +

+ +

+ + + + + + ); } } + +PostDeletedModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired +}; diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index 2c1d256b2..bd7c7c69b 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -12,7 +12,6 @@ import RenameChannelModal from '../components/rename_channel_modal.jsx'; import EditPostModal from '../components/edit_post_modal.jsx'; import DeletePostModal from '../components/delete_post_modal.jsx'; import MoreChannelsModal from '../components/more_channels.jsx'; -import PostDeletedModal from '../components/post_deleted_modal.jsx'; import TeamSettingsModal from '../components/team_settings_modal.jsx'; import RemovedFromChannelModal from '../components/removed_from_channel_modal.jsx'; import RegisterAppModal from '../components/register_app_modal.jsx'; @@ -79,7 +78,6 @@ class Root extends React.Component { -
-- cgit v1.2.3-1-g7c22