decidim-comments 0.23.6 → 0.24.0.rc1

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

@@ -1,50 +0,0 @@
-import * as React from "react";
-import Icon from "../application/icon.component";
-
-interface VoteButtonProps {
-  buttonClassName: string;
-  iconName: string;
-  text: string;
-  votes: number;
-  voteAction?: () => void;
-  disabled?: boolean;
-  selectedClass?: string;
-  userLoggedIn: boolean;
-}
-
-const preventDefault = (event: any) => {
-  event.preventDefault();
-};
-
-const VoteButton: React.SFC<VoteButtonProps> = ({
-  buttonClassName,
-  iconName,
-  text,
-  votes,
-  voteAction,
-  disabled,
-  selectedClass,
-  userLoggedIn
-}) => (
-  <button
-    className={`${buttonClassName} ${selectedClass}`}
-    onClick={userLoggedIn ? voteAction : preventDefault}
-    disabled={disabled}
-    title={text}
-    data-open={userLoggedIn ? null : "loginModal"}
-  >
-    <span className="show-for-sr">{text}</span>
-    <Icon name={iconName} iconExtraClassName="icon--small" />
-    {` ${votes}`}
-  </button>
-);
-
-VoteButton.defaultProps = {
-  buttonClassName: "",
-  iconName: "",
-  votes: 0,
-  selectedClass: "selected",
-  disabled: false
-};
-
-export default VoteButton;

data/app/frontend/comments/vote_button_component.test.tsx

@@ -1,64 +0,0 @@
-import { shallow } from "enzyme";
-import * as React from "react";
-import Icon from "../application/icon.component";
-import VoteButton from "./vote_button.component";
-
-describe("<VoteButton />", () => {
-  const voteAction: jasmine.Spy = jasmine.createSpy("voteAction");
-  const preventDefault: jasmine.Spy = jasmine.createSpy("preventDefault");
-
-  beforeEach(() => {
-    voteAction.calls.reset();
-    preventDefault.calls.reset();
-  });
-
-  it("should render the number of votes passed as a prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
-    expect(wrapper.find("button").text()).toMatch(/10/);
-  });
-
-  it("should render a button with the given buttonClassName", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
-    expect(wrapper.find("button.vote-button").exists()).toBeTruthy();
-  });
-
-  it("should render a Icon component with the correct name prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
-    expect(wrapper.find(Icon).prop("name")).toEqual("vote-icon");
-  });
-
-  it("should render a button with the text as title attribute and screen reader visible element", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
-    expect(wrapper.find("button").prop("title")).toBe("Test");
-    expect(wrapper.find("button span.show-for-sr").text()).toEqual("Test");
-  });
-
-  it("should call the voteAction prop on click", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
-    wrapper.find("button").simulate("click");
-    expect(voteAction).toHaveBeenCalled();
-  });
-
-  it("should disable the button based on the disabled prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} userLoggedIn={true} />);
-    expect(wrapper.find("button").props()).toHaveProperty("disabled");
-  });
-
-  it("should render a button with the given selectedClass", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" userLoggedIn={true} />);
-    expect(wrapper.find(".is-vote-selected").exists()).toBeTruthy();
-  });
-
-  describe("when userLoggedIn prop is false", () => {
-    it("should add data-open prop as 'loginModal' to the button", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
-      expect(wrapper.find("button").prop("data-open")).toBe("loginModal");
-    });
-
-    it("should call the event preventDefault method", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
-      wrapper.find("button").simulate("click", { preventDefault });
-      expect(preventDefault).toHaveBeenCalled();
-    });
-  });
-});

data/app/frontend/entry.ts

