decidim-comments 0.0.6 → 0.0.7

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import assetUrl   from "../support/asset_url";
+
+interface IconProps {
+  name: string;
+  userAgent: string;
+  iconExtraClassName?: string;
+}
+
+export const Icon: React.SFC<IconProps> = ({ name, userAgent, iconExtraClassName }) => {
+  if (userAgent.match(/PhantomJS/) || userAgent.match(/Node/)) {
+    return <span className={`icon ${iconExtraClassName} ${name}`}>{name}</span>;
+  }
+
+  return (
+    <svg className={`icon ${iconExtraClassName} ${name}`}>
+      <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`${assetUrl("icons.svg")}#${name}`} />
+    </svg>
+  );
+};
+
+Icon.defaultProps = {
+  iconExtraClassName: "icon--before",
+};
+
+interface IconWithoutUserAgentProps {
+  name: string;
+  iconExtraClassName?: string;
+}
+
+const IconWithoutUserAgent: React.SFC<IconWithoutUserAgentProps> = ({ name, iconExtraClassName }) => (
+  <Icon name={name} userAgent={navigator.userAgent} iconExtraClassName={iconExtraClassName} />
+);
+
+export default IconWithoutUserAgent;

data/app/frontend/comments/{add_comment_form.component.test.jsx → add_comment_form.component.test.tsx}

@@ -1,184 +1,190 @@
-/* eslint-disable no-unused-expressions */
-import { shallow, mount }    from 'enzyme';
+import { mount, ReactWrapper, shallow } from "enzyme";
+import * as React from "react";
 
-import { AddCommentForm }    from './add_comment_form.component';
+import { AddCommentForm } from "./add_comment_form.component";
 
-import generateUserData      from '../support/generate_user_data';
-import generateUserGroupData from '../support/generate_user_group_data';
+import generateUserData from "../support/generate_user_data";
+import generateUserGroupData from "../support/generate_user_group_data";
+import { loadLocaleTranslations } from "../support/load_translations";
 
 describe("<AddCommentForm />", () => {
-  let session = null;
+  let session: any = null;
   const commentable = {
     id: "1",
-    type: "Decidim::DummyResource"
+    type: "Decidim::DummyResource",
   };
-  const addCommentStub = () => {
+  const addCommentStub = (): any => {
     return null;
-  }
+  };
 
   beforeEach(() => {
+    loadLocaleTranslations("en");
     session = {
       user: generateUserData(),
-      verifiedUserGroups: []
+      verifiedUserGroups: [],
+    };
+    window.DecidimComments = {
+      assets: {
+        "icons.svg": "/assets/icons.svg",
+      },
     };
   });
 
   it("should render a div with class add-comment", () => {
     const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper.find('div.add-comment')).to.present();
+    expect(wrapper.find("div.add-comment")).toBeDefined();
   });
 
   it("should have a reference to body textarea", () => {
     const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper.instance().bodyTextArea).to.be.ok;
+    expect((wrapper.instance() as AddCommentForm).bodyTextArea).toBeDefined();
   });
 
   it("should initialize with a state property disabled as true", () => {
     const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper).to.have.state('disabled', true);
+    expect(wrapper.state()).toHaveProperty("disabled", true);
   });
 
   it("should have a default prop showTitle as true", () => {
     const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper).to.have.prop('showTitle').equal(true);
+    expect(wrapper.props()).toHaveProperty("showTitle", true);
   });
 
   it("should not render the title if prop showTitle is false", () => {
     const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} />);
-    expect(wrapper.find('h5.section-heading')).not.to.be.present();
+    expect(wrapper.find("h5.section-heading").exists()).toBeFalsy();
   });
 
   it("should have a default prop submitButtonClassName as 'button button--sc'", () => {
     const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper).to.have.prop('submitButtonClassName').equal('button button--sc');
+    expect(wrapper.props()).toHaveProperty("submitButtonClassName", "button button--sc");
   });
 
   it("should have a default prop maxLength of 1000", () => {
     const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper).to.have.prop('maxLength').equal(1000);
+    expect(wrapper.props()).toHaveProperty("maxLength", 1000);
   });
 
