decidim-comments 0.23.2 → 0.24.0

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

@@ -1,677 +0,0 @@
-import * as classnames from "classnames";
-import * as React from "react";
-
-import Icon from "../application/icon.component";
-
-import AddCommentForm from "./add_comment_form.component";
-import DownVoteButton from "./down_vote_button.component";
-import UpVoteButton from "./up_vote_button.component";
-
-import {
-  AddCommentFormCommentableFragment,
-  AddCommentFormSessionFragment,
-  CommentFragment
-} from "../support/schema";
-
-import { NetworkStatus } from "apollo-client";
-
-const { I18n } = require("react-i18nify");
-
-interface CommentProps {
-  comment: CommentFragment;
-  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
- * @augments Component
- */
-class Comment extends React.Component<CommentProps, CommentState> {
-  public static defaultProps: any = {
-    articleClassName: "comment",
-    isRootComment: false,
-    session: null,
-    votable: false
-  };
-
-  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 hash = document.location.hash;
-    const regex = new RegExp(`#comment_${id}`);
-
-    function scrollTo(element: Element, to: number, duration: number) {
-      if (duration <= 0) {
-        return;
-      }
-      const difference = to - element.scrollTop;
-      const perTick = (difference / duration) * 10;
-
-      setTimeout(() => {
-        element.scrollTop = element.scrollTop + perTick;
-        if (element.scrollTop === to) {
-          return;
-        }
-        scrollTo(element, to, duration - 10);
-      }, 10);
-    }
-
-    if (regex.test(hash)) {
-      scrollTo(document.body, this.commentNode.offsetTop, 200);
-    }
-
-    if (window.$(document).foundation) {
-      window.$(`#flagModalComment${id}`).foundation();
-    }
-  }
-
-  public getNodeReference = (commentNode: HTMLDivElement) =>
-    (this.commentNode = commentNode)
-
-  public render(): JSX.Element {
-    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 (
-      <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>
-            </div>
-            <div className="author-data__extra">
-              <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>
-        </div>
-        <div className="comment__footer">
-          <div className="comment__actions">
-            {this._renderShowHideThreadButton()}
-            {this._renderReplyButton()}
-          </div>
-          {this._renderVoteButtons()}
-        </div>
-        {this._renderReplies()}
-        {this._renderAdditionalReplyButton()}
-        {this._renderReplyForm()}
-      </div>
-    );
-  }
-
-  private toggleReplyForm = () => {
-    const { showReplyForm } = this.state;
-    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;
-
-    if (author.profilePath === "") {
-      return this._renderAuthor();
-    }
-
-    return <a href={author.profilePath}>{this._renderAuthor()}</a>;
-  }
-
-  /**
-   * Render author information
-   * @private
-   * @returns {DOMElement} - Render all the author information
-   */
-  private _renderAuthor() {
-    const {
-      comment: { author }
-    } = this.props;
-
-    if (author.deleted) {
-      return this._renderDeletedAuthor();
-    }
-
-    return this._renderActiveAuthor();
-  }
-
-  /**
-   * Render deleted author information
-   * @private
-   * @returns {DOMElement} - Render all the author information
-   */
-  private _renderDeletedAuthor() {
-    const {
-      comment: { author }
-    } = this.props;
-
-    return (
-      <div className="author author--inline">
-        <span className="author__avatar">
-          <img src={author.avatarUrl} alt="author-avatar" />
-        </span>
-        <span className="author__name">
-          <span className="label label--small label--basic">
-            {I18n.t("components.comment.deleted_user")}
-          </span>
-        </span>
-      </div>
-    );
-  }
-
-  /**
-   * Render active author information
-   * @private
-   * @returns {DOMElement} - Render all the author information
-   */
-  private _renderActiveAuthor() {
-    const {
-      comment: { author }
-    } = this.props;
-
-    return (
-      <div className="author author--inline">
-        <span className="author__avatar">
-          <img src={author.avatarUrl} alt="author-avatar" />
-        </span>
-        <span className="author__name">{author.name}</span>
-        {author.badge === "" || (
-          <span className="author__badge">
-            <Icon name={`icon-${author.badge}`} />
-          </span>
-        )}
-        <span className="author__nickname">{author.nickname}</span>
-      </div>
-    );
-  }
-
-  /**
-   * Render reply button if user can reply the comment
-   * @private
-   * @returns {Void|DOMElement} - Render the reply button or not if user can reply
-   */
-  private _renderReplyButton() {
-    const {
-      comment: { id, acceptsNewComments, userAllowedToComment },
-      session
-    } = this.props;
-
-    if (session && acceptsNewComments && userAllowedToComment) {
-      return (
-        <button
-          className="comment__reply muted-link"
-          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>
-      );
-    }
-
-    return <span>&nbsp;</span>;
-  }
-
-  /**
-   * Render additional reply button if user can reply the comment at the bottom of a conversation
-   * @private
-   * @returns {Void|DOMElement} - Render the reply button or not if user can reply
-   */
-  private _renderAdditionalReplyButton() {
-    const {
-      comment: { id, acceptsNewComments, hasComments, userAllowedToComment },
-      session,
-      isRootComment
-    } = this.props;
-    const { showReplies } = this.state;
-
-    if (session && acceptsNewComments && userAllowedToComment) {
-      if (hasComments && isRootComment && showReplies) {
-        return (
-          <div className="comment__additionalreply">
-            <button
-              className="comment__reply muted-link"
-              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>
-        );
-      }
-    }
-    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
-   * @returns {Void|DOMElement} - Render the upVote and downVote buttons or not
-   */
-  private _renderVoteButtons() {
-    const { session, comment, votable, rootCommentable, orderBy } = 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}
-          />
-        </div>
-      );
-    }
-
-    return <span>&nbsp;</span>;
-  }
-
-  /**
-   * Render comment's comments alternating the css class
-   * @private
-   * @returns {Void|DomElement} - A wrapper element with comment's comments inside
-   */
-  private _renderReplies() {
-    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") {
-      replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
-    }
-
-    if (hasComments) {
-      return (
-        <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>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render reply form based on the current component state
-   * @private
-   * @returns {Void|ReactElement} - Render the AddCommentForm component or not
-   */
-  private _renderReplyForm() {
-    const { session, comment, rootCommentable, orderBy, commentsMaxLength } = this.props;
-    const { showReplyForm } = this.state;
-    const {
-      comment: { userAllowedToComment }
-    } = this.props;
-
-    if (session && showReplyForm && userAllowedToComment) {
-      return (
-        <AddCommentForm
-          session={session}
-          commentable={comment}
-          showTitle={false}
-          submitButtonClassName="button small hollow"
-          onCommentAdded={this.toggleReplyForm}
-          autoFocus={true}
-          rootCommentable={rootCommentable}
-          orderBy={orderBy}
-          commentsMaxLength={commentsMaxLength}
-        />
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render alignment badge if comment's alignment is 0 or -1
-   * @private
-   * @returns {Void|DOMElement} - The alignment's badge or not
-   */
-  private _renderAlignmentBadge() {
-    const {
-      comment: { alignment }
-    } = this.props;
-    const spanClassName = classnames("label alignment", {
-      success: alignment === 1,
-      alert: alignment === -1
-    });
-
-    let label = "";
-
-    if (alignment === 1) {
-      label = I18n.t("components.comment.alignment.in_favor");
-    } else {
-      label = I18n.t("components.comment.alignment.against");
-    }
-
-    if (alignment === 1 || alignment === -1) {
-      return (
-        <span>
-          <span className={spanClassName}>{label}</span>
-          &nbsp;
-        </span>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render a modal to report the comment.
-   * @private
-   * @return {Void|DOMElement} - The comment's report modal or not.
-   */
-  private _renderFlagModal() {
-    const {
-      session,
-      comment: { id, sgid, alreadyReported, userAllowedToComment }
-    } = this.props;
-    const authenticityToken = this._getAuthenticityToken();
-
-    const closeModal = () => {
-      window.$(`#flagModalComment${id}`).foundation("close");
-    };
-
-    if (session && session.user && userAllowedToComment) {
-      return (
-        <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>
-            <button
-              className="close-button"
-              aria-label={I18n.t("components.comment.report.close")}
-              type="button"
-              onClick={closeModal}
-            >
-              <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>
-            ];
-          })()}
-        </div>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Get Rails authenticity token so we can send requests through the report forms.
-   * @private
-   * @return {string} - The current authenticity token.
-   */
-  private _getAuthenticityToken() {
-    return window.$('meta[name="csrf-token"]').attr("content");
-  }
-}
-
-export default Comment;