decidim-comments 0.23.2 → 0.24.0

data/app/frontend/application/apollo_client.ts

@@ -1,12 +0,0 @@
-import { InMemoryCache } from "apollo-cache-inmemory";
-import { ApolloClient } from "apollo-client";
-import { HttpLink } from "apollo-link-http";
-
-import "unfetch/polyfill";
-
-const client = new ApolloClient({
-  link: new HttpLink({ uri: "/api", credentials: "same-origin", fetch }),
-  cache: new InMemoryCache()
-});
-
-export default client;

data/app/frontend/application/application.component.test.tsx

@@ -1,23 +0,0 @@
-import { shallow } from "enzyme";
-import * as React from "react";
-
-import Application from "./application.component";
-
-const { I18n } = require("react-i18nify");
-
-describe("<Application />", () => {
-  afterEach(() => {
-    I18n.setLocale("en");
-  });
-
-  it("should set I18n locale to locale prop", () => {
-    spyOn(I18n, "setLocale");
-    const locale = "ca";
-    shallow(
-      <Application locale={locale}>
-        <div>My application</div>
-      </Application>
-    );
-    expect(I18n.setLocale).toHaveBeenCalledWith(locale);
-  });
-});

data/app/frontend/application/application.component.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { ApolloProvider } from "react-apollo";
-
-import apolloClient from "./apollo_client";
-
-const { I18n } = require("react-i18nify");
-
-interface ApplicationProps {
-  locale: string;
-}
-
-/**
- * Wrapper component for all React applications using Apollo
- * @class
- * @augments Component
- */
-export default class Application extends React.Component<ApplicationProps> {
-  constructor(props: ApplicationProps) {
-    const { locale } = props;
-
-    I18n.setLocale(locale);
-
-    super(props);
-  }
-
-  public render() {
-    const { children } = this.props;
-
-    return (
-      <ApolloProvider client={apolloClient}>
-        {children}
-      </ApolloProvider>
-    );
-  }
-}

data/app/frontend/application/icon.component.test.tsx

@@ -1,38 +0,0 @@
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-
-import { Icon } from "./icon.component";
-
-describe("<Icon /", () => {
-  beforeEach(() => {
-    window.DecidimComments = {
-      assets: {
-        "icons.svg": "/assets/icons.svg"
-      }
-    };
-  });
-
-  it("should render a svg with class defined by prop className", () => {
-    const wrapper = shallow(<Icon name="icon-thumb-down" />);
-    expect(wrapper.find("svg.icon-thumb-down").exists()).toBeTruthy();
-  });
-
-  it("should render a svg icon using the 'icons.svg' url and name", () => {
-    const wrapper = shallow(<Icon name="icon-thumb-up" />);
-    expect(wrapper.find("svg use").prop("xlinkHref")).toBe(
-      "/assets/icons.svg#icon-thumb-up"
-    );
-  });
-
-  it("has a default prop iconExtraClassName with value 'icon--before'", () => {
-    const wrapper = mount(<Icon name="icon-thumb-up" />);
-    expect(wrapper.prop("iconExtraClassName")).toBe("icon--before");
-  });
-
-  it("renders the svg with an extra class defined by iconExtraClassName", () => {
-    const wrapper = mount(
-      <Icon name="icon-thumb-up" iconExtraClassName="icon--small" />
-    );
-    expect(wrapper.find(".icon--small").exists()).toBeTruthy();
-  });
-});

data/app/frontend/application/icon.component.tsx

@@ -1,46 +0,0 @@
-import * as React from "react";
-import assetUrl from "../support/asset_url";
-
-interface IconProps {
-  name: string;
-  title?: string;
-  iconExtraClassName?: string;
-  role?: string;
-}
-
-export const Icon: React.SFC<IconProps> = ({ name, title, iconExtraClassName, role = "none presentation" }) => {
-  let titleElement = null;
-  if (title) {
-    titleElement = <title>{title}</title>;
-  }
-
-  return (
-    <svg className={`icon ${iconExtraClassName} ${name}`} role={role}>
-      {titleElement}
-      <use
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        xlinkHref={`${assetUrl("icons.svg")}#${name}`}
-      />
-    </svg>
-  );
-};
-
-Icon.defaultProps = {
-  iconExtraClassName: "icon--before"
-};
-
-interface IconWithoutUserAgentProps {
-  name: string;
-  title?: string;
-  iconExtraClassName?: string;
-  role?: string;
-}
-
-const IconWithoutUserAgent: React.SFC<IconWithoutUserAgentProps> = ({
-  name,
-  title,
-  iconExtraClassName,
-  role = "none presentation"
-}) => <Icon name={name} title={title} iconExtraClassName={iconExtraClassName} role={role} />;
-
-export default IconWithoutUserAgent;

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

