decidim-comments 0.19.1 → 0.23.0

data/app/events/decidim/comments/comment_by_followed_user_group_event.rb

@@ -0,0 +1,9 @@
+# frozen-string_literal: true
+
+module Decidim
+  module Comments
+    class CommentByFollowedUserGroupEvent < Decidim::Events::SimpleEvent
+      include Decidim::Comments::CommentEvent
+    end
+  end
+end

data/app/events/decidim/comments/comment_event.rb

@@ -9,8 +9,6 @@ module Decidim
       include Decidim::Events::AuthorEvent
 
       included do
-        delegate :author, to: :comment
-
         def resource_path
           resource_locator.path(url_params)
         end
@@ -23,6 +21,21 @@ module Decidim
           comment.formatted_body
         end
 
+        def author
+          comment.normalized_author
+        end
+
+        def author_presenter
+          return unless author
+
+          @author_presenter ||= case author
+                                when Decidim::User
+                                  Decidim::UserPresenter.new(author)
+                                when Decidim::UserGroup
+                                  Decidim::UserGroupPresenter.new(author)
+                                end
+        end
+
         private
 
         def comment

data/app/events/decidim/comments/user_group_mentioned_event.rb

@@ -0,0 +1,10 @@
+# frozen-string_literal: true
+
+module Decidim
+  module Comments
+    class UserGroupMentionedEvent < Decidim::Events::SimpleEvent
+      include Decidim::Comments::CommentEvent
+      include Decidim::Events::UserGroupEvent
+    end
+  end
+end

data/app/forms/decidim/comments/comment_form.rb

@@ -8,11 +8,27 @@ module Decidim
       attribute :body, String
       attribute :alignment, Integer
       attribute :user_group_id, Integer
+      attribute :commentable
 
       mimic :comment
 
-      validates :body, presence: true, length: { maximum: 1000 }
+      validates :body, presence: true, length: { maximum: ->(form) { form.max_length } }
       validates :alignment, inclusion: { in: [0, 1, -1] }, if: ->(form) { form.alignment.present? }
+
+      validate :max_depth
+
+      def max_length
+        return current_component.settings.comments_max_length if current_component.try { settings.comments_max_length.positive? }
+        return current_organization.comments_max_length if current_organization.comments_max_length.positive?
+
+        1000
+      end
+
+      def max_depth
+        return unless commentable.respond_to?(:depth)
+
+        errors.add(:base, :invalid) if commentable.depth >= Comment::MAX_DEPTH
+      end
     end
   end
 end

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

@@ -3,12 +3,20 @@ import assetUrl from "../support/asset_url";
 
 interface IconProps {
   name: string;
+  title?: string;
   iconExtraClassName?: string;
+  role?: string;
 }
 
-export const Icon: React.SFC<IconProps> = ({ name, iconExtraClassName }) => {
+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}`}>
+    <svg className={`icon ${iconExtraClassName} ${name}`} role={role}>
+      {titleElement}
       <use
         xmlnsXlink="http://www.w3.org/1999/xlink"
         xlinkHref={`${assetUrl("icons.svg")}#${name}`}
