decidim 0.0.6 → 0.0.7

data/decidim-comments/app/frontend/comments/{comment.component.test.jsx → comment.component.test.tsx}

@@ -1,130 +1,118 @@
-/* eslint-disable no-unused-expressions */
-import { shallow, mount }   from 'enzyme';
-import { filter }           from 'graphql-anywhere';
-import gql                  from 'graphql-tag';
+import { mount, shallow }   from "enzyme";
+import * as $ from "jquery";
+import * as React from "react";
 
-import Comment              from './comment.component';
-import AddCommentForm       from './add_comment_form.component';
-import UpVoteButton         from './up_vote_button.component';
-import DownVoteButton       from './down_vote_button.component';
+import { CommentFragment } from "../support/schema";
+import AddCommentForm       from "./add_comment_form.component";
+import Comment              from "./comment.component";
+import DownVoteButton       from "./down_vote_button.component";
+import UpVoteButton         from "./up_vote_button.component";
 
-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 generateCommentsData from "../support/generate_comments_data";
+import generateUserData     from "../support/generate_user_data";
 
-import stubComponent        from '../support/stub_component';
-import generateCommentsData from '../support/generate_comments_data';
-import generateUserData     from '../support/generate_user_data';
+import { loadLocaleTranslations } from "../support/load_translations";
 
 describe("<Comment />", () => {
-  let comment = {};
-  let session = null;
-
-  stubComponent(AddCommentForm);
-  stubComponent(UpVoteButton);
-  stubComponent(DownVoteButton);
+  let comment: CommentFragment;
+  let session: any = null;
 
   beforeEach(() => {
+    loadLocaleTranslations("en");
     let commentsData = generateCommentsData(1);
     commentsData[0].comments = generateCommentsData(3);
 
-    const fragment = gql`
-      ${commentFragment}
-      ${commentDataFragment}
-      ${upVoteFragment}
-      ${downVoteFragment}
-    `;
-
-    comment = filter(fragment, commentsData[0]);
+    comment = commentsData[0];
     session = {
-      user: generateUserData()
-    }
+      user: generateUserData(),
+    };
+
+    window.$ = $;
   });
 
   it("should render an article with class comment", () => {
     const wrapper = shallow(<Comment comment={comment} session={session} />);
-    expect(wrapper.find('article.comment')).to.present();
+    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} />);
-    expect(wrapper.find('time')).to.have.text(comment.created_at);
+    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} />);
-    expect(wrapper.find('a.author__name')).to.have.text(comment.author.name);
+    expect(wrapper.find("a.author__name").text()).toEqual(comment.author.name);
   });
 
   it("should render author's avatar as a image tag", () => {
     const wrapper = shallow(<Comment comment={comment} session={session} />);
-    expect(wrapper.find('a.author__avatar img')).to.have.attr('src').equal(comment.author.avatarUrl);
+    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} />);
-    expect(wrapper.find('div.comment__content')).to.have.text(comment.body);
+    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} />);
-    expect(wrapper).to.have.state('showReplyForm', false);
+    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} />);
-    expect(wrapper.find(AddCommentForm)).not.to.be.present();
-    wrapper.find('button.comment__reply').simulate('click');
-    expect(wrapper.find(AddCommentForm)).to.have.prop('session').deep.equal(session);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('commentable').deep.equal(comment);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('showTitle').equal(false);
-    expect(wrapper.find(AddCommentForm)).to.have.prop('submitButtonClassName').equal('button small hollow');
+    expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
+    wrapper.find("button.comment__reply").simulate("click");
+    expect(wrapper.find(AddCommentForm).prop("session")).toEqual(session);
+    expect(wrapper.find(AddCommentForm).prop("commentable")).toEqual(comment);
+    expect(wrapper.find(AddCommentForm).prop("showTitle")).toBeFalsy();
+    expect(wrapper.find(AddCommentForm).prop("submitButtonClassName")).toEqual("button small hollow");
   });
 
   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 />);
