decidim-comments 0.23.6 → 0.24.0.rc1

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

@@ -1,289 +0,0 @@
-import * as React from "react";
-import { graphql } from "react-apollo";
-
-const PropTypes = require("prop-types");
-
-import Application from "../application/application.component";
-
-import AddCommentForm from "./add_comment_form.component";
-import CommentOrderSelector from "./comment_order_selector.component";
-import CommentThread from "./comment_thread.component";
-
-import {
-  GetCommentsQuery,
-  GetCommentsQueryVariables
-} from "../support/schema";
-
-const { I18n, Translate } = require("react-i18nify");
-
-interface CommentsProps extends GetCommentsQuery {
-  locale: string;
-  toggleTranslations: boolean;
-  loading?: boolean;
-  orderBy: string;
-  singleCommentId?: string;
-  reorderComments: (orderBy: string) => void;
-  commentsMaxLength: number;
-}
-
-/**
- * The core class of the Decidim Comments engine.
- * It renders a collection of comments given a commentable id and type.
- * @global
- * @class
- * @augments Component
- */
-export class Comments extends React.Component<CommentsProps> {
-  public static defaultProps: any = {
-    loading: false,
-    session: null,
-    commentable: {
-      comments: []
-    }
-  };
-
-  public static childContextTypes: any = {
-    locale: PropTypes.string,
-    toggleTranslations: PropTypes.bool
-  };
-
-  public getChildContext() {
-    return {
-      locale: this.props.locale,
-      toggleTranslations: this.props.toggleTranslations
-    };
-  }
-
-  public render() {
-    const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading, commentsMaxLength } = this.props;
-    let commentClasses = "comments";
-    let commentHeader = I18n.t("components.comments.title", { count: totalCommentsCount });
-    if (singleCommentId && singleCommentId !== "") {
-      commentHeader = I18n.t("components.comments.comment_details_title");
-    }
-
-    if (loading) {
-      commentClasses += " loading-comments";
-      commentHeader = I18n.t("components.comments.loading");
-    }
-
-    return (
-      <div className="columns large-9" id="comments">
-        <section className={commentClasses}>
-          <div className="row collapse order-by">
-            <h2 className="order-by__text section-heading">
-              {commentHeader}
-            </h2>
-            {this._renderCommentOrderSelector()}
-          </div>
-          {this._renderSingleCommentWarning()}
-          {this._renderBlockedCommentsWarning()}
-          {this._renderCommentThreads()}
-          {this._renderAddCommentForm()}
-          {this._renderBlockedCommentsForUserWarning()}
-        </section>
-      </div>
-    );
-  }
-
-  /**
-   * Renders warning message when viewing a single comment.
-   * @private
-   * @returns {Void|DOMElement} - A warning message or nothing.
-   */
-  private _renderSingleCommentWarning() {
-    const { singleCommentId, reorderComments, orderBy } = this.props;
-
-    if (singleCommentId && singleCommentId !== "") {
-      const newUrl = `${window.location.pathname}${window.location.search.replace(`commentId=${singleCommentId}`, "")}`;
-
-      return (
-        <div className="callout secondary">
-          <h5>{I18n.t("components.comments.single_comment_warning_title")}</h5>
-          <p>
-            <Translate
-              value="components.comments.single_comment_warning"
-              url={newUrl}
-              dangerousHTML={true}
-            />
-          </p>
-        </div>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Renders an order selector.
-   * @private
-   * @returns {Void|DOMElement} - A warning message or nothing.
-   */
-  private _renderCommentOrderSelector() {
-    const { singleCommentId, reorderComments, orderBy } = this.props;
-
-    if (singleCommentId && singleCommentId !== "") {
-      return null;
-    }
-
-    return (
-      <CommentOrderSelector
-        reorderComments={reorderComments}
-        defaultOrderBy={orderBy}
-      />
-    );
-  }
-
-  /**
-   * Renders a warning message if the commentable doesn't accept new comments.
-   * @private
-   * @returns {Void|DOMElement} - A warning message or nothing.
-   */
-  private _renderBlockedCommentsWarning() {
-    const { commentable: { acceptsNewComments, userAllowedToComment } } = this.props;
-
-    if (!acceptsNewComments && !userAllowedToComment) {
-      return (
-        <div className="callout warning">
-          <p>{I18n.t("components.comments.blocked_comments_warning")}</p>
-        </div>
-      );
-    }
-
-    return null;
-  }
-
-  /**
-   * Renders a warning message if the participatory_space is  private and users
-   * don't have permissions.
-   * @private
-   * @returns {Void|DOMElement} - A warning message or nothing.
-   */
-  private _renderBlockedCommentsForUserWarning() {
-    const { commentable: { acceptsNewComments, userAllowedToComment } } = this.props;
-
-    if (acceptsNewComments) {
-      if (!userAllowedToComment) {
-        return (
-          <div className="callout warning">
-            <p>{I18n.t("components.comments.blocked_comments_for_user_warning")}</p>
-          </div>
-        );
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Iterates the comment's collection and render a CommentThread for each one
-   * @private
-   * @returns {ReactComponent[]} - A collection of CommentThread components
-   */
-  private _renderCommentThreads() {
-    const { session, commentable, orderBy, commentsMaxLength } = this.props;
-    const { comments, commentsHaveVotes } = commentable;
-
-    return comments.map((comment) => (
-      <CommentThread
-        key={comment.id}
-        comment={comment}
-        session={session}
-        votable={commentsHaveVotes}
-        rootCommentable={commentable}
-        orderBy={orderBy}
-        commentsMaxLength={commentsMaxLength}
-      />
-    ));
-  }
-
-  /**
-   * If current user is present it renders the add comment form
-   * @private
-   * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
-   */
-  private _renderAddCommentForm() {
-    const { session, commentable, orderBy, singleCommentId, commentsMaxLength } = this.props;
-    const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
-
-    if (singleCommentId && singleCommentId !== "") {
-      return null;
-    }
-
-    if (acceptsNewComments && userAllowedToComment) {
-      return (
-        <AddCommentForm
-          session={session}
-          commentable={commentable}
-          arguable={commentsHaveAlignment}
-          rootCommentable={commentable}
-          orderBy={orderBy}
-          commentsMaxLength={commentsMaxLength}
-        />
-      );
-    }
-
-    return null;
-  }
-}
-
-/**
- * Wrap the Comments component with a GraphQL query and children
- * fragments.
- */
-
-window.Comments = Comments;
-
-export const commentsQuery = require("../queries/comments.query.graphql");
-
-const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQuery, {
-  options: {
-    pollInterval: 15000
-  },
-  props: ({ ownProps, data }) => {
-    if (data) {
-      const { loading, session, commentable, refetch } = data;
-
-      return {
-        loading,
-        session,
-        commentable,
-        orderBy: ownProps.orderBy,
-        singleCommentId: ownProps.singleCommentId,
-        reorderComments: (orderBy: string) => {
-          return refetch({
-            orderBy
-          });
-        }
-      };
-    }
-  }
-})(Comments);
-
-export interface CommentsApplicationProps extends GetCommentsQueryVariables {
-  singleCommentId: string;
-  locale: string;
-  toggleTranslations: boolean;
-  commentsMaxLength: number;
-}
-
-/**
- * Wrap the CommentsWithData component within an Application component to
- * connect it with Apollo client and store.
- * @returns {ReactComponent} - A component wrapped within an Application component
- */
-const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, toggleTranslations, commentableId, commentableType, singleCommentId, commentsMaxLength }) => (
-  <Application locale={locale}>
-    <CommentsWithData
-      commentsMaxLength={commentsMaxLength}
-      commentableId={commentableId}
-      commentableType={commentableType}
-      locale={locale}
-      toggleTranslations={toggleTranslations}
-      orderBy="older"
-      singleCommentId={singleCommentId}
-    />
-  </Application>
-);
-
-export default CommentsApplication;

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

@@ -1,59 +0,0 @@
-import { shallow } from "enzyme";
-import * as React from "react";
-
-import { DownVoteButton } from "./down_vote_button.component";
-import VoteButton from "./vote_button.component";
-
-import generateCommentsData from "../support/generate_comments_data";
-import generateUserData from "../support/generate_user_data";
-
-import { DownVoteButtonFragment } from "../support/schema";
-
-describe("<DownVoteButton />", () => {
-  const orderBy = "older";
-  const rootCommentable = {
-    id: "1",
-    type: "Decidim::DummyResources::DummyResource"
-  };
-  let comment: DownVoteButtonFragment;
-  let session: any = null;
-  const downVote = jasmine.createSpy("downVote");
-
-  beforeEach(() => {
-    const commentsData = generateCommentsData(1);
-    session = {
-      user: generateUserData()
-    };
-    comment = commentsData[0];
-  });
-
-  it("should render a VoteButton component with the correct props", () => {
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("buttonClassName")).toEqual("comment__votes--down");
-    expect(wrapper.find(VoteButton).prop("iconName")).toEqual("icon-chevron-bottom");
-    expect(wrapper.find(VoteButton).prop("votes")).toEqual(comment.downVotes);
-  });
-
-  it("should pass disabled prop as false if comment upVoted is true", () => {
-    comment.upVoted = true;
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("disabled")).toBeFalsy();
-  });
-
-  it("should pass disabled prop as false if comment downVoted is true", () => {
-    comment.downVoted = true;
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("disabled")).toBeFalsy();
-  });
-
-  describe("when session is not present", () => {
-    beforeEach(() => {
-      session = null;
-    });
-
-    it("should pass userLoggedIn as false", () => {
-      const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(VoteButton).prop("userLoggedIn")).toBeFalsy();
-    });
-  });
-});

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

