decidim-comments 0.3.2 → 0.4.0

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

@@ -21,21 +21,25 @@ interface AddCommentFormProps {
     user: any;
   } | null;
   commentable: AddCommentFormCommentableFragment;
+  rootCommentable: AddCommentFormCommentableFragment;
   showTitle?: boolean;
   submitButtonClassName?: string;
   autoFocus?: boolean;
-  maxLength?: number;
   arguable?: boolean;
   addComment?: (data: { body: string, alignment: number, userGroupId?: string }) => void;
   onCommentAdded?: () => void;
+  orderBy: string;
 }
 
 interface AddCommentFormState {
   disabled: boolean;
   error: boolean;
   alignment: number;
+  remainingCharacterCount: number;
 }
 
+export const MAX_LENGTH = 500;
+
 /**
  * Renders a form to create new comments.
  * @class
@@ -47,7 +51,6 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
     submitButtonClassName: "button button--sc",
     arguable: false,
     autoFocus: false,
-    maxLength: 1000,
   };
 
   public bodyTextArea: HTMLTextAreaElement;
@@ -60,6 +63,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       disabled: true,
       error: false,
       alignment: 0,
+      remainingCharacterCount: MAX_LENGTH,
     };
   }
 
@@ -124,7 +128,7 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    */
   private _renderForm() {
     const { session, submitButtonClassName, commentable: { id, type } } = this.props;
-    const { disabled } = this.state;
+    const { disabled, remainingCharacterCount } = this.state;
 
     if (session) {
       return (
@@ -141,6 +145,9 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
             >
               {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>
       );
@@ -155,7 +162,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, maxLength } = this.props;
+    const { commentable: { id, type }, autoFocus } = this.props;
     const { error } = this.state;
     const className = classnames({ "is-invalid-input": error });
 
@@ -164,9 +171,9 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
       id: `add-comment-${type}-${id}`,
       className,
       rows: "4",
-      maxLength,
+      maxLength: MAX_LENGTH,
       required: "required",
-      pattern: `^(.){0,${maxLength}}$`,
+      pattern: `^(.){0,${MAX_LENGTH}}$`,
       placeholder: I18n.t("components.add_comment_form.form.body.placeholder"),
       onChange: (evt: React.ChangeEvent<HTMLTextAreaElement>) => this._checkCommentBody(evt.target.value),
     };
@@ -186,13 +193,12 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @returns {Void|DOMElement} - The error or an empty element
    */
   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: MAX_LENGTH })}
         </span>
       );
     }
