decidim-comments 0.0.6 → 0.0.7

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Icon       from "../application/icon.component";
+
+interface VoteButtonProps {
+  buttonClassName: string;
+  iconName: string;
+  votes: number;
+  voteAction?: () => void;
+  disabled?: boolean;
+  selectedClass?: string;
+}
+
+const VoteButton: React.SFC<VoteButtonProps> = ({
+  buttonClassName,
+  iconName,
+  votes,
+  voteAction,
+  disabled,
+  selectedClass,
+}) => (
+  <button
+    className={`${buttonClassName} ${selectedClass}`}
+    onClick={voteAction}
+    disabled={disabled}
+  >
+    <Icon name={iconName} iconExtraClassName="icon--small" />
+    {` ${votes}`}
+  </button>
+);
+
+VoteButton.defaultProps = {
+  selectedClass: "selected",
+  disabled: false,
+};
+
+export default VoteButton;

data/app/frontend/comments/{vote_button_component.test.jsx → vote_button_component.test.tsx}

@@ -1,43 +1,39 @@
-/* eslint-disable no-unused-expressions */
-import { shallow } from 'enzyme';
-
-import VoteButton  from './vote_button.component';
-import Icon        from '../application/icon.component';
-
-import stubComponent from '../support/stub_component';
+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 = sinon.spy();
-  stubComponent(Icon);
+  const voteAction: jasmine.Spy = jasmine.createSpy("voteAction");
 
   it("should render the number of votes passed as a prop", () => {
     const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} />);
-    expect(wrapper.find('button').text()).to.match(/10/);
+    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" voteAction={voteAction} />);
-    expect(wrapper.find('button.vote-button')).to.be.present();
+    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" voteAction={voteAction} />);
-    expect(wrapper.find(Icon)).to.have.prop("name").equal('vote-icon');
+    expect(wrapper.find(Icon).prop("name")).toEqual("vote-icon");
   });
 
   it("should call the voteAction prop on click", () => {
     const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} />);
-    wrapper.find('button').simulate('click');
-    expect(voteAction).to.have.been.called;
+    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" voteAction={voteAction} disabled />);
-    expect(wrapper.find('button')).to.be.disabled();
-  })
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={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" voteAction={voteAction} disabled selectedClass="is-vote-selected" />);
-    expect(wrapper.find('.is-vote-selected')).to.be.present();
-  })
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" />);
+    expect(wrapper.find(".is-vote-selected").exists()).toBeTruthy();
+  });
 });

data/app/frontend/entry.ts

@@ -0,0 +1,19 @@
+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 || {};
+
+window.DecidimComments.renderCommentsComponent = (nodeId: string, props: CommentsApplicationProps) => {
+  let node = window.$(`#${nodeId}`)[0];
+
+  ReactDOM.render(
+    React.createElement(Comments, props),
+    node,
+  );
+};
+
+// Load component locales from yaml files
+loadTranslations();

data/app/frontend/{comments → fragments}/add_comment_form_commentable.fragment.graphql

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

data/app/frontend/{comments → fragments}/add_comment_form_session.fragment.graphql

@@ -3,4 +3,4 @@ fragment AddCommentFormSession on Session {
     id
     name
   }
-}
+}

data/app/frontend/{comments → fragments}/comment.fragment.graphql

@@ -1,3 +1,5 @@
+#import "../fragments/comment_data.fragment.graphql"
+
 fragment Comment on Comment {
   ...CommentData
   comments {
@@ -9,4 +11,4 @@ fragment Comment on Comment {
       }
     }
   }
-}
+}

data/app/frontend/{comments → fragments}/comment_data.fragment.graphql

@@ -1,3 +1,6 @@
+#import "../fragments/up_vote_button.fragment.graphql"
+#import "../fragments/down_vote_button.fragment.graphql"
+
 fragment CommentData on Comment {
   id
   sgid
@@ -12,6 +15,6 @@ fragment CommentData on Comment {
   acceptsNewComments
   alignment
   alreadyReported
-  ...UpVote
-  ...DownVote
-}
+  ...UpVoteButton
+  ...DownVoteButton
+}

data/app/frontend/{comments → fragments}/comment_thread.fragment.graphql

@@ -1,7 +1,9 @@
+#import "../fragments/comment.fragment.graphql"
+
 fragment CommentThread on Comment {
   author {
     name
   }
   hasComments
   ...Comment
-}
+}

data/app/frontend/{comments/down_vote.fragment.graphql → fragments/down_vote_button.fragment.graphql}

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

data/app/frontend/{comments/up_vote.fragment.graphql → fragments/up_vote_button.fragment.graphql}

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

data/app/frontend/{comments/add_comment_form.mutation.graphql → mutations/add_comment.mutation.graphql}

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

data/app/frontend/{comments → mutations}/down_vote.mutation.graphql

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