@@ -1,133 +0,0 @@
-import * as React from "react";
-import { graphql, MutationFunc } from "react-apollo";
-
-const PropTypes = require("prop-types");
-
-import VoteButton from "./vote_button.component";
-
-import {
-  AddCommentFormCommentableFragment,
-  AddCommentFormSessionFragment,
-  CommentFragment,
-  DownVoteButtonFragment,
-  DownVoteMutation,
-  GetCommentsQuery
-} from "../support/schema";
-
-const { I18n } = require("react-i18nify");
-
-interface DownVoteButtonProps {
-  session: AddCommentFormSessionFragment & {
-    user: any;
-  } | null;
-  comment: DownVoteButtonFragment;
-  downVote?: (context: any) => void;
-  rootCommentable: AddCommentFormCommentableFragment;
-  orderBy: string;
-}
-
-export const DownVoteButton: React.SFC<DownVoteButtonProps> = (
-  {
-    session,
-    comment: { downVotes, upVoted, downVoted },
-    downVote
-  },
-  context) => {
-  let selectedClass = "";
-
-  if (downVoted) {
-    selectedClass = "is-vote-selected";
-  } else if (upVoted) {
-     selectedClass = "is-vote-notselected";
-  }
-
-  const userLoggedIn = session && session.user;
-  const disabled = false;
-  const voteAction = () => downVote && downVote(context);
-
-  return (
-    <VoteButton
-      buttonClassName="comment__votes--down"
-      iconName="icon-chevron-bottom"
-      text={I18n.t("components.down_vote_button.text")}
-      votes={downVotes}
-      voteAction={voteAction}
-      disabled={disabled}
-      selectedClass={selectedClass}
-      userLoggedIn={userLoggedIn}
-    />
-  );
-};
-
-DownVoteButton.contextTypes = {
-  locale: PropTypes.string,
-  toggleTranslations: PropTypes.bool
-};
-
-const downVoteMutation = require("../mutations/down_vote.mutation.graphql");
-const getCommentsQuery = require("../queries/comments.query.graphql");
-
-const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps>(downVoteMutation, {
-  props: ({ ownProps, mutate }: { ownProps: DownVoteButtonProps, mutate: MutationFunc<DownVoteMutation> }) => ({
-    downVote: ({ locale, toggleTranslations }: any) => mutate({
-      variables: {
-        locale,
-        toggleTranslations,
-        id: ownProps.comment.id
-      },
-      optimisticResponse: {
-        __typename: "Mutation",
-        comment: {
-          __typename: "CommentMutation",
-          downVote: {
-            __typename: "Comment",
-            ...ownProps.comment,
-            downVotes: ownProps.comment.downVotes + (ownProps.comment.downVoted ? -1 : 1),
-            downVoted: true
-          }
-        }
-      },
-      update: (store, { data }: { data: DownVoteMutation }) => {
-        const variables = {
-          locale,
-          toggleTranslations,
-          commentableId: ownProps.rootCommentable.id,
-          commentableType: ownProps.rootCommentable.type,
-          orderBy: ownProps.orderBy,
-          singleCommentId: null
-        };
-
-        const commentReducer = (comment: CommentFragment): CommentFragment => {
-          const replies = comment.comments || [];
-
-          if (comment.id === ownProps.comment.id && data.comment) {
-            return data.comment.downVote;
-          }
-
-          return {
-            ...comment,
-            comments: replies.map(commentReducer)
-          };
-        };
-
-        const prev = store.readQuery<GetCommentsQuery>({ query: getCommentsQuery, variables });
-
-        if (prev) {
-          store.writeQuery({
-            query: getCommentsQuery,
-            data: {
-              ...prev,
-              commentable: {
-                ...prev.commentable,
-                comments: prev.commentable.comments.map(commentReducer)
-              }
-            },
-            variables
-          });
-        }
-      }
-    })
-  })
-})(DownVoteButton);
-
-export default DownVoteButtonWithMutation;

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