-
   it("should use prop submitButtonClassName as a className prop for submit button", () => {
     const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" />);
-    expect(wrapper.find('button[type="submit"]')).to.have.className('button');
-    expect(wrapper.find('button[type="submit"]')).to.have.className('small');
-    expect(wrapper.find('button[type="submit"]')).to.have.className('hollow');
+    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 addComment={addCommentStub} session={session} commentable={commentable} />);
-    wrapper.find('textarea').simulate('change', {
+    wrapper.find("textarea").simulate("change", {
       target: {
-        value: 'This is a comment'
-      }
+        value: "This is a comment",
+      },
     });
-    expect(wrapper.find('button[type="submit"]')).not.to.be.disabled();
+    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 addComment={addCommentStub} session={session} commentable={commentable} />);
-    wrapper.find('textarea').simulate('change', {
+    wrapper.find("textarea").simulate("change", {
       target: {
-        value: 'This will be deleted'
-      }
+        value: "This will be deleted",
+      },
     });
-    wrapper.find('textarea').simulate('change', {
+    wrapper.find("textarea").simulate("change", {
       target: {
-        value: ''
-      }
+        value: "",
+      },
     });
-    expect(wrapper.find('button[type="submit"]')).to.be.disabled();
+    expect(wrapper.find('button[type="submit"]').props()).toHaveProperty("disabled", true);
   });
 
   it("should not render a div with class 'opinion-toggle'", () => {
     const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-    expect(wrapper.find('.opinion-toggle')).not.to.be.present();
+    expect(wrapper.find(".opinion-toggle").exists()).toBeFalsy();
   });
 
   describe("submitting the form", () => {
-    let addComment = null;
-    let onCommentAdded = null;
-    let wrapper = null;
-    let message = null;
+    let addComment: jasmine.Spy;
+    let onCommentAdded: jasmine.Spy ;
+    let wrapper: ReactWrapper<any, {}>;
+    let message: any = null;
 
     beforeEach(() => {
-      addComment = sinon.spy();
-      onCommentAdded = sinon.spy();
+      addComment = jasmine.createSpy("addComment");
+      onCommentAdded = jasmine.createSpy("onCommentAdded");
       wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} />);
-      message = 'This will be submitted';
-      wrapper.instance().bodyTextArea.value = message;
+      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).to.calledWith({ body: message, alignment: 0 });
+      wrapper.find("form").simulate("submit");
+      expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 });
     });
 
     it("should reset textarea", () => {
-      wrapper.find('form').simulate('submit');
-      expect(wrapper.find('textarea')).to.have.value('');
+      wrapper.find("form").simulate("submit");
+      expect((wrapper.find("textarea").get(0) as any).value).toBe("");
     });
 
     it("should prevent default form submission", () => {
-      const preventDefault = sinon.spy();
-      wrapper.find('form').simulate('submit', { preventDefault });
-      expect(preventDefault).to.have.been.called;
+      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).to.have.been.called;
+      wrapper.find("form").simulate("submit");
+      expect(onCommentAdded).toHaveBeenCalled();
     });
   });
 
   it("should initialize state with a property alignment and value 0", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable />);
-    expect(wrapper).to.have.state('alignment').equal(0);
+    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} arguable />);
-      expect(wrapper.find('.opinion-toggle')).to.be.present();
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} />);
+      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 addComment={addCommentStub} session={session} commentable={commentable} arguable />);
-      wrapper.find('.opinion-toggle--ok').simulate('click');
-      expect(wrapper.find('.opinion-toggle--ok')).to.have.className('is-active');
-      expect(wrapper).to.have.state('alignment').equal(1);
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} />);
+      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 addComment={addCommentStub} session={session} commentable={commentable} arguable />);
-      wrapper.find('.opinion-toggle--ko').simulate('click');
-      expect(wrapper.find('.opinion-toggle--ko')).to.have.className('is-active');
-      expect(wrapper).to.have.state('alignment').equal(-1);
+      const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} />);
+      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 addComment = null;
-      let wrapper = null;
-      let message = null;
+      let wrapper: ReactWrapper<any, {}>;
+      let addComment: jasmine.Spy;
+      let message: string;
 
       beforeEach(() => {
-        addComment = sinon.spy();
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable />);
-        message = 'This will be submitted';
-        wrapper.instance().bodyTextArea.value = message;
+        addComment = jasmine.createSpy("addComment");
+        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable={true} />);
+        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).to.calledWith({ body: message, alignment: -1 });
+        wrapper.find("button.opinion-toggle--ko").simulate("click");
+        wrapper.find("form").simulate("submit");
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: -1 });
       });
 
       it("should reset the state to its initial state", () => {
-        wrapper.find('button.opinion-toggle--ok').simulate('click');
-        wrapper.find('form').simulate('submit');
-        expect(wrapper).to.have.state('alignment').eq(0);
+        wrapper.find("button.opinion-toggle--ok").simulate("click");
+        wrapper.find("form").simulate("submit");
+        expect(wrapper.state()).toHaveProperty("alignment", 0);
       });
     });
   });
