create DotMenu components and add dotmenu IDs to posts at center and RHS (#6642)

1 files changed, 14 insertions, 276 deletions

diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 45c716ad0..20c37ee72 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -1,10 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-
 import PostTime from './post_time.jsx';
 import PostFlagIcon from 'components/common/post_flag_icon.jsx';
+import DotMenu from 'components/dot_menu/dot_menu.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import * as PostActions from 'actions/post_actions.jsx';
@@ -13,7 +12,6 @@ import CommentIcon from 'components/common/comment_icon.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import Constants from 'utils/constants.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
 import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 
@@ -26,257 +24,15 @@ export default class PostInfo extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
-        this.handlePermalink = this.handlePermalink.bind(this);
         this.removePost = this.removePost.bind(this);
-        this.flagPost = this.flagPost.bind(this);
-        this.unflagPost = this.unflagPost.bind(this);
-        this.pinPost = this.pinPost.bind(this);
-        this.unpinPost = this.unpinPost.bind(this);
         this.reactEmojiClick = this.reactEmojiClick.bind(this);
 
-        this.canEdit = false;
-        this.canDelete = false;
-        this.editDisableAction = new DelayedAction(this.handleEditDisable);
-
         this.state = {
             showEmojiPicker: false,
             reactionPickerOffset: 21
         };
     }
 