@@ -1,38 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import Comments, { CommentsApplicationProps } from "./comments/comments.component";
-import loadTranslations from "./support/load_translations";
-
-window.DecidimComments = window.DecidimComments || {};
-
-interface StorageDict {
-  [key: string]: string;
-}
-
-window.DecidimComments.renderCommentsComponent = (nodeId: string, props: CommentsApplicationProps) => {
-  const node = window.$(`#${nodeId}`)[0];
-  const queryDict: StorageDict = {};
-  window
-    .location
-    .search
-    .substr(1)
-    .split("&")
-    .forEach(item => queryDict[item.split("=")[0]] = item.split("=")[1]);
-
-  props = { ...props, singleCommentId: queryDict.commentId };
-
-  ReactDOM.render(
-    React.createElement(Comments, props),
-    node
-  );
-
-  if (queryDict.commentId) {
-    $([document.documentElement, document.body]).animate({
-      scrollTop: $("#comments").offset()!.top
-    }, 2000);
-  }
-};
-
-// Load component locales from yaml files
-loadTranslations();

data/app/frontend/entry_test.ts

@@ -1,6 +0,0 @@
-import { configure } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
-
-import "jest-localstorage-mock";
-
-configure({ adapter: new Adapter() });

data/app/frontend/fragments/add_comment_form_commentable.fragment.graphql

@@ -1,4 +0,0 @@
-fragment AddCommentFormCommentable on Commentable {
-  id
-  type
-}

data/app/frontend/fragments/add_comment_form_session.fragment.graphql

@@ -1,6 +0,0 @@
-fragment AddCommentFormSession on Session {
-  verifiedUserGroups {
-    id
-    name
-  }
-}

data/app/frontend/fragments/comment.fragment.graphql

@@ -1,14 +0,0 @@
-#import "../fragments/comment_data.fragment.graphql"
-
-fragment Comment on Comment {
-  ...CommentData
-  comments {
-    ...CommentData
-    comments {
-      ...CommentData
-      comments {
-        ...CommentData
-      }
-    }
-  }
-}

data/app/frontend/fragments/comment_data.fragment.graphql

@@ -1,27 +0,0 @@
-#import "../fragments/up_vote_button.fragment.graphql"
-#import "../fragments/down_vote_button.fragment.graphql"
-
-fragment CommentData on Comment {
-  id
-  sgid
-  type
-  body
-  formattedBody
-  createdAt
-  formattedCreatedAt
-  author {
-    name
-    nickname
-    avatarUrl
-    profilePath
-    deleted
-    badge
-  }
-  hasComments
-  acceptsNewComments
-  userAllowedToComment
-  alignment
-  alreadyReported
-  ...UpVoteButton
-  ...DownVoteButton
-}

data/app/frontend/fragments/comment_thread.fragment.graphql

@@ -1,6 +0,0 @@
-#import "../fragments/comment.fragment.graphql"
-
-fragment CommentThread on Comment {
-  hasComments
-  ...Comment
-}

data/app/frontend/fragments/down_vote_button.fragment.graphql

@@ -1,6 +0,0 @@
-fragment DownVoteButton on Comment {
-  id
-  downVotes
-  downVoted
-  upVoted
-}

data/app/frontend/fragments/up_vote_button.fragment.graphql

@@ -1,6 +0,0 @@
-fragment UpVoteButton on Comment {
-  id
-  upVotes
-  upVoted
-  downVoted
-}

data/app/frontend/mutations/add_comment.mutation.graphql

@@ -1,9 +0,0 @@
-#import "../fragments/comment_thread.fragment.graphql"
-
-mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int, $userGroupId: ID, $locale: String!, $toggleTranslations: Boolean!)  {
-  commentable(id: $commentableId, type: $commentableType, locale: $locale, toggleTranslations: $toggleTranslations) {
-    addComment(body: $body, alignment: $alignment, userGroupId: $userGroupId) {
-      ...CommentThread
-    }
-  }
-}

data/app/frontend/mutations/down_vote.mutation.graphql

@@ -1,9 +0,0 @@
-#import "../fragments/comment.fragment.graphql"
-
-mutation DownVote($id: ID!, $locale: String!, $toggleTranslations: Boolean!) {
-  comment(id: $id, locale: $locale, toggleTranslations: $toggleTranslations) {
-    downVote {
-      ...Comment
-    }
-  }
-}

data/app/frontend/mutations/up_vote.mutation.graphql

@@ -1,9 +0,0 @@
-#import "../fragments/comment.fragment.graphql"
-
-mutation UpVote($id: ID!, $locale: String!, $toggleTranslations: Boolean!) {
-  comment(id: $id, locale: $locale, toggleTranslations: $toggleTranslations) {
-    upVote {
-      ...Comment
-    }
-  }
-}

