decidim-comments 0.19.0 → 0.22.0

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

@@ -50,7 +50,7 @@ describe("<Comment />", () => {
         orderBy={orderBy}
       />
     );
-    expect(wrapper.find("article.comment").exists()).toBeTruthy();
+    expect(wrapper.find(".comment").exists()).toBeTruthy();
   });
 
   it("should render a time tag with comment's created at", () => {

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

@@ -13,13 +13,17 @@ 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;
@@ -28,9 +32,14 @@ interface CommentProps {
 }
 
 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 +53,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 +81,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 +101,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 +194,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 +254,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 +271,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 +295,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 +305,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 +321,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 +350,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 +378,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 +419,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>
       );
     }
@@ -285,6 +452,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
    */
   private _renderReplies() {
     const { comment: { id, hasComments, comments }, session, votable, articleClassName, rootCommentable, orderBy } = this.props;
+    const { showReplies } = this.state;
     let replyArticleClassName = "comment comment--nested";
 
     if (articleClassName === "comment comment--nested") {
@@ -293,7 +461,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
 
     if (hasComments) {
       return (
-        <div>
+        <div id={`comment-${id}-replies`} className={showReplies ? "" : "hide"}>
           {
             comments.map((reply: CommentFragment) => (
               <Comment
@@ -322,7 +490,9 @@ class Comment extends React.Component<CommentProps, CommentState> {
   private _renderReplyForm() {
     const { session, comment, rootCommentable, orderBy } = this.props;
     const { showReplyForm } = this.state;
-    const { comment: { userAllowedToComment  } } = this.props;
+    const {
+      comment: { userAllowedToComment }
+    } = this.props;
 
     if (session && showReplyForm && userAllowedToComment) {
       return (
@@ -348,7 +518,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 +552,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 +564,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 +582,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>
       );
     }