data/app/frontend/{comments → mutations}/up_vote.mutation.graphql

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

data/app/frontend/{comments → queries}/comments.query.graphql

@@ -1,3 +1,6 @@
+#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) {
   session {
     user {
@@ -17,4 +20,4 @@ query GetComments($commentableId: String!, $commentableType: String!, $orderBy:
     }
     ...AddCommentFormCommentable
   }
-}
+}

data/app/frontend/support/{asset_url.js → asset_url.ts}

@@ -1,4 +1,4 @@
-const assetUrl = (name) => {
+const assetUrl = (name: string): string => {
   const url = window.DecidimComments.assets[name];
 
   if (!url) {

data/app/frontend/support/{generate_comments_data.js → generate_comments_data.ts}

@@ -1,4 +1,6 @@
-import { random, name, date, image } from 'faker/locale/en';
+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
@@ -6,16 +8,17 @@ import { random, name, date, image } from 'faker/locale/en';
  * @returns {Object[]} - An array of objects representing comments data
  */
 const generateCommentsData = (num = 1) => {
-  let commentsData = [];
+  let commentsData: CommentFragment[] = [];
 
   for (let idx = 0; idx < num; idx += 1) {
     commentsData.push({
       id: random.uuid(),
-      body: random.words(),
+      type: "Decidim::Comments::Comment",
+      body: lorem.words(),
       createdAt: date.past().toISOString(),
       author: {
         name: name.findName(),
-        avatarUrl: image.imageUrl()
+        avatarUrl: image.imageUrl(),
       },
       hasComments: false,
       comments: [],
@@ -24,8 +27,10 @@ const generateCommentsData = (num = 1) => {
       upVotes: random.number(),
       upVoted: false,
       downVotes: random.number(),
-      downVoted: false
-    })
+      downVoted: false,
+      sgid: random.uuid(),
+      alreadyReported: false,
+    });
   }
 
   return commentsData;

data/app/frontend/support/{generate_user_data.js → generate_user_data.ts}

@@ -1,4 +1,4 @@
-import { name } from 'faker/locale/en';
+import { name } from "faker/locale/en";
 
 /**
  * Generate random user data to emulate a database real content
@@ -6,7 +6,7 @@ import { name } from 'faker/locale/en';
  */
 const generateUserData = () => {
   return {
-    name: name.findName()
+    name: name.findName(),
   };
 };
 

data/app/frontend/support/{generate_user_group_data.js → generate_user_group_data.ts}

@@ -1,4 +1,4 @@
-import { random, company } from 'faker/locale/en';
+import { company, random } from "faker/locale/en";
 
 /**
  * Generate random user group data to emulate a database real content
@@ -7,7 +7,7 @@ import { random, company } from 'faker/locale/en';
 const generateUserGrouprData = () => {
   return {
     id: random.uuid(),
-    name: company.companyName()
+    name: company.companyName(),
   };
 };
 

data/app/frontend/support/graphql_transformer.js

@@ -0,0 +1,32 @@
+/* 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

@@ -0,0 +1,44 @@
+/* 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 = (<any> require).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) {
+      let locale = match[1];
+      acc[locale] = translationFiles[index][locale].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.js → require_all.ts}

@@ -3,7 +3,7 @@
  * @param {Object} requireContext - A webpack require context
  * @returns {Object[]} - An array of webpack modules
  */
-const requireAll = (requireContext) => {
+const requireAll = (requireContext: any) => {
   return requireContext.keys().map(requireContext);
 };
 

data/app/frontend/support/{resolve_graphql_query.js → resolve_graphql_query.ts}

@@ -1,5 +1,5 @@
-import graphql, { filter } from 'graphql-anywhere';
- 
+import graphql, { filter } from "graphql-anywhere";
+
 /**
  * A simple resolver which returns object properties to easily
  * traverse a graphql response
@@ -7,9 +7,9 @@ import graphql, { filter } from 'graphql-anywhere';
  * @param {Object} root - An object
  * @returns {any} - An object's property value
  */
-const resolver = (fieldName, root) => root[fieldName];
+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.
@@ -17,7 +17,7 @@ const resolver = (fieldName, root) => root[fieldName];
  * @param {options} options - An object with optional options
  * @returns {Object} - The result of the query filtered or not
  */
-const resolveGraphQLQuery = (document, options = {}) => {
+const resolveGraphQLQuery = (document: any, options: any = {}) => {
   const { filterResult, rootValue, context, variables } = options;
 
   let result = graphql(
@@ -25,13 +25,13 @@ const resolveGraphQLQuery = (document, options = {}) => {
     document,
     rootValue,
     context,
-    variables
+    variables,
   );
 
   if (filterResult) {
     return filter(document, result);
   }
   return result;
-}
+};
 
 export default resolveGraphQLQuery;