2019-05-17 20:21:07 +02:00
|
|
|
// @flow
|
|
|
|
import * as React from 'react';
|
2019-05-21 23:15:37 +02:00
|
|
|
import relativeDate from 'tiny-relative-date';
|
2019-05-17 20:21:07 +02:00
|
|
|
|
|
|
|
type CommentListProps = {
|
|
|
|
comments: {},
|
|
|
|
fetchList: string => void,
|
|
|
|
uri: string,
|
|
|
|
isLoading: boolean,
|
|
|
|
};
|
|
|
|
|
|
|
|
type CommentProps = {
|
|
|
|
commentId: string,
|
|
|
|
claimId: string,
|
|
|
|
author: string,
|
|
|
|
message: string,
|
2019-05-22 20:59:46 +02:00
|
|
|
parentId: number,
|
2019-05-17 20:21:07 +02:00
|
|
|
timePosted: number,
|
|
|
|
};
|
|
|
|
|
|
|
|
class CommentList extends React.PureComponent<CommentListProps> {
|
|
|
|
componentDidMount() {
|
|
|
|
this.fetchComments(this.props);
|
|
|
|
}
|
2019-05-21 23:15:37 +02:00
|
|
|
|
2019-05-17 20:21:07 +02:00
|
|
|
fetchComments = (props: Props) => {
|
|
|
|
const { fetchList, uri } = props;
|
|
|
|
fetchList(uri);
|
|
|
|
};
|
2019-05-21 23:15:37 +02:00
|
|
|
|
2019-05-17 20:21:07 +02:00
|
|
|
render() {
|
|
|
|
const { comments } = this.props;
|
2019-05-21 23:15:37 +02:00
|
|
|
|
2019-05-17 20:21:07 +02:00
|
|
|
if (!comments) {
|
|
|
|
return null;
|
|
|
|
}
|
2019-05-21 23:15:37 +02:00
|
|
|
|
2019-05-17 20:21:07 +02:00
|
|
|
return (
|
2019-05-21 23:15:37 +02:00
|
|
|
<ul className="comments">
|
|
|
|
{comments['comments'].map(comment => {
|
|
|
|
console.log(comment.message);
|
|
|
|
return (
|
|
|
|
<Comment
|
|
|
|
author={comment.author}
|
|
|
|
claimId={comment.claim_id}
|
|
|
|
commentId={comment.comment_id}
|
|
|
|
key={comment.author + comment.comment_id}
|
|
|
|
message={comment.message}
|
2019-05-22 20:59:46 +02:00
|
|
|
parentId={comment.parent_id}
|
2019-05-21 23:15:37 +02:00
|
|
|
timePosted={comment.time_posted}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</ul>
|
2019-05-17 20:21:07 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class Comment extends React.PureComponent<CommentProps> {
|
|
|
|
render() {
|
|
|
|
return (
|
2019-05-22 20:59:46 +02:00
|
|
|
<li className={this.props.parentId ? 'comment reply' : 'comment'}>
|
2019-05-21 23:15:37 +02:00
|
|
|
<div className="comment__meta card__actions--between">
|
2019-05-22 20:59:46 +02:00
|
|
|
<strong>{this.props.author}</strong>
|
|
|
|
<time dateTime={this.props.timePosted}>{relativeDate(this.props.timePosted)}</time>
|
2019-05-21 23:15:37 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="comment__content">{this.props.message}</div>
|
|
|
|
|
|
|
|
<div className="comment__actions card__actions--between">
|
|
|
|
<button className={'button button--primary'}>Reply</button>
|
|
|
|
|
2019-05-22 20:59:46 +02:00
|
|
|
<span className="comment__actions-wrap">
|
|
|
|
<button className="comment__action upvote">Up</button>
|
|
|
|
<button className="comment__action downvote">Down</button>
|
2019-05-21 23:15:37 +02:00
|
|
|
</span>
|
2019-05-17 20:21:07 +02:00
|
|
|
</div>
|
2019-05-21 23:15:37 +02:00
|
|
|
</li>
|
2019-05-17 20:21:07 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default CommentList;
|