decidim-comments 0.20.0 → 0.23.1.rc1

data/app/frontend/comments/comment.component.test.tsx

@@ -1,8 +1,8 @@
-import { mount, shallow } from "enzyme";
+import {mount, shallow} from "enzyme";
 import * as $ from "jquery";
 import * as React from "react";
 
-import { CommentFragment } from "../support/schema";
+import {CommentFragment} from "../support/schema";
 import AddCommentForm from "./add_comment_form.component";
 import Comment from "./comment.component";
 import DownVoteButton from "./down_vote_button.component";
@@ -11,13 +11,15 @@ import UpVoteButton from "./up_vote_button.component";
 import generateCommentsData from "../support/generate_comments_data";
 import generateUserData from "../support/generate_user_data";
 
-import { loadLocaleTranslations } from "../support/load_translations";
+import {loadLocaleTranslations} from "../support/load_translations";
 
 describe("<Comment />", () => {
+  const commentsMaxLength: number = 1000;
   const orderBy = "older";
   const rootCommentable = {
     id: "1",
-    type: "Decidim::DummyResources::DummyResource"
+    type: "Decidim::DummyResources::DummyResource",
+    commentsMaxLength: 1000
   };
   let comment: CommentFragment;
   let session: any = null;
@@ -48,9 +50,10 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
-    expect(wrapper.find("article.comment").exists()).toBeTruthy();
+    expect(wrapper.find(".comment").exists()).toBeTruthy();
   });
 
   it("should render a time tag with comment's created at", () => {
@@ -60,6 +63,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("time").prop("dateTime")).toEqual(comment.createdAt);
@@ -72,6 +76,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__name").text()).toEqual(
@@ -86,6 +91,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__nickname").text()).toEqual(
@@ -105,6 +111,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(
@@ -120,6 +127,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".author__avatar img").prop("src")).toEqual(
@@ -134,6 +142,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__content").html()).toContain(
@@ -148,6 +157,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.state()).toHaveProperty("showReplyForm", false);
@@ -160,6 +170,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
@@ -181,6 +192,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -194,6 +206,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -208,6 +221,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeTruthy();
@@ -221,6 +235,7 @@ describe("<Comment />", () => {
         votable={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach((node, idx) => {
@@ -239,6 +254,7 @@ describe("<Comment />", () => {
         articleClassName="comment comment--nested"
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach(node => {
@@ -255,6 +271,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("articleClassName")).toEqual("comment");
@@ -267,6 +284,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("isRootComment")).toBeFalsy();
@@ -284,6 +302,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -302,6 +321,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -314,6 +334,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -328,6 +349,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alignment.label").text()).toEqual("In favor");
@@ -341,6 +363,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alert.label").text()).toEqual("Against");
@@ -353,6 +376,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".flag-modal").exists()).toBeTruthy();
@@ -367,6 +391,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal form").exists()).toBeFalsy();
@@ -382,6 +407,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
@@ -395,6 +421,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
@@ -413,6 +440,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -425,6 +453,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -438,6 +467,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--up").exists()).toBeFalsy();
@@ -451,6 +481,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--down").exists()).toBeFalsy();

data/app/frontend/comments/comment.component.tsx

@@ -13,24 +13,34 @@ import {
   CommentFragment
 } from "../support/schema";
 
+import { NetworkStatus } from "apollo-client";
+
 const { I18n } = require("react-i18nify");
 
 interface CommentProps {
   comment: CommentFragment;
-  session: AddCommentFormSessionFragment & {
-    user: any;
-  } | null;
+  session:
+    | AddCommentFormSessionFragment & {
+        user: any;
+      }
+    | null;
   articleClassName?: string;
   isRootComment?: boolean;
   votable?: boolean;
   rootCommentable: AddCommentFormCommentableFragment;
   orderBy: string;
+  commentsMaxLength: number;
 }
 
 interface CommentState {
+  showReplies: boolean;
   showReplyForm: boolean;
 }
 
+interface Dict {
+  [key: string]: boolean | undefined;
+}
+
 /**
  * A single comment component with the author info and the comment's body
  * @class
@@ -44,18 +54,26 @@ class Comment extends React.Component<CommentProps, CommentState> {
     votable: false
   };
 
-  public commentNode: HTMLElement;
+  public commentNode: HTMLDivElement;
 
   constructor(props: CommentProps) {
     super(props);
 
+    const {
+      comment: { id }
+    } = props;
+    const isThreadHidden = !!this.getThreadsStorage()[id];
+
     this.state = {
+      showReplies: !isThreadHidden,
       showReplyForm: false
     };
   }
 
   public componentDidMount() {
-    const { comment: { id } } = this.props;
+    const {
+      comment: { id }
+    } = this.props;
     const hash = document.location.hash;
     const regex = new RegExp(`#comment_${id}`);
 
@@ -64,14 +82,14 @@ class Comment extends React.Component<CommentProps, CommentState> {
         return;
       }
       const difference = to - element.scrollTop;
-      const perTick = difference / duration * 10;
+      const perTick = (difference / duration) * 10;
 
       setTimeout(() => {
-          element.scrollTop = element.scrollTop + perTick;
-          if (element.scrollTop === to) {
-            return;
-          }
-          scrollTo(element, to, duration - 10);
+        element.scrollTop = element.scrollTop + perTick;
+        if (element.scrollTop === to) {
+          return;
+        }
+        scrollTo(element, to, duration - 10);
       }, 10);
     }
 
@@ -84,46 +102,91 @@ class Comment extends React.Component<CommentProps, CommentState> {
     }
   }
 
-  public getNodeReference = (commentNode: HTMLElement) => this.commentNode = commentNode;
+  public getNodeReference = (commentNode: HTMLDivElement) =>
+    (this.commentNode = commentNode)
 
   public render(): JSX.Element {
-    const { session, comment: { id, author, formattedBody, createdAt, formattedCreatedAt }, articleClassName } = this.props;
+    const {
+      session,
+      comment: { id, author, formattedBody, createdAt, formattedCreatedAt },
+      articleClassName
+    } = this.props;
     let modalName = "loginModal";
 
     if (session && session.user) {
       modalName = `flagModalComment${id}`;
     }
 
+    let singleCommentUrl = `${window.location.pathname}?commentId=${id}`;
+
+    if (window.location.search && window.location.search !== "") {
+      singleCommentUrl = `${
+        window.location.pathname
+      }${window.location.search.replace(/commentId=\d*/gi, `commentId=${id}`)}`;
+    }
+
     return (
-      <article id={`comment_${id}`} className={articleClassName} ref={this.getNodeReference}>
+      <div
+        id={`comment_${id}`}
+        className={articleClassName}
+        ref={this.getNodeReference}
+      >
         <div className="comment__header">
           <div className="author-data">
             <div className="author-data__main">
               {this._renderAuthorReference()}
-              <span><time dateTime={createdAt} title={createdAt}>{formattedCreatedAt}</time></span>
+              <span>
+                <time dateTime={createdAt} title={createdAt}>
+                  {formattedCreatedAt}
+                </time>
+              </span>
             </div>
             <div className="author-data__extra">
-              <button type="button" title={I18n.t("components.comment.report.title")} data-open={modalName}>
-                <Icon name="icon-flag" iconExtraClassName="icon--small" />
+              <button
+                type="button"
+                className="link-alt"
+                title={I18n.t("components.comment.report.title")}
+                data-open={modalName}
+              >
+                <Icon
+                  name="icon-flag"
+                  iconExtraClassName="icon--small"
+                  title={I18n.t("components.comment.report.title")}
+                  role="img"
+                />
               </button>
               {this._renderFlagModal()}
+              <a
+                href={singleCommentUrl}
+                title={I18n.t("components.comment.single_comment_link_title")}
+              >
+                <Icon
+                  name="icon-link-intact"
+                  iconExtraClassName="icon--small"
+                  title={I18n.t("components.comment.single_comment_link_title")}
+                  role="img"
+                />
+              </a>
             </div>
           </div>
         </div>
         <div className="comment__content">
           <div>
             {this._renderAlignmentBadge()}
-            <div dangerouslySetInnerHTML={{__html: formattedBody}} />
+            <div dangerouslySetInnerHTML={{ __html: formattedBody }} />
           </div>
         </div>
         <div className="comment__footer">
-          {this._renderReplyButton()}
+          <div className="comment__actions">
+            {this._renderShowHideThreadButton()}
+            {this._renderReplyButton()}
+          </div>
           {this._renderVoteButtons()}
         </div>
         {this._renderReplies()}
         {this._renderAdditionalReplyButton()}
         {this._renderReplyForm()}
-      </article>
+      </div>
     );
   }
 
@@ -132,13 +195,52 @@ class Comment extends React.Component<CommentProps, CommentState> {
     this.setState({ showReplyForm: !showReplyForm });
   }
 
+  private getThreadsStorage = (): Dict => {
+    const storage: Dict =
+      JSON.parse(localStorage.hiddenCommentThreads || null) || {};
+
+    return storage;
+  }
+
+  private saveThreadsStorage = (id: string, state: boolean) => {
+    const storage = this.getThreadsStorage();
+    storage[parseInt(id, 10)] = state;
+    localStorage.hiddenCommentThreads = JSON.stringify(storage);
+  }
+
+  private toggleReplies = () => {
+    const {
+      comment: { id }
+    } = this.props;
+    const { showReplies } = this.state;
+    const newState = !showReplies;
+
+    this.saveThreadsStorage(id, !newState);
+    this.setState({ showReplies: newState });
+  }
+
+  private countReplies = (comment: CommentFragment): number => {
+    const { comments } = comment;
+
+    if (!comments) {
+      return 0;
+    }
+
+    return (
+      comments.length +
+      comments.map(this.countReplies).reduce((a: number, b: number) => a + b, 0)
+    );
+  }
+
   /**
    * Render author information as a link to author's profile
    * @private
    * @returns {DOMElement} - Render a link with the author information
    */
   private _renderAuthorReference() {
-    const { comment: { author } } = this.props;
+    const {
+      comment: { author }
+    } = this.props;
 
     if (author.profilePath === "") {
       return this._renderAuthor();
@@ -153,7 +255,9 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {DOMElement} - Render all the author information
    */
   private _renderAuthor() {
-    const { comment: { author } } = this.props;
+    const {
+      comment: { author }
+    } = this.props;
 
     if (author.deleted) {
       return this._renderDeletedAuthor();
@@ -168,7 +272,9 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {DOMElement} - Render all the author information
    */
   private _renderDeletedAuthor() {
-    const { comment: { author } } = this.props;
+    const {
+      comment: { author }
+    } = this.props;
 
     return (
       <div className="author author--inline">
@@ -190,7 +296,9 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {DOMElement} - Render all the author information
    */
   private _renderActiveAuthor() {
-    const { comment: { author } } = this.props;
+    const {
+      comment: { author }
+    } = this.props;
 
     return (
       <div className="author author--inline">
@@ -198,11 +306,11 @@ class Comment extends React.Component<CommentProps, CommentState> {
           <img src={author.avatarUrl} alt="author-avatar" />
         </span>
         <span className="author__name">{author.name}</span>
-        { author.badge === "" ||
+        {author.badge === "" || (
           <span className="author__badge">
             <Icon name={`icon-${author.badge}`} />
           </span>
-        }
+        )}
         <span className="author__nickname">{author.nickname}</span>
       </div>
     );
@@ -214,15 +322,21 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   private _renderReplyButton() {
-    const { comment: { acceptsNewComments, userAllowedToComment }, session } = this.props;
+    const {
+      comment: { id, acceptsNewComments, userAllowedToComment },
+      session
+    } = this.props;
 
     if (session && acceptsNewComments && userAllowedToComment) {
       return (
         <button
           className="comment__reply muted-link"
-          aria-controls="comment1-reply"
+          aria-controls={`comment${id}-reply`}
+          data-toggle={`comment${id}-reply`}
           onClick={this.toggleReplyForm}
         >
+          <Icon name="icon-pencil" iconExtraClassName="icon--small" />
+          &nbsp;
           {I18n.t("components.comment.reply")}
         </button>
       );
@@ -237,17 +351,25 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   private _renderAdditionalReplyButton() {
-    const { comment: { acceptsNewComments, hasComments, userAllowedToComment  }, session, isRootComment } = this.props;
+    const {
+      comment: { id, acceptsNewComments, hasComments, userAllowedToComment },
+      session,
+      isRootComment
+    } = this.props;
+    const { showReplies } = this.state;
 
     if (session && acceptsNewComments && userAllowedToComment) {
-      if (hasComments && isRootComment) {
+      if (hasComments && isRootComment && showReplies) {
         return (
           <div className="comment__additionalreply">
             <button
               className="comment__reply muted-link"
-              aria-controls="comment1-reply"
+              aria-controls={`comment${id}-reply`}
+              data-toggle={`comment${id}-reply`}
               onClick={this.toggleReplyForm}
             >
+              <Icon name="icon-pencil" iconExtraClassName="icon--small" />
+              &nbsp;
               {I18n.t("components.comment.reply")}
             </button>
           </div>
@@ -257,6 +379,40 @@ class Comment extends React.Component<CommentProps, CommentState> {
     return null;
   }
 
+  /**
+   * Render show/hide thread button if comment is top-level and has children.
+   * @private
+   * @returns {Void|DOMElement} - Render the reply button or not
+   */
+  private _renderShowHideThreadButton() {
+    const { comment, isRootComment } = this.props;
+    const { id, hasComments } = comment;
+    const { showReplies } = this.state;
+
+    if (hasComments && isRootComment) {
+      return (
+        <button
+          className={`comment__reply muted-link ${
+            showReplies ? "comment__is-open" : ""
+          }`}
+          onClick={this.toggleReplies}
+        >
+          <Icon name="icon-comment-square" iconExtraClassName="icon--small" />
+          &nbsp;
+          <span className="comment__text-is-closed">
+            {I18n.t("components.comment.show_replies", {
+              replies_count: this.countReplies(comment)
+            })}
+          </span>
+          <span className="comment__text-is-open">
+            {I18n.t("components.comment.hide_replies")}
+          </span>
+        </button>
+      );
+    }
+    return null;
+  }
+
   /**
    * Render upVote and downVote buttons when the comment is votable
    * @private
@@ -264,13 +420,25 @@ class Comment extends React.Component<CommentProps, CommentState> {
    */
   private _renderVoteButtons() {
     const { session, comment, votable, rootCommentable, orderBy } = this.props;
-    const { comment: { userAllowedToComment  } } = this.props;
+    const {
+      comment: { userAllowedToComment }
+    } = this.props;
 
     if (votable && userAllowedToComment) {
       return (
         <div className="comment__votes">
-          <UpVoteButton session={session} comment={comment} rootCommentable={rootCommentable} orderBy={orderBy} />
-          <DownVoteButton session={session} comment={comment} rootCommentable={rootCommentable} orderBy={orderBy} />
+          <UpVoteButton
+            session={session}
+            comment={comment}
+            rootCommentable={rootCommentable}
+            orderBy={orderBy}
+          />
+          <DownVoteButton
+            session={session}
+            comment={comment}
+            rootCommentable={rootCommentable}
+            orderBy={orderBy}
+          />
         </div>
       );
     }
@@ -284,7 +452,16 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|DomElement} - A wrapper element with comment's comments inside
    */
   private _renderReplies() {
-    const { comment: { id, hasComments, comments }, session, votable, articleClassName, rootCommentable, orderBy } = this.props;
+    const {
+      comment: { id, hasComments, comments },
+      session,
+      votable,
+      articleClassName,
+      rootCommentable,
+      orderBy,
+      commentsMaxLength
+    } = this.props;
+    const { showReplies } = this.state;
     let replyArticleClassName = "comment comment--nested";
 
     if (articleClassName === "comment comment--nested") {
@@ -293,20 +470,19 @@ class Comment extends React.Component<CommentProps, CommentState> {
 
     if (hasComments) {
       return (
-        <div>
-          {
-            comments.map((reply: CommentFragment) => (
-              <Comment
-                key={`comment_${id}_reply_${reply.id}`}
-                comment={reply}
-                session={session}
-                votable={votable}
-                articleClassName={replyArticleClassName}
-                rootCommentable={rootCommentable}
-                orderBy={orderBy}
-              />
-            ))
-          }
+        <div id={`comment-${id}-replies`} className={showReplies ? "" : "hide"}>
+          {comments.map((reply: CommentFragment) => (
+            <Comment
+              key={`comment_${id}_reply_${reply.id}`}
+              comment={reply}
+              session={session}
+              votable={votable}
+              articleClassName={replyArticleClassName}
+              rootCommentable={rootCommentable}
+              orderBy={orderBy}
+              commentsMaxLength={commentsMaxLength}
+            />
+          ))}
         </div>
       );
     }
@@ -320,9 +496,11 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|ReactElement} - Render the AddCommentForm component or not
    */
   private _renderReplyForm() {
-    const { session, comment, rootCommentable, orderBy } = this.props;
+    const { session, comment, rootCommentable, orderBy, commentsMaxLength } = this.props;
     const { showReplyForm } = this.state;
-    const { comment: { userAllowedToComment  } } = this.props;
+    const {
+      comment: { userAllowedToComment }
+    } = this.props;
 
     if (session && showReplyForm && userAllowedToComment) {
       return (
@@ -335,6 +513,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
           autoFocus={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
     }
@@ -348,7 +527,9 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|DOMElement} - The alignment's badge or not
    */
   private _renderAlignmentBadge() {
-    const { comment: { alignment } } = this.props;
+    const {
+      comment: { alignment }
+    } = this.props;
     const spanClassName = classnames("label alignment", {
       success: alignment === 1,
       alert: alignment === -1
@@ -380,7 +561,10 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @return {Void|DOMElement} - The comment's report modal or not.
    */
   private _renderFlagModal() {
-    const { session, comment: { id, sgid, alreadyReported, userAllowedToComment } } = this.props;
+    const {
+      session,
+      comment: { id, sgid, alreadyReported, userAllowedToComment }
+    } = this.props;
     const authenticityToken = this._getAuthenticityToken();
 
     const closeModal = () => {
@@ -389,9 +573,15 @@ class Comment extends React.Component<CommentProps, CommentState> {
 
     if (session && session.user && userAllowedToComment) {
       return (
-        <div className="reveal flag-modal" id={`flagModalComment${id}`} data-reveal={true}>
+        <div
+          className="reveal flag-modal"
+          id={`flagModalComment${id}`}
+          data-reveal={true}
+        >
           <div className="reveal__header">
-            <h3 className="reveal__title">{I18n.t("components.comment.report.title")}</h3>
+            <h3 className="reveal__title">
+              {I18n.t("components.comment.report.title")}
+            </h3>
             <button
               className="close-button"
               aria-label={I18n.t("components.comment.report.close")}
@@ -401,40 +591,72 @@ class Comment extends React.Component<CommentProps, CommentState> {
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          {
-            (() => {
-              if (alreadyReported) {
-                return (
-                  <p key={`already-reported-comment-${id}`}>{I18n.t("components.comment.report.already_reported")}</p>
-                );
-              }
-              return [
-                <p key={`report-description-comment-${id}`}>{I18n.t("components.comment.report.description")}</p>,
-                (
-                  <form key={`report-form-comment-${id}`} method="post" action={`/report?sgid=${sgid}`}>
-                    <input type="hidden" name="authenticity_token" value={authenticityToken} />
-                    <label htmlFor={`report_comment_${id}_reason_spam`}>
-                      <input type="radio" value="spam" name="report[reason]" id={`report_comment_${id}_reason_spam`} defaultChecked={true} />
-                      {I18n.t("components.comment.report.reasons.spam")}
-                    </label>
-                    <label htmlFor={`report_comment_${id}_reason_offensive`}>
-                      <input type="radio" value="offensive" name="report[reason]" id={`report_comment_${id}_reason_offensive`} />
-                      {I18n.t("components.comment.report.reasons.offensive")}
-                    </label>
-                    <label htmlFor={`report_comment_${id}_reason_does_not_belong`}>
-                      <input type="radio" value="does_not_belong" name="report[reason]" id={`report_comment_${id}_reason_does_not_belong`} />
-                      {I18n.t("components.comment.report.reasons.does_not_belong", { organization_name: session.user.organizationName })}
-                    </label>
-                    <label htmlFor={`report_comment_${id}_details`}>
-                      {I18n.t("components.comment.report.details")}
-                      <textarea rows={4} name="report[details]" id={`report_comment_${id}_details`} />
-                    </label>
-                    <button type="submit" name="commit" className="button">{I18n.t("components.comment.report.action")}</button>
-                  </form>
-                )
-              ];
-            })()
-          }
+          {(() => {
+            if (alreadyReported) {
+              return (
+                <p key={`already-reported-comment-${id}`}>
+                  {I18n.t("components.comment.report.already_reported")}
+                </p>
+              );
+            }
+            return [
+              <p key={`report-description-comment-${id}`}>
+                {I18n.t("components.comment.report.description")}
+              </p>,
+              <form
+                key={`report-form-comment-${id}`}
+                method="post"
+                action={`/report?sgid=${sgid}`}
+              >
+                <input
+                  type="hidden"
+                  name="authenticity_token"
+                  value={authenticityToken}
+                />
+                <label htmlFor={`report_comment_${id}_reason_spam`}>
+                  <input
+                    type="radio"
+                    value="spam"
+                    name="report[reason]"
+                    id={`report_comment_${id}_reason_spam`}
+                    defaultChecked={true}
+                  />
+                  {I18n.t("components.comment.report.reasons.spam")}
+                </label>
+                <label htmlFor={`report_comment_${id}_reason_offensive`}>
+                  <input
+                    type="radio"
+                    value="offensive"
+                    name="report[reason]"
+                    id={`report_comment_${id}_reason_offensive`}
+                  />
+                  {I18n.t("components.comment.report.reasons.offensive")}
+                </label>
+                <label htmlFor={`report_comment_${id}_reason_does_not_belong`}>
+                  <input
+                    type="radio"
+                    value="does_not_belong"
+                    name="report[reason]"
+                    id={`report_comment_${id}_reason_does_not_belong`}
+                  />
+                  {I18n.t("components.comment.report.reasons.does_not_belong", {
+                    organization_name: session.user.organizationName
+                  })}
+                </label>
+                <label htmlFor={`report_comment_${id}_details`}>
+                  {I18n.t("components.comment.report.details")}
+                  <textarea
+                    rows={4}
+                    name="report[details]"
+                    id={`report_comment_${id}_details`}
+                  />
+                </label>
+                <button type="submit" name="commit" className="button">
+                  {I18n.t("components.comment.report.action")}
+                </button>
+              </form>
+            ];
+          })()}
         </div>
       );
     }