@@ -1,265 +0,0 @@
-import { mount, ReactWrapper, shallow } from "enzyme";
-import * as $ from "jquery";
-import * as React from "react";
-
-import { AddCommentForm } from "./add_comment_form.component";
-
-import generateUserData from "../support/generate_user_data";
-import generateUserGroupData from "../support/generate_user_group_data";
-import { loadLocaleTranslations } from "../support/load_translations";
-
-describe("<AddCommentForm commentsMaxLength={commentsMaxLength} />", () => {
-  let session: any = null;
-  const commentsMaxLength: number = 1000;
-  const commentable = {
-    id: "1",
-    type: "Decidim::DummyResources::DummyResource"
-  };
-  const orderBy = "older";
-  const addCommentStub = (): any => {
-    return null;
-  };
-  const context = {locale: undefined, toggleTranslations: undefined};
-
-  beforeEach(() => {
-    loadLocaleTranslations("en");
-    session = {
-      user: generateUserData(),
-      verifiedUserGroups: []
-    };
-    window.DecidimComments = {
-      assets: {
-        "icons.svg": "/assets/icons.svg"
-      }
-    };
-
-    window.$ = $;
-  });
-
-  it("should render a div with class add-comment", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.find("div.add-comment")).toBeDefined();
-  });
-
-  it("should have a reference to body textarea", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect((wrapper.instance() as AddCommentForm).bodyTextArea).toBeDefined();
-  });
-
-  it("should initialize with a state property disabled as true", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.state()).toHaveProperty("disabled", true);
-  });
-
-  it("should have a default prop showTitle as true", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.props()).toHaveProperty("showTitle", true);
-  });
-
-  it("should not render the title if prop showTitle is false", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.find("h4.section-heading").exists()).toBeFalsy();
-  });
-
-  it("should have a default prop submitButtonClassName as 'button button--sc'", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.props()).toHaveProperty("submitButtonClassName", "button button--sc");
-  });
-
-  it("should use prop submitButtonClassName as a className prop for submit button", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.find('button[type="submit"]').hasClass("button")).toBeTruthy();
-    expect(wrapper.find('button[type="submit"]').hasClass("small")).toBeTruthy();
-    expect(wrapper.find('button[type="submit"]').hasClass("hollow")).toBeTruthy();
-  });
-
-  it("should enable the submit button if textarea is not blank", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    wrapper.find("textarea").simulate("change", {
-      target: {
-        value: "This is a comment"
-      }
-    });
-    expect(wrapper.find('button[type="submit"]').props()).not.toHaveProperty("disabled", true);
-  });
-
-  it("should disable the submit button if textarea is blank", () => {
-    const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    wrapper.find("textarea").simulate("change", {
-      target: {
-        value: "This will be deleted"
-      }
-    });
-    wrapper.find("textarea").simulate("change", {
-      target: {
-        value: ""
-      }
-    });
-    expect(wrapper.find('button[type="submit"]').props()).toHaveProperty("disabled", true);
-  });
-
-  it("should not render a div with class 'opinion-toggle'", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.find(".opinion-toggle").exists()).toBeFalsy();
-  });
-
-  it("should render the remaining character count", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-    const commentBody = "This is a new comment!";
-    wrapper.find("textarea").simulate("change", {
-      target: {
-        value: commentBody
-      }
-    });
-    expect(wrapper.find(".remaining-character-count").text()).toContain(commentsMaxLength - commentBody.length);
-  });
-
-  describe("submitting the form", () => {
-    let addComment: jasmine.Spy;
-    let onCommentAdded: jasmine.Spy ;
-    let wrapper: ReactWrapper<any, {}>;
-    let message: any = null;
-
-    beforeEach(() => {
-      addComment = jasmine.createSpy("addComment");
-      onCommentAdded = jasmine.createSpy("onCommentAdded");
-      wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} rootCommentable={commentable} orderBy={orderBy} />);
-      message = "This will be submitted";
-      (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
-    });
-
-    it("should call addComment prop with the textarea value and state property alignment", () => {
-      wrapper.find("form").simulate("submit");
-      expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
-    });
-
-    it("should reset textarea", () => {
-      wrapper.find("form").simulate("submit");
-      expect((wrapper.instance() as AddCommentForm).bodyTextArea.value).toBe("");
-    });
-
-    it("should prevent default form submission", () => {
-      const preventDefault = jasmine.createSpy("preventDefault");
-      wrapper.find("form").simulate("submit", { preventDefault });
-      expect(preventDefault).toHaveBeenCalled();
-    });
-
-    it("should call the prop onCommentAdded function", () => {
-      wrapper.find("form").simulate("submit");
-      expect(onCommentAdded).toHaveBeenCalled();
-    });
-  });
-
-  it("should initialize state with a property alignment and value 0", () => {
-    const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.state()).toHaveProperty("alignment", 0);
-  });
-
-  describe("when receiving an optional prop arguable with value true", () => {
-    it("should render a div with class 'opinion-toggle'", () => {
-      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
-      expect(wrapper.find(".opinion-toggle")).toBeDefined();
-    });
-
-    it("should set state alignment to 1 if user clicks ok button and change its class", () => {
-      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
-      wrapper.find(".opinion-toggle--ok").simulate("click");
-      expect(wrapper.find(".opinion-toggle--ok").hasClass("is-active")).toBeTruthy();
-      expect(wrapper.state()).toHaveProperty("alignment", 1);
-    });
-
-    it("should set state alignment to -11 if user clicks ko button and change its class", () => {
-      const wrapper = shallow(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
-      wrapper.find(".opinion-toggle--ko").simulate("click");
-      expect(wrapper.find(".opinion-toggle--ko").hasClass("is-active")).toBeTruthy();
-      expect(wrapper.state()).toHaveProperty("alignment", -1);
-    });
-
-    describe("submitting the form", () => {
-      let wrapper: ReactWrapper<any, {}>;
-      let addComment: jasmine.Spy;
-      let message: string;
-
-      beforeEach(() => {
-        addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
-        message = "This will be submitted";
-        (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
-      });
-
-      it("should call addComment prop with the state's property alignment", () => {
-        wrapper.find("button.opinion-toggle--ko").simulate("click");
-        wrapper.find("form").simulate("submit");
-        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: -1 }, context);
-      });
-
-      it("should reset the state to its initial state", () => {
-        wrapper.find("button.opinion-toggle--ok").simulate("click");
-        wrapper.find("form").simulate("submit");
-        expect(wrapper.state()).toHaveProperty("alignment", 0);
-      });
-    });
-  });
-
-  describe("when user groups are greater than 0", () => {
-    beforeEach(() => {
-      session.verifiedUserGroups = [
-        generateUserGroupData(),
-        generateUserGroupData()
-      ];
-    });
-
-    it("should have a reference to user_group_id select", () => {
-      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-      expect((wrapper.instance() as AddCommentForm).userGroupIdSelect).toBeDefined();
-    });
-
-    it("should render a select with option tags for each verified user group", () => {
-      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-      expect(wrapper.find("select").children("option").length).toBe(3);
-    });
-
-    describe("submitting the form", () => {
-      let addComment: jasmine.Spy;
-      let wrapper: ReactWrapper<any, {}>;
-      let message: string;
-      let userGroupId: string;
-
-      beforeEach(() => {
-        addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addComment} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-        message = "This will be submitted";
-        userGroupId = session.verifiedUserGroups[1].id;
-        (wrapper.instance() as AddCommentForm).bodyTextArea.value = message;
-        (wrapper.instance() as AddCommentForm).userGroupIdSelect.value = userGroupId;
-      });
-
-      it("should call addComment prop with the body textarea, alignment and user_group_id select values", () => {
-        wrapper.find("form").simulate("submit");
-        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0, userGroupId }, context);
-      });
-
-      describe("when user_group_id is blank", () => {
-        beforeEach(() => {
-          (wrapper.instance() as AddCommentForm).userGroupIdSelect.value = "";
-        });
-
-        it("should call addComment prop with the body textarea and alignment", () => {
-          wrapper.find("form").simulate("submit");
-          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
-        });
-      });
-    });
-  });
-
-  describe("when session is null", () => {
-    beforeEach(() => {
-      session = null;
-    });
-
-    it("display a message to sign in or sign up", () => {
-      const wrapper = mount(<AddCommentForm commentsMaxLength={commentsMaxLength} addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
-      expect(wrapper.find("span").text()).toContain("sign up");
-    });
-  });
-});

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;