-    expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    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", () => {
+  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} />);
-    expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
+    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 />);
-    expect(wrapper.find('div.comment__additionalreply')).to.be.present();
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    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 />);
+    const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
     wrapper.find(Comment).forEach((node, idx) => {
-      expect(node).to.have.prop("comment").deep.equal(comment.comments[idx]);
-      expect(node).to.have.prop("session").deep.equal(session);
-      expect(node).to.have.prop("articleClassName").equal("comment comment--nested")
-      expect(node).to.have.prop("votable").equal(true);
+      expect(node.prop("comment")).toEqual(comment.comments[idx]);
+      expect(node.prop("session")).toEqual(session);
+      expect(node.prop("articleClassName")).toEqual("comment comment--nested");
+      expect(node.prop("votable")).toBeTruthy();
     });
   });
 
   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" />);
     wrapper.find(Comment).forEach((node) => {
-      expect(node).to.have.prop("articleClassName").equal("comment comment--nested comment--nested--alt")
+      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} />);
-    expect(wrapper).to.have.prop("articleClassName").equal("comment");
+    expect(wrapper.prop("articleClassName")).toEqual("comment");
   });
 
   it("should have a default prop isRootComment with value false", () => {
     const wrapper = mount(<Comment comment={comment} session={session} />);
-    expect(wrapper).to.have.prop("isRootComment").equal(false);
+    expect(wrapper.prop("isRootComment")).toBeFalsy();
   });
 
   describe("when the comment cannot accept new comments", () => {
@@ -134,9 +122,9 @@ describe("<Comment />", () => {
 
     it("should not render the reply button", () => {
       const wrapper = shallow(<Comment comment={comment} session={session} />);
-      expect(wrapper.find('button.comment__reply')).not.to.be.present();
+      expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
-  })
+  });
 
   describe("when user is not logged in", () => {
     beforeEach(() => {
@@ -145,49 +133,49 @@ describe("<Comment />", () => {
 
     it("should not render reply button", () => {
       const wrapper = shallow(<Comment comment={comment} session={session} />);
-      expect(wrapper.find('button.comment__reply')).not.to.be.present();
+      expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
 
     it("should not render the flag modal", () => {
       const wrapper = shallow(<Comment comment={comment} session={session} />);
-      expect(wrapper.find('.flag-modal')).not.to.be.present();
+      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} />);
-    expect(wrapper.find('span.success.label')).to.have.text('In favor');
+    expect(wrapper.find("span.success.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} />);
-    expect(wrapper.find('span.alert.label')).to.have.text('Against');
+    expect(wrapper.find("span.alert.label").text()).toEqual("Against");
   });
 
   it("should render the flag modal", () => {
     const wrapper = shallow(<Comment comment={comment} session={session} />);
-    expect(wrapper.find('.flag-modal')).to.be.present();
+    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} />);
-      expect(wrapper.find('.flag-modal form')).not.to.be.present();
+      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 />);
-      expect(wrapper.find(UpVoteButton)).to.have.prop("comment").deep.equal(comment);
-    })
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
+    });
 
     it("should render an DownVoteButton component", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} votable />);
-      expect(wrapper.find(DownVoteButton)).to.have.prop("comment").deep.equal(comment);
-    })
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
+    });
   });
 });

data/decidim-comments/app/frontend/comments/{comment.component.jsx → comment.component.tsx}

@@ -1,44 +1,66 @@
-/* eslint-disable max-lines, camelcase */
-import { Component, PropTypes } from 'react';
-import { propType }             from 'graphql-anywhere';
-import gql                      from 'graphql-tag';
-import moment                   from 'moment';
-import { I18n }                 from 'react-i18nify';
-import classnames               from 'classnames';
-
-import AddCommentForm           from './add_comment_form.component';
-import UpVoteButton             from './up_vote_button.component';
-import DownVoteButton           from './down_vote_button.component';
-import Icon                     from '../application/icon.component';
-
-import commentFragment          from './comment.fragment.graphql';
-import commentDataFragment      from './comment_data.fragment.graphql';
+import * as classnames     from "classnames";
+import * as moment         from "moment";
+import * as React          from "react";
+
+import Icon from "../application/icon.component";
+
+import AddCommentForm      from "./add_comment_form.component";
+import DownVoteButton      from "./down_vote_button.component";
+import UpVoteButton        from "./up_vote_button.component";
+
+import {
+  AddCommentFormSessionFragment,
+  CommentFragment,
+} from "../support/schema";
+
+const { I18n } = require("react-i18nify");
+
+interface CommentProps {
+  comment: CommentFragment;
+  session: AddCommentFormSessionFragment & {
+    user: any;
+  } | null;
+  articleClassName?: string;
+  isRootComment?: boolean;
+  votable?: boolean;
+}
+
+interface CommentState {
+  showReplyForm: boolean;
+}
 
 /**
  * A single comment component with the author info and the comment's body
  * @class
  * @augments Component
  */