@@ -187,48 +193,48 @@ describe("<AddCommentForm />", () => {
     beforeEach(() => {
       session.verifiedUserGroups = [
         generateUserGroupData(),
-        generateUserGroupData()
+        generateUserGroupData(),
       ];
     });
 
     it("should have a reference to user_group_id select", () => {
       const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-      expect(wrapper.instance().userGroupIdSelect).to.be.ok;
+      expect((wrapper.instance() as AddCommentForm).userGroupIdSelect).toBeDefined();
     });
 
     it("should render a select with option tags for each verified user group", () => {
       const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-      expect(wrapper.find('select')).to.have.exactly(3).descendants('option');
+      expect(wrapper.find("select").children("option").length).toBe(3);
     });
 
     describe("submitting the form", () => {
-      let addComment = null;
-      let wrapper = null;
-      let message = null;
-      let userGroupId = null;
+      let addComment: jasmine.Spy;
+      let wrapper: ReactWrapper<any, {}>;
+      let message: string;
+      let userGroupId: string;
 
       beforeEach(() => {
-        addComment = sinon.spy();
+        addComment = jasmine.createSpy("addComment");
         wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} />);
-        message = 'This will be submitted';
+        message = "This will be submitted";
         userGroupId = session.verifiedUserGroups[1].id;
-        wrapper.instance().bodyTextArea.value = message;
-        wrapper.instance().userGroupIdSelect.value = userGroupId;
+        (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).to.calledWith({ body: message, alignment: 0, userGroupId });
+        wrapper.find("form").simulate("submit");
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0, userGroupId });
       });
 
       describe("when user_group_id is blank", () => {
         beforeEach(() => {
-          wrapper.instance().userGroupIdSelect.value = '';
+          (wrapper.instance() as AddCommentForm).userGroupIdSelect.value = "";
         });
 
         it("should call addComment prop with the body textarea and alignment", () => {
-          wrapper.find('form').simulate('submit');
-          expect(addComment).to.calledWith({ body: message, alignment: 0 });
+          wrapper.find("form").simulate("submit");
+          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 });
         });
       });
     });
@@ -241,7 +247,7 @@ describe("<AddCommentForm />", () => {
 
     it("display a message to sign in or sign up", () => {
       const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} />);
-      expect(wrapper.find('span')).to.include.text("sign up");
+      expect(wrapper.find("span").text()).toContain("sign up");
     });
   });
 });

data/app/frontend/comments/{add_comment_form.component.jsx → add_comment_form.component.tsx}

@@ -1,39 +1,69 @@
 /* eslint-disable no-return-assign, react/no-unused-prop-types, max-lines */
-import { Component, PropTypes }          from 'react';
-import { graphql }                       from 'react-apollo';
-import gql                               from 'graphql-tag';
-import { I18n, Translate }               from 'react-i18nify';
-import uuid                              from 'uuid';
-import classnames                        from 'classnames';
-
-import Icon                              from '../application/icon.component';
-
-import addCommentMutation                from './add_comment_form.mutation.graphql';
-import commentThreadFragment             from './comment_thread.fragment.graphql'
-import commentFragment                   from './comment.fragment.graphql';
-import commentDataFragment               from './comment_data.fragment.graphql';
-import upVoteFragment                    from './up_vote.fragment.graphql';
-import downVoteFragment                  from './down_vote.fragment.graphql';
-import addCommentFormSessionFragment     from './add_comment_form_session.fragment.graphql';
-import addCommentFormCommentableFragment from './add_comment_form_commentable.fragment.graphql';
+import * as classnames                   from "classnames";
+import * as React                        from "react";
+import { graphql }                       from "react-apollo";
+import * as uuid                         from "uuid";
+
+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;
+  showTitle?: boolean;
+  submitButtonClassName?: string;
+  autoFocus?: boolean;
+  maxLength?: number;
+  arguable?: boolean;
+  addComment?: (data: { body: string, alignment: number, userGroupId?: string }) => void;
+  onCommentAdded?: () => void;
+}
+
+interface AddCommentFormState {
+  disabled: boolean;
+  error: boolean;
+  alignment: number;
+}
 
 /**
  * Renders a form to create new comments.
  * @class
  * @augments Component
  */