@@ -23,12 +31,16 @@ Icon.defaultProps = {
 
 interface IconWithoutUserAgentProps {
   name: string;
+  title?: string;
   iconExtraClassName?: string;
+  role?: string;
 }
 
 const IconWithoutUserAgent: React.SFC<IconWithoutUserAgentProps> = ({
   name,
-  iconExtraClassName
-}) => <Icon name={name} iconExtraClassName={iconExtraClassName} />;
+  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,14 +1,16 @@
 import { mount, ReactWrapper, shallow } from "enzyme";
+import * as $ from "jquery";
 import * as React from "react";
 
-import { AddCommentForm, MAX_LENGTH } 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 { loadLocaleTranslations } from "../support/load_translations";
 
-describe("<AddCommentForm />", () => {
+describe("<AddCommentForm commentsMaxLength={commentsMaxLength} />", () => {
   let session: any = null;
+  const commentsMaxLength: number = 1000;
   const commentable = {
     id: "1",
     type: "Decidim::DummyResources::DummyResource"
@@ -17,6 +19,7 @@ describe("<AddCommentForm />", () => {
   const addCommentStub = (): any => {
     return null;
   };
+  const context = {locale: undefined, toggleTranslations: undefined};
 
   beforeEach(() => {
     loadLocaleTranslations("en");
@@ -29,47 +32,49 @@ describe("<AddCommentForm />", () => {
         "icons.svg": "/assets/icons.svg"
       }
     };
+
+    window.$ = $;
   });
 
   it("should render a div with class add-comment", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} showTitle={false} rootCommentable={commentable} orderBy={orderBy} />);
-    expect(wrapper.find("h5.section-heading").exists()).toBeFalsy();
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} submitButtonClassName="button small hollow" rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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"
@@ -79,7 +84,7 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should disable the submit button if textarea is blank", () => {
-    const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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"
@@ -94,19 +99,19 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should not render a div with class 'opinion-toggle'", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+    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(MAX_LENGTH - commentBody.length);
+    expect(wrapper.find(".remaining-character-count").text()).toContain(commentsMaxLength - commentBody.length);
   });
 
   describe("submitting the form", () => {
@@ -118,14 +123,14 @@ describe("<AddCommentForm />", () => {
     beforeEach(() => {
       addComment = jasmine.createSpy("addComment");
       onCommentAdded = jasmine.createSpy("onCommentAdded");
-      wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} onCommentAdded={onCommentAdded} rootCommentable={commentable} orderBy={orderBy} />);
+      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 });
+      expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
     });
 
     it("should reset textarea", () => {
@@ -146,25 +151,25 @@ describe("<AddCommentForm />", () => {
   });
 
   it("should initialize state with a property alignment and value 0", () => {
-    const wrapper = shallow(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+    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 addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      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 addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      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 addComment={addCommentStub} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+      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);
@@ -177,7 +182,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} arguable={true} rootCommentable={commentable} orderBy={orderBy} />);
+        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;
       });
@@ -185,7 +190,7 @@ describe("<AddCommentForm />", () => {
       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 });
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: -1 }, context);
       });
 
       it("should reset the state to its initial state", () => {
@@ -205,12 +210,12 @@ describe("<AddCommentForm />", () => {
     });
 
     it("should have a reference to user_group_id select", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      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 addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      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);
     });
 
@@ -222,7 +227,7 @@ describe("<AddCommentForm />", () => {
 
       beforeEach(() => {
         addComment = jasmine.createSpy("addComment");
-        wrapper = mount(<AddCommentForm addComment={addComment} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+        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;
@@ -231,7 +236,7 @@ describe("<AddCommentForm />", () => {
 
       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 });
+        expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0, userGroupId }, context);
       });
 
       describe("when user_group_id is blank", () => {
@@ -241,7 +246,7 @@ describe("<AddCommentForm />", () => {
 
         it("should call addComment prop with the body textarea and alignment", () => {
           wrapper.find("form").simulate("submit");
-          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 });
+          expect(addComment).toHaveBeenCalledWith({ body: message, alignment: 0 }, context);
         });
       });
     });