-class Comment extends Component {
-  constructor(props) {
+class Comment extends React.Component<CommentProps, CommentState> {
+  public static defaultProps: any = {
+    articleClassName: "comment",
+    isRootComment: false,
+    session: null,
+    votable: false,
+  };
+
+  constructor(props: CommentProps) {
     super(props);
 
     this.state = {
-      showReplyForm: false
+      showReplyForm: false,
     };
   }
 
-  componentDidMount() {
-    if ($(document).foundation) {
+  public componentDidMount() {
+    if (window.$(document).foundation) {
       const { comment: { id } } = this.props;
-      $(`#flagModalComment${id}`).foundation();
+      window.$(`#flagModalComment${id}`).foundation();
     }
   }
 
-  render() {
+  public render(): JSX.Element {
     const { session, comment: { id, author, body, createdAt }, articleClassName } = this.props;
     const formattedCreatedAt = ` ${moment(createdAt).format("LLL")}`;
-    let modalName = 'loginModal';
+    let modalName = "loginModal";
 
     if (session && session.user) {
       modalName = `flagModalComment${id}`;
@@ -58,8 +80,8 @@ class Comment extends Component {
               </div>
             </div>
             <div className="author-data__extra">
-              <button type="button" title={ I18n.t("components.comment.report.title") } data-open={modalName}>
-                <Icon name="icon-flag" iconExtraClassName="icon--small"></Icon>
+              <button type="button" title={I18n.t("components.comment.report.title")} data-open={modalName}>
+                <Icon name="icon-flag" iconExtraClassName="icon--small" />
               </button>
               {this._renderFlagModal()}
             </div>
@@ -67,8 +89,8 @@ class Comment extends Component {
         </div>
         <div className="comment__content">
           <p>
-            { this._renderAlignmentBadge() }
-            { body }
+            {this._renderAlignmentBadge()}
+            {body}
           </p>
         </div>
         <div className="comment__footer">
@@ -82,23 +104,27 @@ class Comment extends Component {
     );
   }
 
+  private toggleReplyForm = () => {
+    const { showReplyForm } = this.state;
+    this.setState({ showReplyForm: !showReplyForm });
+  }
+
   /**
    * Render reply button if user can reply the comment
    * @private
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
-  _renderReplyButton() {
+  private _renderReplyButton() {
     const { comment: { acceptsNewComments }, session } = this.props;
-    const { showReplyForm } = this.state;
 
     if (session && acceptsNewComments) {
       return (
         <button
           className="comment__reply muted-link"
           aria-controls="comment1-reply"
-          onClick={() => this.setState({ showReplyForm: !showReplyForm })}
+          onClick={this.toggleReplyForm}
         >
-          { I18n.t("components.comment.reply") }
+          {I18n.t("components.comment.reply")}
         </button>
       );
     }
@@ -106,14 +132,13 @@ class Comment extends Component {
     return <span>&nbsp;</span>;
   }
 
-   /**
+  /**
    * Render additional reply button if user can reply the comment at the bottom of a conversation
    * @private
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
-  _renderAdditionalReplyButton() {
+  private _renderAdditionalReplyButton() {
     const { comment: { acceptsNewComments, hasComments }, session, isRootComment } = this.props;
-    const { showReplyForm } = this.state;
 
     if (session && acceptsNewComments) {
       if (hasComments && isRootComment) {
@@ -122,9 +147,9 @@ class Comment extends Component {
             <button
               className="comment__reply muted-link"
               aria-controls="comment1-reply"
-              onClick={() => this.setState({ showReplyForm: !showReplyForm })}
+              onClick={this.toggleReplyForm}
             >
-              { I18n.t("components.comment.reply") }
+              {I18n.t("components.comment.reply")}
             </button>
           </div>
         );
@@ -138,7 +163,7 @@ class Comment extends Component {
    * @private
    * @returns {Void|DOMElement} - Render the upVote and downVote buttons or not
    */
-  _renderVoteButtons() {
+  private _renderVoteButtons() {
     const { comment, votable } = this.props;
 
     if (votable) {
@@ -158,11 +183,11 @@ class Comment extends Component {
    * @private
    * @returns {Void|DomElement} - A wrapper element with comment's comments inside
    */
-  _renderReplies() {
+  private _renderReplies() {
     const { comment: { id, hasComments, comments }, session, votable, articleClassName } = this.props;
-    let replyArticleClassName = 'comment comment--nested';
+    let replyArticleClassName = "comment comment--nested";
 
-    if (articleClassName === 'comment comment--nested') {
+    if (articleClassName === "comment comment--nested") {
       replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
     }
 
@@ -170,7 +195,7 @@ class Comment extends Component {
       return (
         <div>
           {
-            comments.map((reply) => (
+            comments.map((reply: CommentFragment) => (
               <Comment
                 key={`comment_${id}_reply_${reply.id}`}
                 comment={reply}
@@ -192,19 +217,19 @@ class Comment extends Component {
    * @private
    * @returns {Void|ReactElement} - Render the AddCommentForm component or not
    */
-  _renderReplyForm() {
+  private _renderReplyForm() {
     const { session, comment } = this.props;
     const { showReplyForm } = this.state;
 
-    if (showReplyForm) {
+    if (session && showReplyForm) {
       return (
         <AddCommentForm
           session={session}
           commentable={comment}
           showTitle={false}
           submitButtonClassName="button small hollow"
-          onCommentAdded={() => this.setState({ showReplyForm: false })}
-          autoFocus
+          onCommentAdded={this.toggleReplyForm}
+          autoFocus={true}
         />
       );
     }
@@ -217,25 +242,25 @@ class Comment extends Component {
    * @private
    * @returns {Void|DOMElement} - The alignment's badge or not
    */
-  _renderAlignmentBadge() {
+  private _renderAlignmentBadge() {
     const { comment: { alignment } } = this.props;
-    const spanClassName = classnames('label', {
+    const spanClassName = classnames("label", {
       success: alignment === 1,
-      alert: alignment === -1
+      alert: alignment === -1,
     });
 
-    let label = '';
+    let label = "";
 
     if (alignment === 1) {
-      label = I18n.t('components.comment.alignment.in_favor');
+      label = I18n.t("components.comment.alignment.in_favor");
     } else {
-      label = I18n.t('components.comment.alignment.against');
+      label = I18n.t("components.comment.alignment.against");
     }
 
     if (alignment === 1 || alignment === -1) {
       return (
         <span>
-          <span className={spanClassName}>{ label }</span>
+          <span className={spanClassName}>{label}</span>
           &nbsp;
         </span>
       );
@@ -249,20 +274,25 @@ class Comment extends Component {
    * @private
    * @return {Void|DOMElement} - The comment's report modal or not.
    */
-  _renderFlagModal() {
+  private _renderFlagModal() {
     const { session, comment: { id, sgid, alreadyReported } } = this.props;
     const authenticityToken = this._getAuthenticityToken();
 
+    const closeModal = () => {
+      window.$(`#flagModalComment${id}`).foundation("close");
+    };
+
     if (session && session.user) {
       return (
-        <div className="reveal flag-modal" id={`flagModalComment${id}`} data-reveal>
+        <div className="reveal flag-modal" id={`flagModalComment${id}`} data-reveal={true}>
           <div className="reveal__header">
-            <h3 className="reveal__title">{ I18n.t("components.comment.report.title") }</h3>
+            <h3 className="reveal__title">{I18n.t("components.comment.report.title")}</h3>
             <button
               className="close-button"
-              aria-label={ I18n.t("components.comment.report.close") }
+              aria-label={I18n.t("components.comment.report.close")}
               type="button"
-              onClick={() => $(`#flagModalComment${id}`).foundation('close')}>
+              onClick={closeModal}
+            >
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
@@ -270,31 +300,33 @@ class Comment extends Component {
             (() => {
               if (alreadyReported) {
                 return (
-                  <p key={`already-reported-comment-${id}`}>{ I18n.t("components.comment.report.already_reported") }</p>
+                  <p key={`already-reported-comment-${id}`}>{I18n.t("components.comment.report.already_reported")}</p>
                 );
               }
               return [
-                <p key={`report-description-comment-${id}`}>{ I18n.t("components.comment.report.description") }</p>,
-                <form key={`report-form-comment-${id}`} method="post" action={`/report?sgid=${sgid}`}>
-                  <input type="hidden" name="authenticity_token" value={authenticityToken} />
-                  <label htmlFor={`report_comment_${id}_reason_spam`}>
-                    <input type="radio" value="spam" name="report[reason]" id={`report_comment_${id}_reason_spam`} defaultChecked />
-                    { I18n.t("components.comment.report.reasons.spam") }
-                  </label>
-                  <label htmlFor={`report_comment_${id}_reason_offensive`}>
-                    <input type="radio" value="offensive" name="report[reason]" id={`report_comment_${id}_reason_offensive`} />
-                    { I18n.t("components.comment.report.reasons.offensive") }
-                  </label>
-                  <label htmlFor={`report_comment_${id}_reason_does_not_belong`}>
-                    <input type="radio" value="does_not_belong" name="report[reason]" id={`report_comment_${id}_reason_does_not_belong`} />
-                    { I18n.t("components.comment.report.reasons.does_not_belong", { organization_name: session.user.organizationName }) }
-                  </label>
-                  <label htmlFor={`report_comment_${id}_details`}>
-                    { I18n.t("components.comment.report.details") }
-                    <textarea rows="4" name="report[details]" id={`report_comment_${id}_details`} />
-                  </label>
-                  <button type="submit" name="commit" className="button">{ I18n.t("components.comment.report.action") }</button>
-                </form>
+                <p key={`report-description-comment-${id}`}>{I18n.t("components.comment.report.description")}</p>,
+                (
+                  <form key={`report-form-comment-${id}`} method="post" action={`/report?sgid=${sgid}`}>
+                    <input type="hidden" name="authenticity_token" value={authenticityToken} />
+                    <label htmlFor={`report_comment_${id}_reason_spam`}>
+                      <input type="radio" value="spam" name="report[reason]" id={`report_comment_${id}_reason_spam`} defaultChecked={true} />
+                      {I18n.t("components.comment.report.reasons.spam")}
+                    </label>
+                    <label htmlFor={`report_comment_${id}_reason_offensive`}>
+                      <input type="radio" value="offensive" name="report[reason]" id={`report_comment_${id}_reason_offensive`} />
+                      {I18n.t("components.comment.report.reasons.offensive")}
+                    </label>
+                    <label htmlFor={`report_comment_${id}_reason_does_not_belong`}>
+                      <input type="radio" value="does_not_belong" name="report[reason]" id={`report_comment_${id}_reason_does_not_belong`} />
+                      {I18n.t("components.comment.report.reasons.does_not_belong", { organization_name: session.user.organizationName })}
+                    </label>
+                    <label htmlFor={`report_comment_${id}_details`}>
+                      {I18n.t("components.comment.report.details")}
+                      <textarea rows={4} name="report[details]" id={`report_comment_${id}_details`} />
+                    </label>
+                    <button type="submit" name="commit" className="button">{I18n.t("components.comment.report.action")}</button>
+                  </form>
+                ),
               ];
             })()
           }
@@ -309,44 +341,10 @@ class Comment extends Component {
    * Get Rails authenticity token so we can send requests through the report forms.
    * @private
    * @return {string} - The current authenticity token.
-  */
-  _getAuthenticityToken() {
-    return $('meta[name="csrf-token"]').attr('content');
+   */
+  private _getAuthenticityToken() {
+    return window.$('meta[name="csrf-token"]').attr("content");
   }
 }
 
-Comment.fragments = {
-  comment: gql`
-    ${commentFragment}
-    ${commentDataFragment}
-    ${UpVoteButton.fragments.comment}
-    ${DownVoteButton.fragments.comment}
-  `,
-  commentData: gql`
-    ${commentDataFragment}
-    ${UpVoteButton.fragments.comment}
-    ${DownVoteButton.fragments.comment}
-  `
-};
-
-Comment.propTypes = {
-  comment: PropTypes.oneOfType([
-    propType(Comment.fragments.comment).isRequired,
-    propType(Comment.fragments.commentData).isRequired
-  ]).isRequired,
-  session: PropTypes.shape({
-    user: PropTypes.any.isRequired
-  }),
-  articleClassName: PropTypes.string.isRequired,
-  isRootComment: PropTypes.bool,
-  votable: PropTypes.bool
-};
-
-Comment.defaultProps = {
-  articleClassName: 'comment',
-  isRootComment: false,
-  session: null,
-  votable: false
-};
-
 export default Comment;