Add button to toggle comment is post update

This commit is contained in:
riccardo
2019-10-02 16:43:13 +02:00
parent e8d7fcc359
commit 2c2a0e0c82
12 changed files with 152 additions and 9 deletions

View File

@@ -12,6 +12,7 @@ import friendlyDate from '../../helpers/friendlyDate';
interface Props {
id: number;
body: string;
isPostUpdate: boolean;
userFullName: string;
userEmail: string;
updatedAt: string;
@@ -19,6 +20,7 @@ interface Props {
replyForm: ReplyFormState;
handleToggleCommentReply(): void;
handleCommentReplyBodyChange(e: React.FormEvent): void;
handleToggleIsCommentUpdate(commentId: number, currentIsPostUpdate: boolean): void;
handleSubmitComment(body: string, parentId: number): void;
isLoggedIn: boolean;
@@ -29,6 +31,7 @@ interface Props {
const Comment = ({
id,
body,
isPostUpdate,
userFullName,
userEmail,
updatedAt,
@@ -36,6 +39,7 @@ const Comment = ({
replyForm,
handleToggleCommentReply,
handleCommentReplyBodyChange,
handleToggleIsCommentUpdate,
handleSubmitComment,
isLoggedIn,
@@ -46,17 +50,26 @@ const Comment = ({
<div className="commentHeader">
<Gravatar email={userEmail} size={24} className="gravatar" />
<span className="commentAuthor">{userFullName}</span>
{ isPostUpdate ? <span className="postUpdateBadge">Post update</span> : null }
</div>
<p className="commentBody">{body}</p>
<div className="commentFooter">
<a className="commentReplyButton" onClick={handleToggleCommentReply}>
<a className="commentReplyButton commentLink" onClick={handleToggleCommentReply}>
{ replyForm.isOpen ? 'Cancel' : 'Reply' }
</a>
{
isPowerUser ?
<React.Fragment>
<Separator />
<a
onClick={() => handleToggleIsCommentUpdate(id, isPostUpdate)}
className="commentLink"
>
{ isPostUpdate ? 'No post update' : 'Post update' }
</a>
<Separator />
<a href={`/admin/comments/${id}`} data-turbolinks="false">Edit</a>
</React.Fragment>
:
null

View File

@@ -13,6 +13,7 @@ interface Props {
toggleCommentReply(commentId: number): void;
setCommentReplyBody(commentId: number, body: string): void;
handleToggleIsCommentUpdate(commentId: number, currentIsPostUpdate: boolean): void;
handleSubmitComment(body: string, parentId: number): void;
isLoggedIn: boolean;
@@ -28,6 +29,7 @@ const CommentList = ({
toggleCommentReply,
setCommentReplyBody,
handleToggleIsCommentUpdate,
handleSubmitComment,
isLoggedIn,
@@ -47,6 +49,7 @@ const CommentList = ({
setCommentReplyBody(comment.id, (e.target as HTMLTextAreaElement).value)
)
}
handleToggleIsCommentUpdate={handleToggleIsCommentUpdate}
handleSubmitComment={handleSubmitComment}
{...comment}
@@ -63,6 +66,7 @@ const CommentList = ({
toggleCommentReply={toggleCommentReply}
setCommentReplyBody={setCommentReplyBody}
handleToggleIsCommentUpdate={handleToggleIsCommentUpdate}
handleSubmitComment={handleSubmitComment}
isLoggedIn={isLoggedIn}

View File

@@ -23,6 +23,12 @@ interface Props {
requestComments(postId: number, page?: number): void;
toggleCommentReply(commentId: number): void;
setCommentReplyBody(commentId: number, body: string): void;
toggleCommentIsPostUpdate(
postId: number,
commentId: number,
currentIsPostUpdate: boolean,
authenticityToken: string,
): void;
submitComment(
postId: number,
body: string,
@@ -36,6 +42,15 @@ class CommentsP extends React.Component<Props> {
this.props.requestComments(this.props.postId);
}
_handleToggleIsCommentUpdate = (commentId: number, currentIsPostUpdate: boolean) => {
this.props.toggleCommentIsPostUpdate(
this.props.postId,
commentId,
currentIsPostUpdate,
this.props.authenticityToken,
);
}
_handleSubmitComment = (body: string, parentId: number) => {
this.props.submitComment(
this.props.postId,
@@ -92,6 +107,7 @@ class CommentsP extends React.Component<Props> {
replyForms={replyForms}
toggleCommentReply={toggleCommentReply}
setCommentReplyBody={setCommentReplyBody}
handleToggleIsCommentUpdate={this._handleToggleIsCommentUpdate}
handleSubmitComment={this._handleSubmitComment}
parentId={null}
level={1}