From b8b2e21d0159047c57e479863523ad317a2dd0bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sun, 25 Oct 2020 15:52:46 +0100
Subject: [PATCH] Extracting the comments list from the card

---
 webapp/src/components/cardDetail.tsx   |  69 ++---------------
 webapp/src/components/commentsList.tsx | 103 +++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 64 deletions(-)
 create mode 100644 webapp/src/components/commentsList.tsx

diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index 4cb543c62..3c5dca8dc 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -21,7 +21,7 @@ import Button from './button'
 import {Editable} from './editable'
 import {MarkdownEditor} from './markdownEditor'
 import ContentBlock from './contentBlock'
-import Comment from './comment'
+import CommentsList from './commentsList'
 
 import './cardDetail.scss'
 
@@ -117,8 +117,6 @@ class CardDetail extends React.Component<Props, State> {
         const icon = card.icon
 
         // TODO: Replace this placeholder
-        const username = 'John Smith'
-        const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
 
         return (
             <>
@@ -227,58 +225,10 @@ class CardDetail extends React.Component<Props, State> {
                     {/* Comments */}
 
                     <hr/>
-                    <div className='commentlist'>
-                        {comments.map((comment) => (
-                            <Comment
-                                key={comment.id}
-                                comment={comment}
-                                userImageUrl={userImageUrl}
-                                username={username}
-                            />
-                        ))}
-
-                        {/* New comment */}
-
-                        <div className='commentrow'>
-                            <img
-                                className='comment-avatar'
-                                src={userImageUrl}
-                            />
-                            <Editable
-                                ref={newCommentRef}
-                                className='newcomment'
-                                placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
-                                onChanged={(text) => { }}
-                                onFocus={() => {
-                                    sendCommentButtonRef.current.style.display = null
-                                }}
-                                onBlur={() => {
-                                    if (!newCommentRef.current.text) {
-                                        sendCommentButtonRef.current.style.display = 'none'
-                                    }
-                                }}
-                                onKeyDown={(e) => {
-                                    if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
-                                        sendCommentButtonRef.current.click()
-                                    }
-                                }}
-                            />
-
-                            <div
-                                ref={sendCommentButtonRef}
-                                className='octo-button filled'
-                                style={{display: 'none'}}
-                                onClick={(e) => {
-                                    const text = newCommentRef.current.text
-                                    Utils.log(`Send comment: ${newCommentRef.current.text}`)
-                                    this.sendComment(text)
-                                    newCommentRef.current.text = undefined
-                                    newCommentRef.current.blur()
-                                }}
-                            >Send</div>
-                        </div>
-                    </div>
-
+                        <CommentsList
+                            comments={comments}
+                            cardId={card.id}
+                        />
                     <hr/>
                 </div>
 
@@ -325,15 +275,6 @@ class CardDetail extends React.Component<Props, State> {
         )
     }
 
-    async sendComment(text: string) {
-        const {cardId} = this.props
-
-        Utils.assertValue(cardId)
-
-        const block = new MutableCommentBlock({parentId: cardId, title: text})
-        await mutator.insertBlock(block, 'add comment')
-    }
-
     close() {
         PropertyMenu.shared.hide()
     }
diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx
new file mode 100644
index 000000000..b7cea4832
--- /dev/null
+++ b/webapp/src/components/commentsList.tsx
@@ -0,0 +1,103 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {injectIntl, IntlShape, FormattedMessage} from 'react-intl'
+
+import {MutableCommentBlock} from '../blocks/commentBlock'
+import {IBlock} from '../blocks/block'
+import {Utils} from '../utils'
+import mutator from '../mutator'
+
+import {Editable} from './editable'
+import Comment from './comment'
+
+type Props = {
+    comments: readonly IBlock[]
+    cardId: string
+    intl: IntlShape
+}
+
+class CommentsList extends React.Component<Props> {
+    newCommentRef = React.createRef<Editable>()
+    sendCommentButtonRef = React.createRef<HTMLDivElement>()
+
+    public shouldComponentUpdate() {
+        return true
+    }
+
+    private sendComment = (text: string) => {
+        const {cardId} = this.props
+
+        Utils.assertValue(cardId)
+
+        const block = new MutableCommentBlock({parentId: cardId, title: text})
+        mutator.insertBlock(block, 'add comment')
+    }
+
+    public render(): JSX.Element {
+        const {comments, intl} = this.props
+        const username = 'John Smith'
+        const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
+
+        return (
+            <div className='commentlist'>
+                {comments.map((comment) => (
+                    <Comment
+                        key={comment.id}
+                        comment={comment}
+                        userImageUrl={userImageUrl}
+                        username={username}
+                    />
+                ))}
+
+                {/* New comment */}
+
+                <div className='commentrow'>
+                    <img
+                        className='comment-avatar'
+                        src={userImageUrl}
+                    />
+                    <Editable
+                        ref={this.newCommentRef}
+                        className='newcomment'
+                        placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
+                        onChanged={() => { }}
+                        onFocus={() => {
+                            this.sendCommentButtonRef.current.style.display = null
+                        }}
+                        onBlur={() => {
+                            if (!this.newCommentRef.current?.text) {
+                                this.sendCommentButtonRef.current.style.display = 'none'
+                            }
+                        }}
+                        onKeyDown={(e: React.KeyboardEvent) => {
+                            if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+                                this.sendCommentButtonRef.current.click()
+                            }
+                        }}
+                    />
+
+                    <div
+                        ref={this.sendCommentButtonRef}
+                        className='octo-button filled'
+                        style={{display: 'none'}}
+                        onClick={() => {
+                            const text = this.newCommentRef.current.text
+                            Utils.log(`Send comment: ${this.newCommentRef.current.text}`)
+                            this.sendComment(text)
+                            this.newCommentRef.current.text = undefined
+                            this.newCommentRef.current.blur()
+                        }}
+                    >
+                        <FormattedMessage
+                            id='CommentsList.send'
+                            defaultMessage='Send'
+                        />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default injectIntl(CommentsList)