decidim-comments 0.22.0 → 0.23.0

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
     };
   }
 
@@ -176,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 });
 
@@ -185,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) {
@@ -207,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>
       );
     }
@@ -317,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
     });
   }
 
@@ -343,7 +350,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     }
 
     if (addComment) {
-      addComment(addCommentParams);
+      addComment(addCommentParams, this.context);
     }
 
     this.bodyTextArea.value = "";
@@ -360,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,
@@ -381,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
                 },
@@ -402,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 = [];

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

@@ -1,8 +1,8 @@
-import { mount, shallow } from "enzyme";
+import {mount, shallow} from "enzyme";
 import * as $ from "jquery";
 import * as React from "react";
 
-import { CommentFragment } from "../support/schema";
+import {CommentFragment} from "../support/schema";
 import AddCommentForm from "./add_comment_form.component";
 import Comment from "./comment.component";
 import DownVoteButton from "./down_vote_button.component";
@@ -11,13 +11,15 @@ import UpVoteButton from "./up_vote_button.component";
 import generateCommentsData from "../support/generate_comments_data";
 import generateUserData from "../support/generate_user_data";
 
-import { loadLocaleTranslations } from "../support/load_translations";
+import {loadLocaleTranslations} from "../support/load_translations";
 
 describe("<Comment />", () => {
+  const commentsMaxLength: number = 1000;
   const orderBy = "older";
   const rootCommentable = {
     id: "1",
-    type: "Decidim::DummyResources::DummyResource"
+    type: "Decidim::DummyResources::DummyResource",
+    commentsMaxLength: 1000
   };
   let comment: CommentFragment;
   let session: any = null;
@@ -48,6 +50,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".comment").exists()).toBeTruthy();
@@ -60,6 +63,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("time").prop("dateTime")).toEqual(comment.createdAt);
@@ -72,6 +76,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__name").text()).toEqual(
@@ -86,6 +91,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.author__nickname").text()).toEqual(
@@ -105,6 +111,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(
@@ -120,6 +127,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".author__avatar img").prop("src")).toEqual(
@@ -134,6 +142,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__content").html()).toContain(
@@ -148,6 +157,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.state()).toHaveProperty("showReplyForm", false);
@@ -160,6 +170,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
@@ -181,6 +192,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -194,6 +206,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
@@ -208,6 +221,7 @@ describe("<Comment />", () => {
         isRootComment={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeTruthy();
@@ -221,6 +235,7 @@ describe("<Comment />", () => {
         votable={true}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach((node, idx) => {
@@ -239,6 +254,7 @@ describe("<Comment />", () => {
         articleClassName="comment comment--nested"
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     wrapper.find(Comment).forEach(node => {
@@ -255,6 +271,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("articleClassName")).toEqual("comment");
@@ -267,6 +284,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.prop("isRootComment")).toBeFalsy();
@@ -284,6 +302,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -302,6 +321,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -314,6 +334,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -328,6 +349,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alignment.label").text()).toEqual("In favor");
@@ -341,6 +363,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find("span.alert.label").text()).toEqual("Against");
@@ -353,6 +376,7 @@ describe("<Comment />", () => {
         session={session}
         rootCommentable={rootCommentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     );
     expect(wrapper.find(".flag-modal").exists()).toBeTruthy();
@@ -367,6 +391,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal form").exists()).toBeFalsy();
@@ -382,6 +407,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
@@ -395,6 +421,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
@@ -413,6 +440,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
@@ -425,6 +453,7 @@ describe("<Comment />", () => {
           session={session}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
@@ -438,6 +467,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--up").exists()).toBeFalsy();
@@ -451,6 +481,7 @@ describe("<Comment />", () => {
           votable={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
       expect(wrapper.find(".comment__votes--down").exists()).toBeFalsy();

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

@@ -29,6 +29,7 @@ interface CommentProps {
   votable?: boolean;
   rootCommentable: AddCommentFormCommentableFragment;
   orderBy: string;
+  commentsMaxLength: number;
 }
 
 interface CommentState {
@@ -451,7 +452,15 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|DomElement} - A wrapper element with comment's comments inside
    */
   private _renderReplies() {
-    const { comment: { id, hasComments, comments }, session, votable, articleClassName, rootCommentable, orderBy } = this.props;
+    const {
+      comment: { id, hasComments, comments },
+      session,
+      votable,
+      articleClassName,
+      rootCommentable,
+      orderBy,
+      commentsMaxLength
+    } = this.props;
     const { showReplies } = this.state;
     let replyArticleClassName = "comment comment--nested";
 
@@ -462,19 +471,18 @@ class Comment extends React.Component<CommentProps, CommentState> {
     if (hasComments) {
       return (
         <div id={`comment-${id}-replies`} className={showReplies ? "" : "hide"}>
-          {
-            comments.map((reply: CommentFragment) => (
-              <Comment
-                key={`comment_${id}_reply_${reply.id}`}
-                comment={reply}
-                session={session}
-                votable={votable}
-                articleClassName={replyArticleClassName}
-                rootCommentable={rootCommentable}
-                orderBy={orderBy}
-              />
-            ))
-          }
+          {comments.map((reply: CommentFragment) => (
+            <Comment
+              key={`comment_${id}_reply_${reply.id}`}
+              comment={reply}
+              session={session}
+              votable={votable}
+              articleClassName={replyArticleClassName}
+              rootCommentable={rootCommentable}
+              orderBy={orderBy}
+              commentsMaxLength={commentsMaxLength}
+            />
+          ))}
         </div>
       );
     }
@@ -488,7 +496,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @returns {Void|ReactElement} - Render the AddCommentForm component or not
    */
   private _renderReplyForm() {
-    const { session, comment, rootCommentable, orderBy } = this.props;
+    const { session, comment, rootCommentable, orderBy, commentsMaxLength } = this.props;
     const { showReplyForm } = this.state;
     const {
       comment: { userAllowedToComment }
@@ -505,6 +513,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
           autoFocus={true}
           rootCommentable={rootCommentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
     }