2018-09-10 09:55:26 -07:00
|
|
|
import React from 'react';
|
2018-09-18 15:15:01 -07:00
|
|
|
import { connect } from 'react-redux';
|
2018-09-10 09:55:26 -07:00
|
|
|
import moment from 'moment';
|
2018-09-18 15:15:01 -07:00
|
|
|
import { Button } from 'antd';
|
2018-09-13 14:05:36 -07:00
|
|
|
import Markdown from 'components/Markdown';
|
2018-09-18 15:15:01 -07:00
|
|
|
import Identicon from 'components/Identicon';
|
|
|
|
import MarkdownEditor, { MARKDOWN_TYPE } from 'components/MarkdownEditor';
|
|
|
|
import { postProposalComment } from 'modules/proposals/actions';
|
2018-10-04 21:27:02 -07:00
|
|
|
import { Comment as IComment, Proposal } from 'types';
|
2018-09-18 15:15:01 -07:00
|
|
|
import { AppState } from 'store/reducers';
|
2018-09-22 09:53:22 -07:00
|
|
|
import './style.less';
|
2018-09-10 09:55:26 -07:00
|
|
|
|
2018-09-18 15:15:01 -07:00
|
|
|
interface OwnProps {
|
2018-09-10 09:55:26 -07:00
|
|
|
comment: IComment;
|
2018-09-18 15:15:01 -07:00
|
|
|
proposalId: Proposal['proposalId'];
|
2018-09-10 09:55:26 -07:00
|
|
|
}
|
|
|
|
|
2018-09-18 15:15:01 -07:00
|
|
|
interface StateProps {
|
|
|
|
isPostCommentPending: AppState['proposal']['isPostCommentPending'];
|
|
|
|
postCommentError: AppState['proposal']['postCommentError'];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface DispatchProps {
|
|
|
|
postProposalComment: typeof postProposalComment;
|
|
|
|
}
|
|
|
|
|
|
|
|
type Props = OwnProps & StateProps & DispatchProps;
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
reply: string;
|
|
|
|
isReplying: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
class Comment extends React.Component<Props> {
|
|
|
|
state: State = {
|
|
|
|
reply: '',
|
|
|
|
isReplying: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps: Props) {
|
|
|
|
// TODO: Come up with better check on if our comment post was a success
|
|
|
|
const { isPostCommentPending, postCommentError } = this.props;
|
|
|
|
if (!isPostCommentPending && !postCommentError && prevProps.isPostCommentPending) {
|
|
|
|
this.setState({ reply: '', isReplying: false });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-09-10 09:55:26 -07:00
|
|
|
public render(): React.ReactNode {
|
2018-09-18 15:15:01 -07:00
|
|
|
const { comment, proposalId } = this.props;
|
|
|
|
const { isReplying, reply } = this.state;
|
2018-09-10 09:55:26 -07:00
|
|
|
return (
|
2018-09-22 09:53:22 -07:00
|
|
|
<div className="Comment">
|
|
|
|
<div className="Comment-info">
|
|
|
|
<div className="Comment-info-thumb">
|
2018-09-18 15:15:01 -07:00
|
|
|
<Identicon address={comment.author.accountAddress} />
|
2018-09-22 09:53:22 -07:00
|
|
|
</div>
|
|
|
|
{/* <div className="Comment-info-thumb" src={comment.author.avatar['120x120']} /> */}
|
|
|
|
<div className="Comment-info-name">{comment.author.username}</div>
|
|
|
|
<div className="Comment-info-time">{moment(comment.dateCreated).fromNow()}</div>
|
|
|
|
</div>
|
2018-09-10 09:55:26 -07:00
|
|
|
|
2018-09-22 09:53:22 -07:00
|
|
|
<div className="Comment-body">
|
2018-09-18 15:15:01 -07:00
|
|
|
<Markdown source={comment.body} type={MARKDOWN_TYPE.REDUCED} />
|
2018-09-22 09:53:22 -07:00
|
|
|
</div>
|
2018-09-10 09:55:26 -07:00
|
|
|
|
2018-09-22 09:53:22 -07:00
|
|
|
<div className="Comment-controls">
|
|
|
|
<a className="Comment-controls-button" onClick={this.toggleReply}>
|
2018-09-18 15:15:01 -07:00
|
|
|
{isReplying ? 'Cancel' : 'Reply'}
|
2018-09-22 09:53:22 -07:00
|
|
|
</a>
|
|
|
|
{/*<a className="Comment-controls-button">Report</a>*/}
|
|
|
|
</div>
|
2018-09-10 09:55:26 -07:00
|
|
|
|
2018-09-18 15:15:01 -07:00
|
|
|
{(comment.replies.length || isReplying) && (
|
2018-09-22 09:53:22 -07:00
|
|
|
<div className="Comment-replies">
|
2018-09-18 15:15:01 -07:00
|
|
|
{isReplying && (
|
2018-09-22 09:53:22 -07:00
|
|
|
<div className="Comment-replies-form">
|
2018-09-18 15:15:01 -07:00
|
|
|
<MarkdownEditor
|
|
|
|
onChange={this.handleChangeReply}
|
|
|
|
type={MARKDOWN_TYPE.REDUCED}
|
|
|
|
/>
|
|
|
|
<div style={{ marginTop: '0.5rem' }} />
|
|
|
|
<Button onClick={this.reply} disabled={!reply.length}>
|
|
|
|
Submit reply
|
|
|
|
</Button>
|
2018-09-22 09:53:22 -07:00
|
|
|
</div>
|
2018-09-18 15:15:01 -07:00
|
|
|
)}
|
|
|
|
{comment.replies.map(subComment => (
|
|
|
|
<ConnectedComment
|
|
|
|
key={subComment.commentId}
|
|
|
|
comment={subComment}
|
|
|
|
proposalId={proposalId}
|
|
|
|
/>
|
2018-09-10 09:55:26 -07:00
|
|
|
))}
|
2018-09-22 09:53:22 -07:00
|
|
|
</div>
|
2018-09-10 09:55:26 -07:00
|
|
|
)}
|
2018-09-22 09:53:22 -07:00
|
|
|
</div>
|
2018-09-10 09:55:26 -07:00
|
|
|
);
|
|
|
|
}
|
2018-09-18 15:15:01 -07:00
|
|
|
|
|
|
|
private toggleReply = () => {
|
|
|
|
this.setState({ isReplying: !this.state.isReplying });
|
|
|
|
};
|
|
|
|
|
|
|
|
private handleChangeReply = (reply: string) => {
|
|
|
|
this.setState({ reply });
|
|
|
|
};
|
|
|
|
|
|
|
|
private reply = () => {
|
|
|
|
const { comment, proposalId } = this.props;
|
|
|
|
const { reply } = this.state;
|
|
|
|
this.props.postProposalComment(proposalId, reply, comment.commentId);
|
|
|
|
};
|
2018-09-10 09:55:26 -07:00
|
|
|
}
|
2018-09-18 15:15:01 -07:00
|
|
|
|
|
|
|
const ConnectedComment = connect<StateProps, DispatchProps, OwnProps, AppState>(
|
|
|
|
(state: AppState) => ({
|
|
|
|
isPostCommentPending: state.proposal.isPostCommentPending,
|
|
|
|
postCommentError: state.proposal.postCommentError,
|
|
|
|
}),
|
|
|
|
{
|
|
|
|
postProposalComment,
|
|
|
|
},
|
|
|
|
)(Comment);
|
|
|
|
|
|
|
|
export default ConnectedComment;
|