79 lines
2 KiB
React
79 lines
2 KiB
React
|
// @flow
|
||
|
|
import * as React from 'react';
|
||
|
|
|
||
|
|
type CommentListProps = {
|
||
|
|
comments: {},
|
||
|
|
fetchList: string => void,
|
||
|
|
uri: string,
|
||
|
|
isLoading: boolean,
|
||
|
|
};
|
||
|
|
|
||
|
|
type CommentProps = {
|
||
|
|
commentId: string,
|
||
|
|
claimId: string,
|
||
|
|
author: string,
|
||
|
|
message: string,
|
||
|
|
timePosted: number,
|
||
|
|
};
|
||
|
|
|
||
|
|
class CommentList extends React.PureComponent<CommentListProps> {
|
||
|
|
componentDidMount() {
|
||
|
|
this.fetchComments(this.props);
|
||
|
|
}
|
||
|
|
fetchComments = (props: Props) => {
|
||
|
|
const { fetchList, uri } = props;
|
||
|
|
fetchList(uri);
|
||
|
|
};
|
||
|
|
render() {
|
||
|
|
const { comments } = this.props;
|
||
|
|
if (!comments) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
{comments['comments'].map(comment => {
|
||
|
|
console.log(comment.message);
|
||
|
|
return (
|
||
|
|
<li key={comment.author + comment.comment_id}>
|
||
|
|
<Comment
|
||
|
|
commentId={comment.comment_id}
|
||
|
|
claimId={comment.claim_id}
|
||
|
|
author={comment.author}
|
||
|
|
message={comment.message}
|
||
|
|
timePosted={comment.time_posted}
|
||
|
|
/>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Comment extends React.PureComponent<CommentProps> {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<span className="button button--no-style navigation__link card__message">
|
||
|
|
<div className="media__info-text">
|
||
|
|
<div className="card__actions--between">
|
||
|
|
<div>Author: {this.props.author}</div>
|
||
|
|
<div>Date: {this.props.timePosted}</div>
|
||
|
|
</div>
|
||
|
|
<div className="media__subtitle__channel">Message: {this.props.message}</div>
|
||
|
|
<div className="card__actions--between">
|
||
|
|
<button className={'button button--primary'}>Reply</button>
|
||
|
|
<div>
|
||
|
|
<button className={'button button--primary'}>Up</button>
|
||
|
|
<button className={'button button--primary'}>Down</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CommentList;
|