Migrating CommentsList to functional component

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,25 +19,14 @@ type Props = {
     intl: IntlShape
 }
 
-type State = {
-    newComment: string
-}
-
-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
+const CommentsList = React.memo((props: Props) => {
+    const [newComment, setNewComment] = useState('')
 
+    const onSendClicked = useMemo(() => () => {
+        const commentText = newComment
+        if (commentText) {
+            const {rootId, cardId} = props
+            Utils.log(`Send comment: ${commentText}`)
             Utils.assertValue(cardId)
 
             const comment = new MutableCommentBlock()
@@ -45,19 +34,11 @@ class CommentsList extends React.Component<Props, State> {
             comment.rootId = rootId
             comment.title = commentText
             mutator.insertBlock(comment, 'add comment')
+            setNewComment('')
         }
+    }, [])
 
-    private onSendClicked = () => {
-        const commentText = this.state.newComment
-        if (commentText) {
-            Utils.log(`Send comment: ${commentText}`)
-            this.sendComment(commentText)
-            this.setState({newComment: ''})
-        }
-    }
-
-    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>'
@@ -82,20 +63,20 @@ class CommentsList extends React.Component<Props, State> {
                 />
                 <MarkdownEditor
                     className='newcomment'
-                        text={this.state.newComment}
+                    text={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})
+                        if (newComment !== value) {
+                            setNewComment(value)
                         }
                     }}
-                        onAccept={this.onSendClicked}
+                    onAccept={onSendClicked}
                 />
 
-                    {this.state.newComment &&
+                {newComment &&
                     <Button
                         filled={true}
-                            onClick={this.onSendClicked}
+                        onClick={onSendClicked}
                     >
                         <FormattedMessage
                             id='CommentsList.send'
@@ -106,7 +87,6 @@ class CommentsList extends React.Component<Props, State> {
             </div>
         </div>
     )
-    }
-}
+})
 
 export default injectIntl(CommentsList)