@@ -1,59 +0,0 @@
-import { shallow } from "enzyme";
-import * as React from "react";
-
-import { UpVoteButton } from "./up_vote_button.component";
-import VoteButton from "./vote_button.component";
-
-import generateCommentsData from "../support/generate_comments_data";
-import generateUserData from "../support/generate_user_data";
-
-import { UpVoteButtonFragment } from "../support/schema";
-
-describe("<UpVoteButton />", () => {
-  const orderBy = "older";
-  const rootCommentable = {
-    id: "1",
-    type: "Decidim::DummyResources::DummyResource"
-  };
-  let comment: UpVoteButtonFragment;
-  let session: any = null;
-  const upVote = jasmine.createSpy("upVote");
-
-  beforeEach(() => {
-    const commentsData = generateCommentsData(1);
-    session = {
-      user: generateUserData()
-    };
-    comment = commentsData[0];
-  });
-
-  it("should render a VoteButton component with the correct props", () => {
-    const wrapper = shallow(<UpVoteButton session={session} comment={comment} upVote={upVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("buttonClassName")).toEqual("comment__votes--up");
-    expect(wrapper.find(VoteButton).prop("iconName")).toEqual("icon-chevron-top");
-    expect(wrapper.find(VoteButton).prop("votes")).toEqual(comment.upVotes);
-  });
-
-  it("should pass disabled prop as false if comment upVoted is true", () => {
-    comment.upVoted = true;
-    const wrapper = shallow(<UpVoteButton session={session} comment={comment} upVote={upVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("disabled")).toBeFalsy();
-  });
-
-  it("should pass disabled prop as false if comment downVoted is true", () => {
-    comment.downVoted = true;
-    const wrapper = shallow(<UpVoteButton session={session} comment={comment} upVote={upVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-    expect(wrapper.find(VoteButton).prop("disabled")).toBeFalsy();
-  });
-
-  describe("when session is not present", () => {
-    beforeEach(() => {
-      session = null;
-    });
-
-    it("should pass userLoggedIn as false", () => {
-      const wrapper = shallow(<UpVoteButton session={session} comment={comment} upVote={upVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
-      expect(wrapper.find(VoteButton).prop("userLoggedIn")).toBeFalsy();
-    });
-  });
-});

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

@@ -1,133 +0,0 @@
-import * as React from "react";
-import { graphql, MutationFunc } from "react-apollo";
-
-const PropTypes = require("prop-types");
-
-import VoteButton from "./vote_button.component";
-
-const { I18n } = require("react-i18nify");
-
-import {
-  AddCommentFormCommentableFragment,
-  AddCommentFormSessionFragment,
-  CommentFragment,
-  GetCommentsQuery,
-  UpVoteButtonFragment,
-  UpVoteMutation
-} from "../support/schema";
-
-interface UpVoteButtonProps {
-  session: AddCommentFormSessionFragment & {
-    user: any;
-  } | null;
-  comment: UpVoteButtonFragment;
-  upVote?: (context: any) => void;
-  rootCommentable: AddCommentFormCommentableFragment;
-  orderBy: string;
-}
-
-export const UpVoteButton: React.SFC<UpVoteButtonProps> = (
-  {
-    session,
-    comment: { upVotes, upVoted, downVoted },
-    upVote
-  },
-  context) => {
-  let selectedClass = "";
-
-  if (upVoted) {
-    selectedClass = "is-vote-selected";
-  } else if (downVoted) {
-     selectedClass = "is-vote-notselected";
-  }
-
-  const userLoggedIn = session && session.user;
-  const disabled = false;
-  const voteAction = () => upVote && upVote(context);
-
-  return (
-    <VoteButton
-      buttonClassName="comment__votes--up"
-      iconName="icon-chevron-top"
-      text={I18n.t("components.up_vote_button.text")}
-      votes={upVotes}
-      voteAction={voteAction}
-      disabled={disabled}
-      selectedClass={selectedClass}
-      userLoggedIn={userLoggedIn}
-    />
-  );
-};
-
-UpVoteButton.contextTypes = {
-  locale: PropTypes.string,
-  toggleTranslations: PropTypes.bool
-};
-
-const upVoteMutation = require("../mutations/up_vote.mutation.graphql");
-const getCommentsQuery = require("../queries/comments.query.graphql");
-
-const UpVoteButtonWithMutation = graphql<UpVoteMutation, UpVoteButtonProps>(upVoteMutation, {
-  props: ({ ownProps, mutate }: { ownProps: UpVoteButtonProps, mutate: MutationFunc<UpVoteMutation> }) => ({
-    upVote: ({ locale, toggleTranslations }: any) => mutate({
-      variables: {
-        locale,
-        toggleTranslations,
-        id: ownProps.comment.id
-      },
-      optimisticResponse: {
-        __typename: "Mutation",
-        comment: {
-          __typename: "CommentMutation",
-          upVote: {
-            __typename: "Comment",
-            ...ownProps.comment,
-            upVotes: ownProps.comment.upVotes + (ownProps.comment.upVoted ? -1 : 1),
-            upVoted: true
-          }
-        }
-      },
-      update: (store, { data }: { data: UpVoteMutation }) => {
-        const variables = {
-          locale,
-          toggleTranslations,
-          commentableId: ownProps.rootCommentable.id,
-          commentableType: ownProps.rootCommentable.type,
-          orderBy: ownProps.orderBy,
-          singleCommentId: null
-        };
-
-        const commentReducer = (comment: CommentFragment): CommentFragment => {
-          const replies = comment.comments || [];
-
-          if (comment.id === ownProps.comment.id && data.comment) {
-            return data.comment.upVote;
-          }
-
-          return {
-            ...comment,
-            comments: replies.map(commentReducer)
-          };
-        };
-
-        const prev = store.readQuery<GetCommentsQuery>({ query: getCommentsQuery, variables });
-
-        if (prev) {
-          store.writeQuery({
-            query: getCommentsQuery,
-            data: {
-              ...prev,
-              commentable: {
-                ...prev.commentable,
-                comments: prev.commentable.comments.map(commentReducer)
-              }
-            },
-            variables
-          });
-        }
-      }
-    })
-  })
-})(UpVoteButton);
-
-export default UpVoteButtonWithMutation;