@@ -298,8 +304,10 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
    * @returns {Void} - Returns nothing
    */
   private _checkCommentBody(body: string) {
-    const { maxLength } = this.props;
-    this.setState({ disabled: body === "", error: body === "" || (maxLength !== undefined && body.length > maxLength) });
+    this.setState({
+      disabled: body === "", error: body === "" || body.length > MAX_LENGTH,
+      remainingCharacterCount: MAX_LENGTH - body.length,
+    });
   }
 
   /**
@@ -334,89 +342,107 @@ export class AddCommentForm extends React.Component<AddCommentFormProps, AddComm
 }
 
 const addCommentMutation = require("../mutations/add_comment.mutation.graphql");
+const getCommentsQuery = require("../queries/comments.query.graphql");
 
-const AddCommentFormWithMutation = graphql(addCommentMutation, {
+const AddCommentFormWithMutation = graphql<AddCommentMutation, AddCommentFormProps>(addCommentMutation, {
   props: ({ ownProps, mutate }) => ({
-    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }) => mutate({
-      variables: {
-        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(),
+    addComment: ({ body, alignment, userGroupId }: { body: string, alignment: number, userGroupId: string }) => {
+      if (mutate) {
+        mutate({
+          variables: {
+            commentableId: ownProps.commentable.id,
+            commentableType: ownProps.commentable.type,
             body,
             alignment,
-            author: {
-              __typename: "User",
-              name: ownProps.session.user.name,
-              avatarUrl: ownProps.session.user.avatarUrl,
-              deleted: false,
+            userGroupId,
+          },
+          optimisticResponse: {
+            commentable: {
+              __typename: "CommentableMutation",
+              addComment: {
+                __typename: "Comment",
+                id: uuid(),
+                sgid: uuid(),
+                type: "Decidim::Comments::Comment",
+                createdAt: new Date().toISOString(),
+                body,
+                alignment,
+                author: {
+                  __typename: "User",
+                  name: ownProps.session && ownProps.session.user.name,
+                  avatarUrl: ownProps.session && ownProps.session.user.avatarUrl,
+                  deleted: false,
+                  isVerified: true,
+                  isUser: true,
+                },
+                comments: [],
+                hasComments: false,
+                acceptsNewComments: false,
+                upVotes: 0,
+                upVoted: false,
+                downVotes: 0,
+                downVoted: false,
+                alreadyReported: false,
+              },
             },
-            comments: [],
-            hasComments: false,
-            acceptsNewComments: false,
-            upVotes: 0,
-            upVoted: false,
-            downVotes: 0,
-            downVoted: false,
-            alreadyReported: false,
           },
-        },
-      },
-      updateQueries: {
-        GetComments: (prev: GetCommentsQuery, { mutationResult: { data } }: { mutationResult: { data: AddCommentMutation }}) => {
-          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) {
+          update: (store, { data }: { data: AddCommentMutation }) => {
+            const variables = {
+              commentableId: ownProps.rootCommentable.id,
+              commentableType: ownProps.rootCommentable.type,
+              orderBy: ownProps.orderBy,
+            };
+            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,
-                hasComments: true,
-                comments: [
-                  ...replies,
-                  newComment,
-                ],
+                comments: replies.map(commentReducer),
               };
-            }
-            return {
-              ...comment,
-              comments: replies.map(commentReducer),
             };
-          };
-
-          if (type === "Decidim::Comments::Comment") {
-            comments = prev.commentable.comments.map(commentReducer);
-          } else {
-            comments = [
-              ...prev.commentable.comments,
-              newComment,
-            ];
-          }
-
-          return {
-            ...prev,
-            commentable: {
-              ...prev.commentable,
-              comments,
-            },
-          };
-        },
-      },
-    }),
+
+            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,
+                  comments,
+                },
+              },
+              variables,
+            });
+          },
+        });
+      }
+    },
   }),
 })(AddCommentForm);
 

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

@@ -14,6 +14,11 @@ import generateUserData from "../support/generate_user_data";
 import { loadLocaleTranslations } from "../support/load_translations";
 
 describe("<Comment />", () => {
+  const orderBy = "older";
+  const rootCommentable = {
+    id: "1",
+    type: "Decidim::DummyResource",
+  };
   let comment: CommentFragment;
   let session: any = null;
 
@@ -31,17 +36,17 @@ describe("<Comment />", () => {
   });
 
   it("should render an article with class comment", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("article.comment").exists()).toBeTruthy();
   });
 
   it("should render a time tag with comment's created at", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("time").prop("dateTime")).toEqual(comment.createdAt);
   });
 
   it("should render author's name in a link with class author__name", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("a.author__name").text()).toEqual(comment.author.name);
   });
 
@@ -51,28 +56,28 @@ describe("<Comment />", () => {
     });
 
     it("should render 'Deleted user' inside a badge", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("span.label.label--small.label--basic").text()).toEqual("Deleted user");
     });
   });
 
   it("should render author's avatar as a image tag", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("a.author__avatar img").prop("src")).toEqual(comment.author.avatarUrl);
   });
 
   it("should render comment's body on a div with class comment__content", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__content").text()).toEqual(comment.body);
   });
 
   it("should initialize with a state property showReplyForm as false", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.state()).toHaveProperty("showReplyForm", false);
   });
 
   it("should render a AddCommentForm component with the correct props when clicking the reply button", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
     wrapper.find("button.comment__reply").simulate("click");
     expect(wrapper.find(AddCommentForm).prop("session")).toEqual(session);
@@ -83,24 +88,24 @@ describe("<Comment />", () => {
 
   it("should not render the additional reply button if the parent comment has no comments and isRootcomment", () => {
     comment.hasComments = false;
-    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
   });
 
   it("should not render the additional reply button if the parent comment has comments and not isRootcomment", () => {
     comment.hasComments = true;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
   });
 
   it("should render the additional reply button if the parent comment has comments and isRootcomment", () => {
     comment.hasComments = true;
-    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeTruthy();
   });
 
   it("should render comment's comments as a separate Comment components", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     wrapper.find(Comment).forEach((node, idx) => {
       expect(node.prop("comment")).toEqual(comment.comments[idx]);
       expect(node.prop("session")).toEqual(session);
@@ -110,19 +115,19 @@ describe("<Comment />", () => {
   });
 
   it("should render comment's comments with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" />);
+    const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" rootCommentable={rootCommentable} orderBy={orderBy} />);
     wrapper.find(Comment).forEach((node) => {
       expect(node.prop("articleClassName")).toEqual("comment comment--nested comment--nested--alt");
     });
   });
 
   it("should have a default prop articleClassName with value 'comment'", () => {
-    const wrapper = mount(<Comment comment={comment} session={session} />);
+    const wrapper = mount(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.prop("articleClassName")).toEqual("comment");
   });
 
   it("should have a default prop isRootComment with value false", () => {
-    const wrapper = mount(<Comment comment={comment} session={session} />);
+    const wrapper = mount(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.prop("isRootComment")).toBeFalsy();
   });
 
@@ -132,7 +137,7 @@ describe("<Comment />", () => {
     });
 
     it("should not render the reply button", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
   });
@@ -143,49 +148,49 @@ describe("<Comment />", () => {
     });
 
     it("should not render reply button", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
 
     it("should not render the flag modal", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
     });
   });
 
   it("should render a 'in favor' badge if comment's alignment is 1", () => {
     comment.alignment = 1;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("span.alignment.label").text()).toEqual("In favor");
   });
 
   it("should render a 'against' badge if comment's alignment is -1", () => {
     comment.alignment = -1;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("span.alert.label").text()).toEqual("Against");
   });
 
   it("should render the flag modal", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(".flag-modal").exists()).toBeTruthy();
   });
 
   describe("when user has already reported the comment", () => {
     it("should not render the flag form", () => {
       comment.alreadyReported = true;
-      const wrapper = shallow(<Comment comment={comment} session= {session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(".flag-modal form").exists()).toBeFalsy();
     });
   });
 
   describe("when the comment is votable", () => {
     it("should render an UpVoteButton component", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
     });
 
     it("should render an DownVoteButton component", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
     });
   });