data/app/frontend/queries/comments.query.graphql

@@ -1,26 +0,0 @@
-#import "../fragments/add_comment_form_session.fragment.graphql"
-#import "../fragments/comment_thread.fragment.graphql"
-#import "../fragments/add_comment_form_commentable.fragment.graphql"
-query GetComments($commentableId: String!, $commentableType: String!, $orderBy: String, $singleCommentId: String, $locale: String!, $toggleTranslations: Boolean!) {
-  session {
-    user {
-      name
-      nickname
-      avatarUrl
-      organizationName
-    }
-    ...AddCommentFormSession
-  }
-  commentable(id: $commentableId, type: $commentableType, locale: $locale, toggleTranslations: $toggleTranslations) {
-    acceptsNewComments
-    userAllowedToComment
-    commentsHaveAlignment
-    commentsHaveVotes
-    totalCommentsCount
-    comments(orderBy: $orderBy, singleCommentId: $singleCommentId) {
-      id
-      ...CommentThread
-    }
-    ...AddCommentFormCommentable
-  }
-}

data/app/frontend/support/asset_url.ts

@@ -1,11 +0,0 @@
-const assetUrl = (name: string): string => {
-  const url = window.DecidimComments.assets[name];
-
-  if (!url) {
-    throw new Error(`Asset "${name}" can't be found on decidim comments manifest.`);
-  }
-
-  return url;
-};
-
-export default assetUrl;

data/app/frontend/support/generate_comments_data.ts

@@ -1,49 +0,0 @@
-import { date, image, lorem, name, random } from "faker/locale/en";
-
-import { CommentFragment } from "../support/schema";
-
-/**
- * Generate random comment data to emulate a database real content
- * @param {number} num - The number of comments to generate random data
- * @returns {Object[]} - An array of objects representing comments data
- */
-const generateCommentsData = (num = 1) => {
-  const commentsData: CommentFragment[] = [];
-
-  for (let idx = 0; idx < num; idx += 1) {
-    const creationDate = date.recent();
-    const nickname = name.findName();
-
-    commentsData.push({
-      id: random.uuid(),
-      type: "Decidim::Comments::Comment",
-      body: lorem.words(),
-      formattedBody: lorem.words(),
-      createdAt: creationDate.toISOString(),
-      formattedCreatedAt: creationDate.toLocaleTimeString(),
-      author: {
-        name: `${name.firstName()} ${name.lastName()}`,
-        nickname: `@${nickname}`,
-        avatarUrl: image.imageUrl(),
-        profilePath: `/profiles/${nickname}`,
-        deleted: false,
-        badge: "verified-badge"
-      },
-      hasComments: false,
-      comments: [],
-      acceptsNewComments: true,
-      userAllowedToComment: true,
-      alignment: 0,
-      upVotes: random.number(),
-      upVoted: false,
-      downVotes: random.number(),
-      downVoted: false,
-      sgid: random.uuid(),
-      alreadyReported: false
-    });
-  }
-
-  return commentsData;
-};
-
-export default generateCommentsData;

data/app/frontend/support/generate_user_data.ts

@@ -1,14 +0,0 @@
-import { name } from "faker/locale/en";
-
-/**
- * Generate random user data to emulate a database real content
- * @returns {Object} - An object representing user data
- */
-const generateUserData = () => {
-  return {
-    name: `${name.firstName()} ${name.lastName()}`,
-    nickname: `@${name.findName()}`
-  };
-};
-
-export default generateUserData;

data/app/frontend/support/generate_user_group_data.ts

@@ -1,14 +0,0 @@
-import { company, random } from "faker/locale/en";
-
-/**
- * Generate random user group data to emulate a database real content
- * @returns {Object} - An object representing user group data
- */
-const generateUserGrouprData = () => {
-  return {
-    id: random.uuid(),
-    name: company.companyName()
-  };
-};
-
-export default generateUserGrouprData;

data/app/frontend/support/graphql_transformer.js

