Migrate delete_post_modal.jsx to be pure and use Redux

actions/global_actions.jsx

@@ -188,16 +188,6 @@ export function toggleShortcutsModal() {
     });
 }
 
-export function showDeletePostModal(post, commentCount = 0, isRHS) {
-    AppDispatcher.handleViewAction({
-        type: ActionTypes.TOGGLE_DELETE_POST_MODAL,
-        value: true,
-        isRHS,
-        post,
-        commentCount,
-    });
-}
-
 export function showChannelHeaderUpdateModal(channel) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL,

components/channel_layout/channel_controller.jsx

@@ -7,7 +7,6 @@ import {Route} from 'react-router-dom';
 
 import Pluggable from 'plugins/pluggable';
 import AnnouncementBar from 'components/announcement_bar';
-import DeletePostModal from 'components/delete_post_modal.jsx';
 import EditPostModal from 'components/edit_post_modal';
 import GetPostLinkModal from 'components/get_post_link_modal';
 import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal';
@@ -64,7 +63,6 @@ export default class ChannelController extends React.Component {
                     <ImportThemeModal/>
                     <TeamSettingsModal/>
                     <EditPostModal/>
-                    <DeletePostModal/>
                     <RemovedFromChannelModal/>
                     <ResetStatusModal/>
                     <LeavePrivateChannelModal/>

components/delete_post_modal.jsx → components/delete_post_modal/delete_post_modal.jsx

@@ -1,106 +1,83 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
-import {deletePost} from 'actions/post_actions.jsx';
-import ModalStore from 'stores/modal_store.jsx';
-import Constants from 'utils/constants.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 
-var ActionTypes = Constants.ActionTypes;
+export default class DeletePostModal extends React.PureComponent {
+    static propTypes = {
 
-export default class DeletePostModal extends React.Component {
-    constructor(props) {
-        super(props);
+        post: PropTypes.object.isRequired,
+        commentCount: PropTypes.number.isRequired,
 
-        this.state = {
-            show: false,
-            post: null,
-            commentCount: 0,
-            error: '',
-        };
-    }
+        /**
+         * Does the post come from RHS mode
+         */
+        isRHS: PropTypes.bool.isRequired,
 
-    componentDidMount() {
-        ModalStore.addModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
-    }
+        /**
+        * Function called when modal is dismissed
+        */
+        onHide: PropTypes.func.isRequired,
 
-    componentWillUnmount() {
-        ModalStore.removeModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
-    }
+        actions: PropTypes.shape({
 
-    componentDidUpdate(prevProps, prevState) {
-        if (this.state.show && !prevState.show) {
-            setTimeout(() => {
-                if (this.deletePostBtn) {
-                    this.deletePostBtn.focus();
-                }
-            }, 200);
-        }
+            /**
+            * Function called for deleting post
+            */
+            deletePost: PropTypes.func.isRequired,
+        }),
     }
 
-    handleDelete = () => {
-        deletePost(
-            this.state.post.channel_id,
-            this.state.post,
-            () => {
-                this.handleHide();
-            },
-            (err) => {
-                this.setState({error: err.message});
-            }
-        );
+    constructor(props) {
+        super(props);
+        this.handleDelete = this.handleDelete.bind(this);
+        this.onHide = this.onHide.bind(this);
+        this.state = {
+            show: true,
+        };
     }
 
-    handleToggle = (value, args) => {
-        this.setState({
-            show: value,
-            post: args.post,
-            isRHS: args.isRHS,
-            commentCount: args.commentCount,
-            error: '',
-        });
+    handleDelete() {
+        this.props.actions.deletePost(this.props.post);
+        this.onHide();
     }
 
-    handleHide = () => {
+    onHide() {
         this.setState({show: false});
 
         if (!UserAgent.isMobile()) {
-            if (this.state.isRHS) {
-                document.getElementById('reply_textbox').focus();
+            var element;
+            if (this.props.isRHS) {
+                element = document.getElementById('reply_textbox');
             } else {
-                document.getElementById('post_textbox').focus();
+                element = document.getElementById('post_textbox');
+            }
+            if (element) {
+                element.focus();
             }
         }
     }
 
     render() {
-        if (!this.state.post) {
-            return null;
-        }
-
-        var error = null;
-        if (this.state.error) {
-            error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
-        }
-
         var commentWarning = '';
-        if (this.state.commentCount > 0) {
+        if (this.props.commentCount > 0) {
             commentWarning = (
                 <FormattedMessage
                     id='delete_post.warning'
                     defaultMessage='This post has {count, number} {count, plural, one {comment} other {comments}} on it.'
                     values={{
-                        count: this.state.commentCount,
+                        count: this.props.commentCount,
                     }}
                 />
             );
         }
 
-        const postTerm = this.state.post.root_id ? (
+        const postTerm = this.props.post.root_id ? (
             <FormattedMessage
                 id='delete_post.comment'
                 defaultMessage='Comment'
@@ -115,7 +92,8 @@ export default class DeletePostModal extends React.Component {
         return (
             <Modal
                 show={this.state.show}
-                onHide={this.handleHide}
+                onHide={this.onHide}
+                onExited={this.props.onHide}
                 enforceFocus={false}
             >
                 <Modal.Header closeButton={true}>
@@ -140,7 +118,6 @@ export default class DeletePostModal extends React.Component {
                     <br/>
                     <br/>
                     {commentWarning}
-                    {error}
                 </Modal.Body>
                 <Modal.Footer>
                     <button

components/delete_post_modal/index.js

@@ -0,0 +1,18 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import {deletePost} from 'mattermost-redux/actions/posts';
+
+import DeletePostModal from './delete_post_modal.jsx';
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            deletePost,
+        }, dispatch),
+    };
+}
+
+export default connect(null, mapDispatchToProps)(DeletePostModal);

components/dot_menu/dot_menu.jsx

@@ -27,30 +27,35 @@ export default class DotMenu extends Component {
 
         actions: PropTypes.shape({
 
-            /*
+            /**
              * Function flag the post
              */
             flagPost: PropTypes.func.isRequired,
 
-            /*
+            /**
              * Function to unflag the post
              */
             unflagPost: PropTypes.func.isRequired,
 
-            /*
-             * Function to set the edting post
+            /**
+             * Function to set the editing post
              */
             setEditingPost: PropTypes.func.isRequired,
 
-            /*
+            /**
              * Function to pin the post
              */
             pinPost: PropTypes.func.isRequired,
 
-            /*
+            /**
              * Function to unpin the post
              */
             unpinPost: PropTypes.func.isRequired,
+
+            /**
+             * Function to open a modal
+             */
+            openModal: PropTypes.func.isRequired,
         }).isRequired,
     }
 
@@ -185,6 +190,9 @@ export default class DotMenu extends Component {
                     idCount={this.props.idCount}
                     post={this.props.post}
                     commentCount={type === 'Post' ? this.props.commentCount : 0}
+                    actions={{
+                        openModal: this.props.actions.openModal,
+                    }}
                 />
             );
         }

components/dot_menu/dot_menu_item.jsx

@@ -5,8 +5,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {showDeletePostModal, showGetPostLinkModal} from 'actions/global_actions.jsx';
-import Constants from 'utils/constants.jsx';
+import {showGetPostLinkModal} from 'actions/global_actions.jsx';
+import DeletePostModal from 'components/delete_post_modal';
+import {Constants, ModalIdentifiers} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 export default function DotMenuItem(props) {
@@ -27,7 +28,18 @@ export default function DotMenuItem(props) {
 
     function handleDeletePost(e) {
         e.preventDefault();
-        showDeletePostModal(props.post, props.commentCount, props.isRHS);
+
+        const deletePostModalData = {
+            ModalId: ModalIdentifiers.DELETE_POST,
+            dialogType: DeletePostModal,
+            dialogProps: {
+                post: props.post,
+                commentCount: props.commentCount,
+                isRHS: props.isRHS,
+            },
+        };
+
+        props.actions.openModal(deletePostModalData);
     }
 
     const attrib = {};
@@ -101,15 +113,20 @@ DotMenuItem.propTypes = {
 
     actions: PropTypes.shape({
 
-        /*
+        /**
          * Function to pin the post
          */
         pinPost: PropTypes.func,
 
-        /*
+        /**
          * Function to unpin the post
          */
         unpinPost: PropTypes.func,
+
+        /**
+         * Function to open a modal
+         */
+        openModal: PropTypes.func,
     }),
 };
 

components/dot_menu/index.js

@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {flagPost, unflagPost} from 'mattermost-redux/actions/posts';
 
+import {openModal} from 'actions/views/modals';
 import {pinPost, unpinPost, setEditingPost} from 'actions/post_actions.jsx';
 
 import DotMenu from './dot_menu.jsx';
@@ -21,6 +22,7 @@ function mapDispatchToProps(dispatch) {
             setEditingPost,
             pinPost,
             unpinPost,
+            openModal,
         }, dispatch),
     };
 }

components/edit_post_modal/edit_post_modal.jsx

@@ -7,11 +7,11 @@ import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 import * as Selectors from 'mattermost-redux/selectors/entities/posts';
 
-import * as GlobalActions from 'actions/global_actions.jsx';
 import store from 'stores/redux_store.jsx';
-import Constants from 'utils/constants.jsx';
+import {Constants, ModalIdentifiers} from 'utils/constants.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import * as Utils from 'utils/utils.jsx';
+import DeletePostModal from 'components/delete_post_modal';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
 import EmojiIcon from 'components/svg/emoji_icon';
 import Textbox from 'components/textbox.jsx';
@@ -165,7 +165,18 @@ export default class EditPostModal extends React.PureComponent {
         const hasAttachment = editingPost.post.file_ids && editingPost.post.file_ids.length > 0;
         if (updatedPost.message.trim().length === 0 && !hasAttachment) {
             this.handleHide(false);
-            GlobalActions.showDeletePostModal(Selectors.getPost(getState(), editingPost.postId), editingPost.commentsCount, editingPost.isRHS);
+
+            const deletePostModalData = {
+                ModalId: ModalIdentifiers.DELETE_POST,
+                dialogType: DeletePostModal,
+                dialogProps: {
+                    post: Selectors.getPost(getState(), editingPost.postId),
+                    commentCount: editingPost.commentsCount,
+                    isRHS: editingPost.isRHS,
+                },
+            };
+
+            this.props.actions.openModal(deletePostModalData);
             return;
         }
 

components/edit_post_modal/index.js

@@ -8,6 +8,7 @@ import {Preferences} from 'mattermost-redux/constants';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getBool} from 'mattermost-redux/selectors/entities/preferences';
 
+import {openModal} from 'actions/views/modals';
 import {hideEditPostModal} from 'actions/post_actions';
 import {editPost} from 'actions/views/edit_post_modal';
 import {getEditingPost} from 'selectors/posts';
@@ -28,6 +29,7 @@ function mapDispatchToProps(dispatch) {
             addMessageIntoHistory,
             editPost,
             hideEditPostModal,
+            openModal,
         }, dispatch),
     };
 }