@@ -253,7 +258,7 @@ describe("<AddCommentForm />", () => {
     });
 
     it("display a message to sign in or sign up", () => {
-      const wrapper = mount(<AddCommentForm addComment={addCommentStub} session={session} commentable={commentable} rootCommentable={commentable} orderBy={orderBy} />);
+      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

@@ -4,6 +4,8 @@ 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");
@@ -27,9 +29,10 @@ interface AddCommentFormProps {
   autoFocus?: boolean;
   arguable?: boolean;
   userAllowedToComment?: boolean;
-  addComment?: (data: { body: string, alignment: number, userGroupId?: string }) => void;
+  addComment?: (data: { body: string, alignment: number, userGroupId?: string }, context: any) => void;
   onCommentAdded?: () => void;
   orderBy: string;
+  commentsMaxLength: number;
 }
 
 interface AddCommentFormState {
@@ -39,8 +42,6 @@ interface AddCommentFormState {
   remainingCharacterCount: number;
 }
 
-export const MAX_LENGTH = 1000;
-
 /**
  * Renders a form to create new comments.
  * @class
@@ -54,6 +55,11 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     autoFocus: false
   };
 
+  public static contextTypes: any = {
+    locale: PropTypes.string,
+    toggleTranslations: PropTypes.bool
+  };
+
   public bodyTextArea: HTMLTextAreaElement;
   public userGroupIdSelect: HTMLSelectElement;
 
@@ -64,7 +70,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       disabled: true,
       error: false,
       alignment: 0,
-      remainingCharacterCount: MAX_LENGTH
+      remainingCharacterCount: props.commentsMaxLength
     };
   }
 
@@ -79,6 +85,17 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     );
   }
 
+  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
@@ -89,9 +106,9 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
 
     if (showTitle) {
       return (
-        <h5 className="section-heading">
+        <h4 className="section-heading">
           {I18n.t("components.add_comment_form.title")}
-        </h5>
+        </h4>
       );
     }
 
@@ -137,7 +154,9 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
           {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>
-            {this._renderTextArea()}
+            <div className="hashtags__container">
+              {this._renderTextArea()}
+            </div>
             {this._renderTextAreaError()}
             <button
               type="submit"
@@ -163,7 +182,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @returns {Void|DOMElement} - The heading or an empty element
    */
   private _renderTextArea() {
-    const { commentable: { id, type }, autoFocus } = this.props;
+    const { commentable: { id, type }, autoFocus, commentsMaxLength } = this.props;
     const { error } = this.state;
     const className = classnames({ "is-invalid-input": error });
 
@@ -172,11 +191,11 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       id: `add-comment-${type}-${id}`,
       className,
       rows: "4",
-      maxLength: MAX_LENGTH,
+      maxLength: commentsMaxLength,
       required: "required",
-      pattern: `^(.){0,${MAX_LENGTH}}$`,
+      pattern: `^(.){0,${commentsMaxLength}}$`,
       placeholder: I18n.t("components.add_comment_form.form.body.placeholder"),
-      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value)
+      onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value, commentsMaxLength as number)
     };
 
     if (autoFocus) {
@@ -194,12 +213,13 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @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: MAX_LENGTH })}
+          {I18n.t("components.add_comment_form.form.form_error", { length: commentsMaxLength })}
         </span>
       );
     }
@@ -304,10 +324,10 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @param {string} body - The comment's body
    * @returns {Void} - Returns nothing
    */
-  private _checkCommentBody(body: string) {
+  private _checkCommentBody(body: string, commentsMaxLength: number) {
     this.setState({
-      disabled: body === "", error: body === "" || body.length > MAX_LENGTH,
-      remainingCharacterCount: MAX_LENGTH - body.length
+      disabled: body === "", error: body === "" || body.length > commentsMaxLength,
+      remainingCharacterCount: commentsMaxLength - body.length
     });
   }
 
@@ -330,7 +350,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     }
 
     if (addComment) {
-      addComment(addCommentParams);
+      addComment(addCommentParams, this.context);
     }
 
     this.bodyTextArea.value = "";
@@ -347,10 +367,12 @@ 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 }) => {
+    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,
@@ -368,10 +390,14 @@ const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormPro
                 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
                 },
@@ -389,14 +415,17 @@ const AddCommentFormWithMutation = graphql<addCommentMutation, AddCommentFormPro
           },
           update: (store, { data }: { data: addCommentMutation }) => {
             const variables = {
+              locale,
+              toggleTranslations,
               commentableId: ownProps.rootCommentable.id,
               commentableType: ownProps.rootCommentable.type,
-              orderBy: ownProps.orderBy
+              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 = [];