luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrating CommentsList to functional component

Browse source
This commit is contained in:
Jesús Espino 2021-03-27 10:30:53 +01:00
parent acfc171fe4
commit 8ea954aa64
1 changed files with 59 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
webapp/src/components/commentsList.tsx
View file

@ -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)