From 8f17720d4bf7a075e7e366f39016f34d3d13276e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 24 Oct 2020 20:37:09 +0200
Subject: [PATCH] Adding comment component

---
 webapp/src/components/cardDetail.tsx | 55 +++++-----------------------
 webapp/src/components/comment.scss   | 12 ++++++
 webapp/src/components/comment.tsx    | 51 ++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 webapp/src/components/comment.scss
 create mode 100644 webapp/src/components/comment.tsx

diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index 0dc410ae1..c356c9aba 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -16,9 +16,12 @@ import {OctoUtils} from '../octoUtils'
 import {PropertyMenu} from '../propertyMenu'
 import {Utils} from '../utils'
 
+import Menu from '../widgets/menu'
+import MenuWrapper from '../widgets/menuWrapper'
 import Button from './button'
 import {Editable} from './editable'
 import {MarkdownEditor} from './markdownEditor'
+import Comment from './comment'
 
 type Props = {
     boardTree: BoardTree
@@ -262,52 +265,14 @@ export default class CardDetail extends React.Component<Props, State> {
 
                     <hr/>
                     <div className='commentlist'>
-                        {comments.map((comment) => {
-                            const optionsButtonRef = React.createRef<HTMLDivElement>()
-                            const showCommentMenu = (e: React.MouseEvent, activeComment: IBlock) => {
-                                OldMenu.shared.options = [
-                                    {id: 'delete', name: 'Delete'},
-                                ]
-                                OldMenu.shared.onMenuClicked = (id) => {
-                                    switch (id) {
-                                    case 'delete': {
-                                        mutator.deleteBlock(activeComment)
-                                        break
-                                    }
-                                    }
-                                }
-                                OldMenu.shared.showAtElement(e.target as HTMLElement)
-                            }
-
-                            return (<div
+                        {comments.map((comment) => (
+                            <Comment
                                 key={comment.id}
-                                className='comment'
-                                onMouseOver={() => {
-                                    optionsButtonRef.current.style.display = null
-                                }}
-                                onMouseLeave={() => {
-                                    optionsButtonRef.current.style.display = 'none'
-                                }}
-                                    >
-                                <div className='comment-header'>
-                                    <img
-                                        className='comment-avatar'
-                                        src={userImageUrl}
-                                    />
-                                    <div className='comment-username'>{username}</div>
-                                    <div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
-                                    <div
-                                        ref={optionsButtonRef}
-                                        className='octo-hoverbutton square'
-                                        style={{display: 'none'}}
-                                        onClick={(e) => {
-                                            showCommentMenu(e, comment)
-                                        }}
-                                    >...</div>
-                                </div>
-                                <div className='comment-text'>{comment.title}</div>
-                            </div>)
-                        })}
+                                comment={comment}
+                                userImageUrl={userImageUrl}
+                                username={username}
+                            />
+                        ))}
 
                         {/* New comment */}
 
diff --git a/webapp/src/components/comment.scss b/webapp/src/components/comment.scss
new file mode 100644
index 000000000..7689e6738
--- /dev/null
+++ b/webapp/src/components/comment.scss
@@ -0,0 +1,12 @@
+.Comment {
+    .MenuWrapper {
+        display: none;
+        position: absolute;
+        right: 0;
+    }
+    &:hover {
+        .MenuWrapper {
+            display: block;
+        }
+    }
+}
diff --git a/webapp/src/components/comment.tsx b/webapp/src/components/comment.tsx
new file mode 100644
index 000000000..649eda969
--- /dev/null
+++ b/webapp/src/components/comment.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React, {FC} from 'react'
+import {IntlShape, injectIntl} from 'react-intl'
+
+import mutator from '../mutator'
+import {IBlock} from '../blocks/block'
+
+import Menu from '../widgets/menu'
+import MenuWrapper from '../widgets/menuWrapper'
+
+import './comment.scss'
+
+type Props = {
+    comment: IBlock
+    username: string
+    userImageUrl: string
+    intl: IntlShape
+}
+
+const Comment: FC<Props> = (props: Props) => {
+    const {comment, username, userImageUrl, intl} = props
+    return (
+        <div
+            key={comment.id}
+            className='Comment comment'
+        >
+            <div className='comment-header'>
+                <img
+                    className='comment-avatar'
+                    src={userImageUrl}
+                />
+                <div className='comment-username'>{username}</div>
+                <div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
+                <MenuWrapper>
+                    <div className='octo-hoverbutton square'>{'...'}</div>
+                    <Menu>
+                        <Menu.Text
+                            id='delete'
+                            name={intl.formatMessage({id: 'Comment.delete', defaultMessage: 'Delete'})}
+                            onClick={() => mutator.deleteBlock(comment)}
+                        />
+                    </Menu>
+                </MenuWrapper>
+            </div>
+            <div className='comment-text'>{comment.title}</div>
+        </div>
+    )
+}
+
+export default injectIntl(Comment)