-    handleDropdownOpened() {
-        this.props.handleDropdownOpened(true);
-
-        const position = $('#post-list').height() - $(this.refs.dropdownToggle).offset().top;
-        const dropdown = $(this.refs.dropdown);
-
-        if (position < dropdown.height()) {
-            dropdown.addClass('bottom');
-        }
-    }
-
-    handleEditDisable() {
-        this.canEdit = false;
-    }
-
-    componentDidMount() {
-        $('#post_dropdown' + this.props.post.id).on('shown.bs.dropdown', this.handleDropdownOpened);
-        $('#post_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false));
-    }
-
-    createDropdown(isSystemMessage) {
-        const post = this.props.post;
-
-        var type = 'Post';
-        if (post.root_id && post.root_id.length > 0) {
-            type = 'Comment';
-        }
-
-        var dropdownContents = [];
-        var dataComments = 0;
-        if (type === 'Post') {
-            dataComments = this.props.commentCount;
-        }
-
-        if (!isSystemMessage) {
-            dropdownContents.push(
-                <li
-                    key='replyLink'
-                    role='presentation'
-                >
-                    <a
-                        className='link__reply theme'
-                        href='#'
-                        onClick={this.props.handleCommentClick}
-                    >
-                        <FormattedMessage
-                            id='post_info.reply'
-                            defaultMessage='Reply'
-                        />
-                    </a>
-                </li>
-             );
-        }
-
-        if (Utils.isMobile()) {
-            if (this.props.isFlagged) {
-                dropdownContents.push(
-                    <li
-                        key='mobileFlag'
-                        role='presentation'
-                    >
-                        <a
-                            href='#'
-                            onClick={this.unflagPost}
-                        >
-                            <FormattedMessage
-                                id='rhs_root.mobile.unflag'
-                                defaultMessage='Unflag'
-                            />
-                        </a>
-                    </li>
-                );
-            } else {
-                dropdownContents.push(
-                    <li
-                        key='mobileFlag'
-                        role='presentation'
-                    >
-                        <a
-                            href='#'
-                            onClick={this.flagPost}
-                        >
-                            <FormattedMessage
-                                id='rhs_root.mobile.flag'
-                                defaultMessage='Flag'
-                            />
-                        </a>
-                    </li>
-                );
-            }
-        }
-
-        if (!isSystemMessage) {
-            dropdownContents.push(
-                <li
-                    key='copyLink'
-                    role='presentation'
-                >
-                    <a
-                        href='#'
-                        onClick={this.handlePermalink}
-                    >
-                        <FormattedMessage
-                            id='post_info.permalink'
-                            defaultMessage='Permalink'
-                        />
-                    </a>
-                </li>
-            );
-
-            if (this.props.post.is_pinned) {
-                dropdownContents.push(
-                    <li
-                        key='unpinLink'
-                        role='presentation'
-                    >
-                        <a
-                            href='#'
-                            onClick={this.unpinPost}
-                        >
-                            <FormattedMessage
-                                id='post_info.unpin'
-                                defaultMessage='Un-pin from channel'
-                            />
-                        </a>
-                    </li>
-                );
-            } else {
-                dropdownContents.push(
-                    <li
-                        key='pinLink'
-                        role='presentation'
-                    >
-                        <a
-                            href='#'
-                            onClick={this.pinPost}
-                        >
-                            <FormattedMessage
-                                id='post_info.pin'
-                                defaultMessage='Pin to channel'
-                            />
-                        </a>
-                    </li>
-                );
-            }
-        }
-
-        if (this.canDelete) {
-            dropdownContents.push(
-                <li
-                    key='deletePost'
-                    role='presentation'
-                >
-                    <a
-                        href='#'
-                        role='menuitem'
-                        onClick={(e) => {
-                            e.preventDefault();
-                            GlobalActions.showDeletePostModal(post, dataComments);
-                        }}
-                    >
-                        <FormattedMessage
-                            id='post_info.del'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
-        if (this.canEdit) {
-            dropdownContents.push(
-                <li
-                    key='editPost'
-                    role='presentation'
-                    className={this.canEdit ? 'dropdown-submenu' : 'dropdown-submenu hide'}
-                >
-                    <a
-                        href='#'
-                        role='menuitem'
-                        data-toggle='modal'
-                        data-target='#edit_post'
-                        data-refocusid='#post_textbox'
-                        data-title={type}
-                        data-message={post.message}
-                        data-postid={post.id}
-                        data-channelid={post.channel_id}
-                        data-comments={dataComments}
-                    >
-                        <FormattedMessage
-                            id='post_info.edit'
-                            defaultMessage='Edit'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
-        if (dropdownContents.length === 0) {
-            return '';
-        }
-
-        return (
-            <div
-                id={'post_dropdown' + this.props.post.id}
-            >
-                <a
-                    ref='dropdownToggle'
-                    href='#'
-                    className='dropdown-toggle post__dropdown theme'
-                    type='button'
-                    data-toggle='dropdown'
-                    aria-expanded='false'
-                />
-                <div className='dropdown-menu__content'>
-                    <ul
-                        ref='dropdown'
-                        className='dropdown-menu'
-                        role='menu'
-                    >
-                        {dropdownContents}
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-
-    handlePermalink(e) {
-        e.preventDefault();
-        GlobalActions.showGetPostLinkModal(this.props.post);
-    }
-
     toggleEmojiPicker = () => {
         const showEmojiPicker = !this.state.showEmojiPicker;
 
@@ -306,26 +62,6 @@ export default class PostInfo extends React.Component {
         );
     }
 
-    pinPost(e) {
-        e.preventDefault();
-        PostActions.pinPost(this.props.post.channel_id, this.props.post.id);
-    }
-
-    unpinPost(e) {
-        e.preventDefault();
-        PostActions.unpinPost(this.props.post.channel_id, this.props.post.id);
-    }
-
-    flagPost(e) {
-        e.preventDefault();
-        PostActions.flagPost(this.props.post.id);
-    }
-
-    unflagPost(e) {
-        e.preventDefault();
-        PostActions.unflagPost(this.props.post.id);
-    }
-
     reactEmojiClick(emoji) {
         const pickerOffset = 21;
         this.setState({showEmojiPicker: false, reactionPickerOffset: pickerOffset});
@@ -345,9 +81,6 @@ export default class PostInfo extends React.Component {
             idCount = this.props.lastPostCount;
         }
 
-        this.canDelete = PostUtils.canDeletePost(post);
-        this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
-
         const isEphemeral = Utils.isPostEphemeral(post);
         const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
         const isSystemMessage = PostUtils.isSystemMessage(post);
@@ -395,20 +128,25 @@ export default class PostInfo extends React.Component {
                 </div>
             );
         } else if (!isPending) {
-            const dropdown = this.createDropdown(isSystemMessage);
+            const dotMenu = (
+                <DotMenu
+                    idPrefix={Constants.CENTER}
+                    idCount={idCount}
+                    post={this.props.post}
+                    commentCount={this.props.commentCount}
+                    isFlagged={this.props.isFlagged}
+                    handleCommentClick={this.props.handleCommentClick}
+                    handleDropdownOpened={this.props.handleDropdownOpened}
+                />
+            );
 
-            if (dropdown) {
+            if (dotMenu) {
                 options = (
                     <div
                         ref='dotMenu'
                         className='col col__reply'
                     >
-                        <div
-                            className='dropdown'
-                            ref='dotMenu'
-                        >
-                            {dropdown}
-                        </div>
+                        {dotMenu}
                         {react}
                         {comments}
                     </div>