-export class AddCommentForm extends Component {
-  constructor(props) {
+export class AddCommentForm extends React.Component<AddCommentFormProps, AddCommentFormState> {
+  public static defaultProps = {
+    showTitle: true,
+    submitButtonClassName: "button button--sc",
+    arguable: false,
+    autoFocus: false,
+    maxLength: 1000,
+  };
+
+  public bodyTextArea: HTMLTextAreaElement;
+  public userGroupIdSelect: HTMLSelectElement;
+
+  constructor(props: AddCommentFormProps) {
     super(props);
 
     this.state = {
       disabled: true,
       error: false,
-      alignment: 0
+      alignment: 0,
     };
   }
 
-  render() {
+  public render() {
     return (
       <div className="add-comment">
         {this._renderHeading()}
@@ -49,13 +79,13 @@ export class AddCommentForm extends Component {
    * @private
    * @returns {Void|DOMElement} - The heading or an empty element
    */
-  _renderHeading() {
+  private _renderHeading() {
     const { showTitle } = this.props;
 
     if (showTitle) {
       return (
         <h5 className="section-heading">
-          { I18n.t("components.add_comment_form.title") }
+          {I18n.t("components.add_comment_form.title")}
         </h5>
       );
     }
@@ -68,7 +98,7 @@ export class AddCommentForm extends Component {
    * @private
    * @returns {Void|DOMElement} - The message or an empty element.
    */
-  _renderAccountMessage() {
+  private _renderAccountMessage() {
     const { session } = this.props;
 
     if (!session) {
@@ -78,7 +108,7 @@ export class AddCommentForm extends Component {
             value="components.add_comment_form.account_message"
             sign_in_url="/users/sign_in"
             sign_up_url="/users/sign_up"
-            dangerousHTML
+            dangerousHTML={true}
           />
         </p>
       );
@@ -92,21 +122,23 @@ export class AddCommentForm extends Component {
    * @private
    * @returns {Void|DOMElement} - The add comment form on an empty element.
    */
-  _renderForm() {
+  private _renderForm() {
     const { session, submitButtonClassName, commentable: { id, type } } = this.props;
     const { disabled } = this.state;
 
     if (session) {
       return (
-        <form onSubmit={(evt) => this._addComment(evt)}>
+        <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>
+            <label className="show-for-sr" htmlFor={`add-comment-${type}-${id}`}>{I18n.t("components.add_comment_form.form.body.label")}</label>
             {this._renderTextArea()}
             {this._renderTextAreaError()}
-            <button type="submit"
-                    className={submitButtonClassName}
-                    disabled={disabled}>
+            <button
+              type="submit"
+              className={submitButtonClassName}
+              disabled={disabled}
+            >
               {I18n.t("components.add_comment_form.form.submit")}
             </button>
           </div>
@@ -122,13 +154,13 @@ export class AddCommentForm extends Component {
    * @private
    * @returns {Void|DOMElement} - The heading or an empty element
    */
-  _renderTextArea() {
+  private _renderTextArea() {
     const { commentable: { id, type }, autoFocus, maxLength } = this.props;
     const { error } = this.state;
-    const className = classnames({ 'is-invalid-input': error });
+    const className = classnames({ "is-invalid-input": error });
 
-    let textAreaProps = {
-      ref: (textarea) => {this.bodyTextArea = textarea},
+    let textAreaProps: any = {
+      ref: (textarea: HTMLTextAreaElement) => {this.bodyTextArea = textarea; },
       id: `add-comment-${type}-${id}`,
       className,
       rows: "4",
@@ -136,10 +168,11 @@ export class AddCommentForm extends Component {
       required: "required",
       pattern: `^(.){0,${maxLength}}$`,
       placeholder: I18n.t("components.add_comment_form.form.body.placeholder"),
-      onChange: (evt) => this._checkCommentBody(evt.target.value)
+      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value),
     };
+
     if (autoFocus) {
-      textAreaProps.autoFocus = 'autoFocus';
+      textAreaProps.autoFocus = "autoFocus";
     }
 
     return (
@@ -152,14 +185,14 @@ export class AddCommentForm extends Component {
    * @private
    * @returns {Void|DOMElement} - The error or an empty element
    */
-  _renderTextAreaError() {
+  private _renderTextAreaError() {
     const { maxLength } = 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: maxLength }) }
+          {I18n.t("components.add_comment_form.form.form_error", { length: maxLength })}
         </span>
       );
     }
@@ -167,23 +200,29 @@ export class AddCommentForm extends Component {
     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
    */
-  _renderOpinionButtons() {
+  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 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 koButtonClassName = classnames(buttonClassName, "opinion-toggle--ko", {
+      "is-active": alignment === -1,
     });
-    const neutralButtonClassName = classnames(buttonClassName, 'opinion-toggle--meh', {
-      'is-active': alignment === 0
+    const neutralButtonClassName = classnames(buttonClassName, "opinion-toggle--meh", {
+      "is-active": alignment === 0,
     });
 
     if (session && arguable) {
@@ -191,19 +230,19 @@ export class AddCommentForm extends Component {
         <div className="opinion-toggle button-group">
           <button
             className={okButtonClassName}
-            onClick={() => this.setState({ alignment: 1 })}
+            onClick={this.setAlignment(1)}
           >
             <Icon iconExtraClassName="" name="icon-thumb-up" />
           </button>
           <button
             className={neutralButtonClassName}
-            onClick={() => this.setState({ alignment: 0 })}
+            onClick={this.setAlignment(0)}
           >
-            { I18n.t("components.add_comment_form.opinion.neutral") }
+            {I18n.t("components.add_comment_form.opinion.neutral")}
           </button>
           <button
             className={koButtonClassName}
-            onClick={() => this.setState({ alignment: -1 })}
+            onClick={this.setAlignment(-1)}
           >
             <Icon iconExtraClassName="" name="icon-thumb-down" />
           </button>
@@ -214,34 +253,39 @@ export class AddCommentForm extends Component {
     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.
    */
-  _renderCommentAs() {
+  private _renderCommentAs() {
     const { session, commentable: { id, type } } = this.props;
-    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={(select) => {this.userGroupIdSelect = select}}
-            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>
-      );
+    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;
@@ -253,9 +297,9 @@ export class AddCommentForm extends Component {
    * @param {string} body - The comment's body
    * @returns {Void} - Returns nothing
    */
-  _checkCommentBody(body) {
+  private _checkCommentBody(body: string) {
     const { maxLength } = this.props;
-    this.setState({ disabled: body === '', error: body === '' || body.length > maxLength });
+    this.setState({ disabled: body === "", error: body === "" || (maxLength !== undefined && body.length > maxLength) });
   }
 
   /**
@@ -265,20 +309,22 @@ export class AddCommentForm extends Component {
    * @param {DOMEvent} evt - The form's submission event
    * @returns {Void} - Returns nothing
    */
-  _addComment(evt) {
+  private addComment = (evt: React.FormEvent<HTMLFormElement>) => {
     const { alignment } = this.state;
     const { addComment, onCommentAdded } = this.props;
-    let addCommentParams = { body: this.bodyTextArea.value, alignment };
+    let addCommentParams: { body: string, alignment: number, userGroupId?: string } = { body: this.bodyTextArea.value, alignment };
 
     evt.preventDefault();
 
-    if (this.userGroupIdSelect && this.userGroupIdSelect.value !== '') {
+    if (this.userGroupIdSelect && this.userGroupIdSelect.value !== "") {
       addCommentParams.userGroupId = this.userGroupIdSelect.value;
     }
 
-    addComment(addCommentParams);
+    if (addComment) {
+      addComment(addCommentParams);
+    }
 
-    this.bodyTextArea.value = '';
+    this.bodyTextArea.value = "";
     this.setState({ alignment: 0 });
 
     if (onCommentAdded) {
@@ -287,80 +333,33 @@ export class AddCommentForm extends Component {
   }
 }
 
-AddCommentForm.propTypes = {
-  addComment: PropTypes.func.isRequired,
-  session: PropTypes.shape({
-    user: PropTypes.shape({
-      name: PropTypes.string.isRequired
-    }),
-    verifiedUserGroups: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired
-      })
-    ).isRequired
-  }),
-  commentable: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired
-  }),
-  showTitle: PropTypes.bool.isRequired,
-  submitButtonClassName: PropTypes.string.isRequired,
-  onCommentAdded: PropTypes.func,
-  arguable: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  maxLength: PropTypes.number.isRequired
-};
-
-AddCommentForm.defaultProps = {
-  onCommentAdded: function() {},
-  showTitle: true,
-  submitButtonClassName: 'button button--sc',
-  arguable: false,
-  autoFocus: false,
-  maxLength: 1000
-};
-
-AddCommentForm.fragments = {
-  session: gql`
-    ${addCommentFormSessionFragment}
-  `,
-  commentable: gql`
-    ${addCommentFormCommentableFragment}
-  `
-};
-
-const AddCommentFormWithMutation = graphql(gql`
-  ${addCommentMutation}
-  ${commentThreadFragment}
-  ${commentFragment}
-  ${commentDataFragment}
-  ${upVoteFragment}
-  ${downVoteFragment}
-`, {
+const addCommentMutation = require("../mutations/add_comment.mutation.graphql");
+
+const AddCommentFormWithMutation = graphql(addCommentMutation, {
   props: ({ ownProps, mutate }) => ({
-    addComment: ({ body, alignment, userGroupId }) => mutate({
+    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }) => mutate({
       variables: {
         commentableId: ownProps.commentable.id,
         commentableType: ownProps.commentable.type,
         body,
         alignment,
-        userGroupId
+        userGroupId,
       },
       optimisticResponse: {
         commentable: {
-          __typename: 'CommentableMutation',
+          __typename: "CommentableMutation",
           addComment: {
-            __typename: 'Comment',
+            __typename: "Comment",
             id: uuid(),
             sgid: uuid(),
             type: "Decidim::Comments::Comment",
             createdAt: new Date().toISOString(),
             body,
-            alignment: alignment,
+            alignment,
             author: {
-              __typename: 'User',
+              __typename: "User",
               name: ownProps.session.user.name,
-              avatarUrl: ownProps.session.user.avatarUrl
+              avatarUrl: ownProps.session.user.avatarUrl,
             },
             comments: [],
             hasComments: false,
@@ -369,32 +368,32 @@ const AddCommentFormWithMutation = graphql(gql`
             upVoted: false,
             downVotes: 0,
             downVoted: false,
-            alreadyReported: false
-          }
-        }
+            alreadyReported: false,
+          },
+        },
       },
       updateQueries: {
-        GetComments: (prev, { mutationResult: { data } }) => {
+        GetComments: (prev: GetCommentsQuery, { mutationResult: { data } }: { mutationResult: { data: AddCommentMutation }}) => {
           const { id, type } = ownProps.commentable;
-          const newComment = data.commentable.addComment;
+          const newComment = data.commentable && data.commentable.addComment;
           let comments = [];
 
-          const commentReducer = (comment) => {
+          const commentReducer = (comment: CommentFragment): CommentFragment => {
             const replies = comment.comments || [];
 
-            if (comment.id === id) {
+            if (newComment && comment.id === id) {
               return {
                 ...comment,
                 hasComments: true,
                 comments: [
                   ...replies,
-                  newComment
-                ]
+                  newComment,
+                ],
               };
             }
             return {
               ...comment,
-              comments: replies.map(commentReducer)
+              comments: replies.map(commentReducer),
             };
           };
 
@@ -403,7 +402,7 @@ const AddCommentFormWithMutation = graphql(gql`
           } else {
             comments = [
               ...prev.commentable.comments,
-              newComment
+              newComment,
             ];
           }
 
@@ -411,13 +410,13 @@ const AddCommentFormWithMutation = graphql(gql`
             ...prev,
             commentable: {
               ...prev.commentable,
-              comments
-            }
+              comments,
+            },
           };
-        }
-      }
-    })
-  })
+        },
+      },
+    }),
+  }),
 })(AddCommentForm);
 
 export default AddCommentFormWithMutation;