decidim-comments 0.23.0 → 0.24.0.rc1

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

@@ -1,482 +0,0 @@
-/* eslint-disable no-return-assign, react/no-unused-prop-types, max-lines */
-import * as classnames from "classnames";
-import * as React from "react";
-import { graphql } from "react-apollo";
-import * as uuid from "uuid";
-
-const PropTypes = require("prop-types");
-
-import Icon from "../application/icon.component";
-
-const { I18n, Translate } = require("react-i18nify");
-
-import {
-  AddCommentFormCommentableFragment,
-  AddCommentFormSessionFragment,
-  addCommentMutation,
-  CommentFragment,
-  GetCommentsQuery
-} from "../support/schema";
-
-interface AddCommentFormProps {
-  session: AddCommentFormSessionFragment & {
-    user: any;
-  } | null;
-  commentable: AddCommentFormCommentableFragment;
-  rootCommentable: AddCommentFormCommentableFragment;
-  showTitle?: boolean;
-  submitButtonClassName?: string;
-  autoFocus?: boolean;
-  arguable?: boolean;
-  userAllowedToComment?: boolean;
-  addComment?: (data: { body: string, alignment: number, userGroupId?: string }, context: any) => void;
-  onCommentAdded?: () => void;
-  orderBy: string;
-  commentsMaxLength: number;
-}
-
-interface AddCommentFormState {
-  disabled: boolean;
-  error: boolean;
-  alignment: number;
-  remainingCharacterCount: number;
-}
-
-/**
- * Renders a form to create new comments.
- * @class
- * @augments Component
- */
-export class AddCommentForm extends React.Component<AddCommentFormProps, AddCommentFormState> {
-  public static defaultProps = {
-    showTitle: true,
-    submitButtonClassName: "button button--sc",
-    arguable: false,
-    autoFocus: false
-  };
-
-  public static contextTypes: any = {
-    locale: PropTypes.string,
-    toggleTranslations: PropTypes.bool
-  };
-
-  public bodyTextArea: HTMLTextAreaElement;
-  public userGroupIdSelect: HTMLSelectElement;
-
-  constructor(props: AddCommentFormProps) {
-    super(props);
-
-    this.state = {
-      disabled: true,
-      error: false,
-      alignment: 0,
-      remainingCharacterCount: props.commentsMaxLength
-    };
-  }
-
-  public render() {
-    return (
-      <div className="add-comment">
-        {this._renderHeading()}
-        {this._renderAccountMessage()}
-        {this._renderOpinionButtons()}
-        {this._renderForm()}
-      </div>
-    );
-  }
-
-  public componentDidMount() {
-    this._attachMentions();
-  }
-
-  /**
-   * Trick to reuse input_mentions.js logic
-   */
-  private _attachMentions() {
-    window.$(document).trigger("attach-mentions-element", this.bodyTextArea);
-  }
-
-  /**
-   * Render the form heading based on showTitle prop
-   * @private
-   * @returns {Void|DOMElement} - The heading or an empty element
-   */
-  private _renderHeading() {
-    const { showTitle } = this.props;
-
-    if (showTitle) {
-      return (
-        <h4 className="section-heading">
-          {I18n.t("components.add_comment_form.title")}
-        </h4>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render a message telling the user to sign in or sign up to leave a comment.
-   * @private
-   * @returns {Void|DOMElement} - The message or an empty element.
-   */
-  private _renderAccountMessage() {
-    const { session } = this.props;
-
-    if (!session) {
-      return (
-        <p>
-          <Translate
-            value="components.add_comment_form.account_message"
-            sign_in_url="/users/sign_in"
-            sign_up_url="/users/sign_up"
-            dangerousHTML={true}
-          />
-        </p>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render the add comment form if session is present.
-   * @private
-   * @returns {Void|DOMElement} - The add comment form on an empty element.
-   */
-  private _renderForm() {
-    const { session, submitButtonClassName, commentable: { id, type } } = this.props;
-    const { disabled, remainingCharacterCount } = this.state;
-
-    if (session) {
-      return (
-        <form onSubmit={this.addComment}>
-          {this._renderCommentAs()}
-          <div className="field">
-            <label className="show-for-sr" htmlFor={`add-comment-${type}-${id}`}>{I18n.t("components.add_comment_form.form.body.label")}</label>
-            <div className="hashtags__container">
-              {this._renderTextArea()}
-            </div>
-            {this._renderTextAreaError()}
-            <button
-              type="submit"
-              className={submitButtonClassName}
-              disabled={disabled}
-            >
-              {I18n.t("components.add_comment_form.form.submit")}
-            </button>
-            <span className="remaining-character-count">
-              {I18n.t("components.add_comment_form.remaining_characters", { count:  remainingCharacterCount })}
-            </span>
-          </div>
-        </form>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Render the form heading based on showTitle prop
-   * @private
-   * @returns {Void|DOMElement} - The heading or an empty element
-   */
-  private _renderTextArea() {
-    const { commentable: { id, type }, autoFocus, commentsMaxLength } = this.props;
-    const { error } = this.state;
-    const className = classnames({ "is-invalid-input": error });
-
-    const textAreaProps: any = {
-      ref: (textarea: HTMLTextAreaElement) => {this.bodyTextArea = textarea; },
-      id: `add-comment-${type}-${id}`,
-      className,
-      rows: "4",
-      maxLength: commentsMaxLength,
-      required: "required",
-      pattern: `^(.){0,${commentsMaxLength}}$`,
-      placeholder: I18n.t("components.add_comment_form.form.body.placeholder"),
-      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value, commentsMaxLength as number)
-    };
-
-    if (autoFocus) {
-      textAreaProps.autoFocus = "autoFocus";
-    }
-
-    return (
-      <textarea {...textAreaProps} />
-    );
-  }
-
-  /**
-   * Render the text area form error if state has an error
-   * @private
-   * @returns {Void|DOMElement} - The error or an empty element
-   */
-  private _renderTextAreaError() {
-    const { commentsMaxLength } = this.props;
-    const { error } = this.state;
-
-    if (error) {
-      return (
-        <span className="form-error is-visible">
-          {I18n.t("components.add_comment_form.form.form_error", { length: commentsMaxLength })}
-        </span>
-      );
-    }
-
-    return null;
-  }
-
-  private setAlignment = (alignment: number) => {
-    return () => {
-      this.setState({ alignment });
-    };
-  }
-
-  /**
-   * Render opinion buttons or not based on the arguable prop
-   * @private
-   * @returns {Void|DOMElement} - Returns nothing or a wrapper with buttons
-   */
-  private _renderOpinionButtons() {
-    const { session, arguable } = this.props;
-    const { alignment } = this.state;
-    const buttonClassName = classnames("button", "tiny", "button--muted");
-    const okButtonClassName = classnames(buttonClassName, "opinion-toggle--ok", {
-      "is-active": alignment === 1
-    });
-    const koButtonClassName = classnames(buttonClassName, "opinion-toggle--ko", {
-      "is-active": alignment === -1
-    });
-    const neutralButtonClassName = classnames(buttonClassName, "opinion-toggle--meh", {
-      "is-active": alignment === 0
-    });
-
-    if (session && arguable) {
-      return (
-        <div className="opinion-toggle button-group">
-          <button
-            className={okButtonClassName}
-            onClick={this.setAlignment(1)}
-          >
-            <Icon iconExtraClassName="" name="icon-thumb-up" />
-          </button>
-          <button
-            className={neutralButtonClassName}
-            onClick={this.setAlignment(0)}
-          >
-            {I18n.t("components.add_comment_form.opinion.neutral")}
-          </button>
-          <button
-            className={koButtonClassName}
-            onClick={this.setAlignment(-1)}
-          >
-            <Icon iconExtraClassName="" name="icon-thumb-down" />
-          </button>
-        </div>
-      );
-    }
-
-    return null;
-  }
-
-  private setUserGroupIdSelect = (select: HTMLSelectElement) => {this.userGroupIdSelect = select; };
-
-  /**
-   * Render a select with an option for each user's verified group
-   * @private
-   * @returns {Void|DOMElement} - Returns nothing or a form field.
-   */
-  private _renderCommentAs() {
-    const { session, commentable: { id, type } } = this.props;
-
-    if (session) {
-      const { user, verifiedUserGroups } = session;
-
-      if (verifiedUserGroups.length > 0) {
-        return (
-          <div className="field">
-            <label htmlFor={`add-comment-${type}-${id}-user-group-id`}>
-              {I18n.t("components.add_comment_form.form.user_group_id.label")}
-            </label>
-            <select
-              ref={this.setUserGroupIdSelect}
-              id={`add-comment-${type}-${id}-user-group-id`}
-            >
-              <option value="">{user.name}</option>
-              {
-                verifiedUserGroups.map((userGroup) => (
-                  <option key={userGroup.id} value={userGroup.id}>{userGroup.name}</option>
-                ))
-              }
-            </select>
-          </div>
-        );
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Check comment's body and disable form if it's empty
-   * @private
-   * @param {string} body - The comment's body
-   * @returns {Void} - Returns nothing
-   */
-  private _checkCommentBody(body: string, commentsMaxLength: number) {
-    this.setState({
-      disabled: body === "", error: body === "" || body.length > commentsMaxLength,
-      remainingCharacterCount: commentsMaxLength - body.length
-    });
-  }
-
-  /**
-   * Handle form's submission and calls `addComment` prop with the value of the
-   * form's textarea. It prevents the default form submission event.
-   * @private
-   * @param {DOMEvent} evt - The form's submission event
-   * @returns {Void} - Returns nothing
-   */
-  private addComment = (evt: React.FormEvent<HTMLFormElement>) => {
-    const { alignment } = this.state;
-    const { addComment, onCommentAdded } = this.props;
-    const addCommentParams: { body: string, alignment: number, userGroupId?: string } = { body: this.bodyTextArea.value, alignment };
-
-    evt.preventDefault();
-
-    if (this.userGroupIdSelect && this.userGroupIdSelect.value !== "") {
-      addCommentParams.userGroupId = this.userGroupIdSelect.value;
-    }
-
-    if (addComment) {
-      addComment(addCommentParams, this.context);
-    }
-
-    this.bodyTextArea.value = "";
-    this.setState({ alignment: 0 });
-
-    if (onCommentAdded) {
-      onCommentAdded();
-    }
-  }
-}
-
-const addCommentMutation = require("../mutations/add_comment.mutation.graphql");
-const getCommentsQuery = require("../queries/comments.query.graphql");
-
-const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormProps>(addCommentMutation, {
-  props: ({ ownProps, mutate }) => ({
-    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }, { locale, toggleTranslations }: any) => {
-      if (mutate) {
-        mutate({
-          variables: {
-            locale,
-            toggleTranslations,
-            commentableId: ownProps.commentable.id,
-            commentableType: ownProps.commentable.type,
-            body,
-            alignment,
-            userGroupId
-          },
-          optimisticResponse: {
-            commentable: {
-              __typename: "CommentableMutation",
-              addComment: {
-                __typename: "Comment",
-                id: uuid(),
-                sgid: uuid(),
-                type: "Decidim::Comments::Comment",
-                createdAt: new Date().toISOString(),
-                body,
-                formattedBody: body,
-                formattedCreatedAt: new Date().toISOString(),
-                alignment,
-                author: {
-                  __typename: "User",
-                  name: ownProps.session && ownProps.session.user.name,
-                  nickname: ownProps.session && ownProps.session.user.name,
-                  profilePath: null,
-                  badge: null,
-                  avatarUrl: ownProps.session && ownProps.session.user.avatarUrl,
-                  deleted: false
-                },
-                comments: [],
-                hasComments: false,
-                acceptsNewComments: false,
-                userAllowedToComment: false,
-                upVotes: 0,
-                upVoted: false,
-                downVotes: 0,
-                downVoted: false,
-                alreadyReported: false
-              }
-            }
-          },
-          update: (store, { data }: { data: addCommentMutation }) => {
-            const variables = {
-              locale,
-              toggleTranslations,
-              commentableId: ownProps.rootCommentable.id,
-              commentableType: ownProps.rootCommentable.type,
-              orderBy: ownProps.orderBy,
-              singleCommentId: null
-            };
-            const prev = store.readQuery<GetCommentsQuery>({
-              query: getCommentsQuery,
-              variables
-            });
-            const { id, type } = ownProps.commentable;
-            const newComment = data.commentable && data.commentable.addComment;
-            let comments = [];
-
-            const commentReducer = (comment: CommentFragment): CommentFragment => {
-              const replies = comment.comments || [];
-
-              if (newComment && comment.id === id) {
-                return {
-                  ...comment,
-                  hasComments: true,
-                  comments: [
-                    ...replies,
-                    newComment
-                  ]
-                };
-              }
-              return {
-                ...comment,
-                comments: replies.map(commentReducer)
-              };
-            };
-
-            if (prev) {
-              if (type === "Decidim::Comments::Comment") {
-                  comments = prev.commentable.comments.map(commentReducer);
-                } else {
-                  comments = [
-                    ...prev.commentable.comments,
-                    newComment
-                  ];
-                }
-
-              store.writeQuery({
-                query: getCommentsQuery,
-                data: {
-                  ...prev,
-                  commentable: {
-                    ...prev.commentable,
-                    totalCommentsCount: prev.commentable.totalCommentsCount + 1,
-                    comments
-                  }
-                },
-                variables
-              });
-            }
-          }
-        });
-      }
-    }
-  })
-})(AddCommentForm);
-
-export default AddCommentFormWithMutation;