From 8ea954aa64665bfc285d88325bf71d368dd087c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 27 Mar 2021 10:30:53 +0100
Subject: [PATCH] Migrating CommentsList to functional component

---
 webapp/src/components/commentsList.tsx | 138 +++++++++++--------------
 1 file changed, 59 insertions(+), 79 deletions(-)

diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx
index eb16001ba..3e3aed4c0 100644
--- a/webapp/src/components/commentsList.tsx
+++ b/webapp/src/components/commentsList.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+import React, {useState, useMemo} from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {CommentBlock, MutableCommentBlock} from '../blocks/commentBlock'
@@ -19,94 +19,74 @@ type Props = {
     intl: IntlShape
 }
 
-type State = {
-    newComment: string
-}
+const CommentsList = React.memo((props: Props) => {
+    const [newComment, setNewComment] = useState('')
 
-class CommentsList extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props)
-        this.state = {
-            newComment: '',
-        }
-    }
-
-    shouldComponentUpdate() {
-        return true
-    }
-
-    private sendComment = (commentText: string) => {
-        const {rootId, cardId} = this.props
-
-        Utils.assertValue(cardId)
-
-        const comment = new MutableCommentBlock()
-        comment.parentId = cardId
-        comment.rootId = rootId
-        comment.title = commentText
-        mutator.insertBlock(comment, 'add comment')
-    }
-
-    private onSendClicked = () => {
-        const commentText = this.state.newComment
+    const onSendClicked = useMemo(() => () => {
+        const commentText = newComment
         if (commentText) {
+            const {rootId, cardId} = props
             Utils.log(`Send comment: ${commentText}`)
-            this.sendComment(commentText)
-            this.setState({newComment: ''})
+            Utils.assertValue(cardId)
+
+            const comment = new MutableCommentBlock()
+            comment.parentId = cardId
+            comment.rootId = rootId
+            comment.title = commentText
+            mutator.insertBlock(comment, 'add comment')
+            setNewComment('')
         }
-    }
+    }, [])
 
-    render(): JSX.Element {
-        const {comments, intl} = this.props
+    const {comments, intl} = props
 
-        // TODO: Replace this placeholder
-        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>'
+    // TODO: Replace this placeholder
+    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='CommentsList'>
-                {comments.map((comment) => (
-                    <Comment
-                        key={comment.id}
-                        comment={comment}
-                        userImageUrl={userImageUrl}
-                        userId={comment.modifiedBy}
-                    />
-                ))}
+    return (
+        <div className='CommentsList'>
+            {comments.map((comment) => (
+                <Comment
+                    key={comment.id}
+                    comment={comment}
+                    userImageUrl={userImageUrl}
+                    userId={comment.modifiedBy}
+                />
+            ))}
 
-                {/* New comment */}
+            {/* New comment */}
 
-                <div className='commentrow'>
-                    <img
-                        className='comment-avatar'
-                        src={userImageUrl}
-                    />
-                    <MarkdownEditor
-                        className='newcomment'
-                        text={this.state.newComment}
-                        placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
-                        onChange={(value: string) => {
-                            if (this.state.newComment !== value) {
-                                this.setState({newComment: value})
-                            }
-                        }}
-                        onAccept={this.onSendClicked}
-                    />
+            <div className='commentrow'>
+                <img
+                    className='comment-avatar'
+                    src={userImageUrl}
+                />
+                <MarkdownEditor
+                    className='newcomment'
+                    text={newComment}
+                    placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
+                    onChange={(value: string) => {
+                        if (newComment !== value) {
+                            setNewComment(value)
+                        }
+                    }}
+                    onAccept={onSendClicked}
+                />
 
-                    {this.state.newComment &&
-                        <Button
-                            filled={true}
-                            onClick={this.onSendClicked}
-                        >
-                            <FormattedMessage
-                                id='CommentsList.send'
-                                defaultMessage='Send'
-                            />
-                        </Button>
-                    }
-                </div>
+                {newComment &&
+                    <Button
+                        filled={true}
+                        onClick={onSendClicked}
+                    >
+                        <FormattedMessage
+                            id='CommentsList.send'
+                            defaultMessage='Send'
+                        />
+                    </Button>
+                }
             </div>
-        )
-    }
-}
+        </div>
+    )
+})
 
 export default injectIntl(CommentsList)