@@ -1,32 +0,0 @@
-/* eslint-env node */
-const gql = require("graphql-tag");
-
-// Takes `source` (the source GraphQL query string)
-// and `doc` (the parsed GraphQL document) and tacks on
-// the imported definitions.
-const expandImports = (source) => {
-  const lines = source.split("\n");
-  let outputCode = "";
-
-  lines.some((line) => {
-    if (line[0] === "#" && line.slice(1).split(" ")[0] === "import") {
-      const importFile = line.slice(1).split(" ")[1];
-      const parseDocument = `require(${importFile})`;
-      const appendDef = `doc.definitions = doc.definitions.concat(${parseDocument}.definitions);`;
-      outputCode += `${appendDef}\n`;
-    }
-    return (line.length !== 0 && line[0] !== "#");
-  });
-
-  return outputCode;
-}
-
-module.exports = {
-  process(src) {
-    const doc = gql`${src}`;
-    const outputCode = `var doc = ${JSON.stringify(doc)};`;
-    const importOutputCode = expandImports(src, doc);
-
-    return `${outputCode}\n${importOutputCode}\nmodule.exports = doc;`;
-  }
-};

data/app/frontend/support/load_translations.ts

@@ -1,48 +0,0 @@
-/* eslint-disable no-param-reassign */
-import requireAll from "./require_all";
-
-const { I18n } = require("react-i18nify");
-
-/**
- * Load components translations from yaml files and import them into
- * react-i18ify system so they can be used via `I18n.t` method.
- * @returns {Void} - Nothing
- */
-const loadTranslations = () => {
-  const translationsContext = (require as any).context("../../../config/locales/", true, /\.yml$/);
-  const translationFiles = requireAll(translationsContext);
-
-  const translations = translationsContext.keys().reduce((acc: any, key: string, index: number) => {
-    const match = key.match(/\.\/(.*)\.yml/);
-
-    if (match) {
-      const locale = match[1];
-      const translationKeys = translationFiles[index][locale];
-
-      if (translationKeys && translationKeys.decidim) {
-        acc[locale] = translationKeys.decidim;
-      }
-    }
-
-    return acc;
-  }, {});
-
-  I18n.setTranslations(translations);
-};
-
-/**
- * Load components translations from a locale files and import them into
- * react-i18ify system so they can be used via `I18n.t` method.
- * @returns {Void} - Nothing
- */
-export const loadLocaleTranslations = (locale: string) => {
-  const translationFile = require(`./../../../config/locales/${locale}.yml`);
-  const translations = Object.keys(translationFile).reduce((acc: any, key: string) => {
-    acc[locale] = translationFile[locale].decidim;
-    return acc;
-  }, {});
-
-  I18n.setTranslations(translations);
-};
-
-export default loadTranslations;

data/app/frontend/support/require_all.ts

@@ -1,10 +0,0 @@
-/**
- * Given a webpack require context it require all the files
- * @param {Object} requireContext - A webpack require context
- * @returns {Object[]} - An array of webpack modules
- */
-const requireAll = (requireContext: any) => {
-  return requireContext.keys().map(requireContext);
-};
-
-export default requireAll;

data/app/frontend/support/resolve_graphql_query.ts

@@ -1,37 +0,0 @@
-import graphql, { filter } from "graphql-anywhere";
-
-/**
- * A simple resolver which returns object properties to easily
- * traverse a graphql response
- * @param {String} fieldName - An object property
- * @param {Object} root - An object
- * @returns {any} - An object's property value
- */
-const resolver = (fieldName: string, root: any) => root[fieldName];
-
-/**
- * A helper function to mock a graphql api request and return its
- * result. The result can be filtered by the same query so it just
- * returns a data subset.
- * @param {String} document - A graphql query document
- * @param {options} options - An object with optional options
- * @returns {Object} - The result of the query filtered or not
- */
-const resolveGraphQLQuery = (document: any, options: any = {}) => {
-  const { filterResult, rootValue, context, variables } = options;
-
-  const result = graphql(
-    resolver,
-    document,
-    rootValue,
-    context,
-    variables
-  );
-
-  if (filterResult) {
-    return filter(document, result);
-  }
-  return result;
-};
-
-export default resolveGraphQLQuery;