Mo Elzubeir
67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { translate, Interpolate } from 'react-i18next'
|
|
import TimeAgo from 'timeago-react'
|
|
import { Button } from 'reactstrap'
|
|
|
|
export class ArticleComment extends React.Component {
|
|
static propTypes = {
|
|
article: PropTypes.object.isRequired,
|
|
comment: PropTypes.func.isRequired,
|
|
deleteComment: PropTypes.func.isRequired,
|
|
showCommentPopup: PropTypes.func.isRequired,
|
|
i18n: PropTypes.object.isRequired,
|
|
t: PropTypes.func.isRequired
|
|
}
|
|
|
|
onEdit = () => {
|
|
const { showCommentPopup, article, comment } = this.props
|
|
showCommentPopup(article, comment)
|
|
}
|
|
|
|
onDelete = () => {
|
|
const { deleteComment, article, comment } = this.props
|
|
deleteComment(comment.id, article.id)
|
|
}
|
|
|
|
render() {
|
|
const { comment, i18n } = this.props
|
|
|
|
return (
|
|
<div className="post__comment mt-2">
|
|
<div className="d-flex justify-content-between">
|
|
<div>
|
|
<cite className="post__commentor mr-3">
|
|
<Interpolate
|
|
i18nKey="searchTab.commentMetadata"
|
|
author={`${comment.author.firstName} ${comment.author.lastName}`}
|
|
/>
|
|
</cite>
|
|
<span className="post__cmttime mr-3 text-muted">
|
|
<TimeAgo
|
|
datetime={comment.createdAt}
|
|
locale={i18n.language}
|
|
opts={{ minInterval: 30 }}
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<Button color="link" className="p-0" onClick={this.onEdit}>
|
|
<i className="lnr lnr-pencil"></i>
|
|
</Button>
|
|
<Button color="link" className="ml-2 p-0" onClick={this.onDelete}>
|
|
<i className="lnr lnr-trash"></i>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<p className="post__cmt-content">
|
|
<strong className="d-block mb-1">{comment.title}</strong>
|
|
{comment.content}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default translate(['tabsContent'], { wait: true })(ArticleComment)
|