decidim-comments 0.0.1

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

@@ -0,0 +1,10 @@
+query GetComments($commentableId: String!, $commentableType: String!) {
+  currentUser {
+    name
+    avatarUrl
+  }
+  comments(commentableId: $commentableId, commentableType: $commentableType) {
+    id
+    ...CommentThread
+  }
+}

data/app/frontend/comments/featured_comment.component.jsx

@@ -0,0 +1,23 @@
+import { Component } from 'react';
+import { I18n }      from 'react-i18nify';
+
+import Comment       from './comment.component';
+
+/**
+ * A wrapper component for a highlighted component.
+ * @class
+ * @augments Component
+ * @todo It's not used right now
+ */
+export default class FeaturedComment extends Component {
+  render() {
+    return (
+      <section className="comments">
+        <h4 className="section-heading">{ I18n.t("components.featured_comment.title") }</h4>
+        <div className="comment-thread comment--pinned">
+          <Comment />
+        </div>
+      </section>
+    );
+  }
+}

data/app/frontend/comments/featured_comment.component.test.jsx

@@ -0,0 +1,15 @@
+import { shallow }     from 'enzyme';
+
+import FeaturedComment from './featured_comment.component';
+import Comment         from './comment.component';
+
+import stubComponent   from '../support/stub_component';
+
+describe('<FeaturedComment />', () => {
+  stubComponent(Comment);
+
+  it("should render a section of class comments", () => {
+    const wrapper = shallow(<FeaturedComment />);
+    expect(wrapper.find('section.comments')).to.be.present();
+  });
+});

data/app/frontend/entry.js

@@ -0,0 +1,24 @@
+import ReactDOM         from 'react-dom';
+
+import loadTranslations from './support/load_translations';
+import Comments         from './comments/comments.component';
+
+// Expose global components
+window.DecidimComments.renderCommentsComponent = (nodeId, props) => {
+  var node = $(`#${nodeId}`)[0];
+
+  ReactDOM.render(
+    React.createElement(Comments,props),
+    node
+  );
+
+  function unmountComponent() {
+    ReactDOM.unmountComponentAtNode(node);
+    $(document).off('turbolinks:before-render', unmountComponent);
+  }
+
+  $(document).on('turbolinks:before-render', unmountComponent);
+};
+
+// Load component locales from yaml files
+loadTranslations();

data/app/frontend/entry.test.js

@@ -0,0 +1,29 @@
+// ---------------------------------------
+// Test Environment Setup
+// ---------------------------------------
+import sinon            from 'sinon/pkg/sinon';
+import chai             from 'chai';
+import sinonChai        from 'sinon-chai';
+import chaiAsPromised   from 'chai-as-promised';
+import chaiEnzyme       from 'chai-enzyme';
+import loadTranslations from './support/load_translations';
+import requireAll       from './support/require_all';
+
+// 
+chai.use(sinonChai)
+chai.use(chaiAsPromised)
+chai.use(chaiEnzyme())
+// 
+window.chai = chai
+window.sinon = sinon
+window.expect = chai.expect
+window.should = chai.should()
+
+// ---------------------------------------
+// Require Tests
+// ---------------------------------------
+requireAll(require.context('./application/', true, /\.test\.jsx?$/));
+requireAll(require.context('./comments/', true, /\.test\.jsx?$/));
+
+// Load component locales from yaml files
+loadTranslations();

data/app/frontend/support/asset_url.js

@@ -0,0 +1,11 @@
+const assetUrl = (name) => {
+  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.js

@@ -0,0 +1,29 @@
+import { random, name, date, image } from 'faker/locale/en';
+
+/** 
+ * 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) => {
+  let commentsData = [];
+
+  for (let idx = 0; idx < num; idx += 1) {
+    commentsData.push({
+      id: random.uuid(),
+      body: random.words(),
+      createdAt: date.past().toString(),
+      author: {
+        name: name.findName(),
+        avatarUrl: image.imageUrl()
+      },
+      replies: [],
+      canHaveReplies: true,
+      alignment: 0
+    })
+  }
+
+  return commentsData;
+};
+
+export default generateCommentsData;

data/app/frontend/support/generate_current_user_data.js

@@ -0,0 +1,13 @@
+import { name } from 'faker/locale/en';
+
+/**
+ * Generate random current user data to emulate a database real content
+ * @returns {Object} - An object representing current user data
+ */
+const generateCurrentUserData = () => {
+  return {
+    name: name.findName()
+  };
+};
+
+export default generateCurrentUserData;

data/app/frontend/support/load_translations.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-param-reassign */
+import { I18n }   from 'react-i18nify';
+import requireAll from './require_all';
+
+/**
+ * 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.context('../../../config/locales/', true, /\.yml$/);
+  const translationFiles = requireAll(translationsContext);
+
+  const translations = translationsContext.keys().reduce((acc, key, index) => {
+    const locale = key.match(/\.\/(.*)\.yml/)[1];
+    acc[locale] = translationFiles[index][locale].decidim;
+    return acc;
+  }, {});
+
+  I18n.setTranslations(translations);
+};
+
+export default loadTranslations;

data/app/frontend/support/require_all.js

@@ -0,0 +1,10 @@
+/**
+ * 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) => {
+  return requireContext.keys().map(requireContext);
+};
+
+export default requireAll;

data/app/frontend/support/resolve_graphql_query.js

@@ -0,0 +1,37 @@
+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, root) => 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, options = {}) => {
+  const { filterResult, rootValue, context, variables } = options;
+
+  let result = graphql(
+    resolver,
+    document,
+    rootValue,
+    context,
+    variables
+  );
+
+  if (filterResult) {
+    return filter(document, result);
+  }
+  return result;
+}
+
+export default resolveGraphQLQuery;

data/app/frontend/support/stub_component.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-param-reassign */
+
+/**
+ * A helper function to stub the `propTypes` and `fragments` of a component.
+ * Useful for testing isolated components so the children propTypes are not
+ * evaluated.
+ * @param {ReactComponent} componentClass - A component constructor function or class
+ * @param {Object} options - An object which properties are used to stub component properties.
+ * @returns {ReactComponent} - A component with some properties stubbed
+ */
+const stubComponent = function(componentClass, options = {}) {
+  let originalPropTypes = {};
+  let originalFragments = {};
+
+  beforeEach(function() {
+    originalPropTypes = componentClass.propTypes;
+    originalFragments = componentClass.fragments;
+
+    componentClass.propTypes = options.propTypes || {};
+    componentClass.fragments = options.fragments || {};
+  });
+
+  afterEach(function() {
+    componentClass.propTypes = originalPropTypes;
+    componentClass.fragments = originalFragments;
+  });
+};
+
+export default stubComponent;

data/app/helpers/decidim/comments/comments_helper.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # A helper to expose the comments component for a commentable
+    module CommentsHelper
+      # Creates a Comments component which is rendered using `react_ujs`
+      # from react-rails gem
+      #
+      # resource - A commentable resource
+      # options - A hash of options (default: {})
+      #           :arguable - A boolean value to indicate if tihs option is available
+      #
+      # Returns a div which contain a RectComponent to be rendered by `react_ujs`
+      def comments_for(resource, options = {})
+        commentable_type = resource.class.name
+        commentable_id = resource.id.to_s
+        node_id = "comments-for-#{commentable_type.demodulize}-#{commentable_id}"
+
+        react_comments_component(node_id, commentableType: commentable_type,
+                                          commentableId: commentable_id,
+                                          options: options.slice(:arguable),
+                                          locale: I18n.locale)
+      end
+
+      # Private: Render Comments component using inline javascript
+      #
+      # node_id - The id of the DOMElement to render the React component
+      # props   - A hash corresponding to Comments component props
+      def react_comments_component(node_id, props)
+        content_tag("div", "", id: node_id) +
+          javascript_tag(%{
+            jQuery.ajax({
+              url: '#{asset_path("decidim/comments/comments.js")}',
+              dataType: 'script',
+              cache: true
+            }).then(function () {
+                window.DecidimComments.renderCommentsComponent(
+                  '#{node_id}',
+                  {
+                    commentableType: "#{props[:commentableType]}",
+                    commentableId: "#{props[:commentableId]}",
+                    options: JSON.parse("#{j(props[:options].to_json)}"),
+                    locale: "#{props[:locale]}"
+                  }
+                );
+              });
+          })
+      end
+    end
+  end
+end

data/app/models/decidim/comments/comment.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # Some resources will be configured as commentable objects so users can
+    # comment on them. The will be able to create conversations between users
+    # to discuss or share their thoughts about the resource.
+    class Comment < ApplicationRecord
+      # Limit the max depth of a comment tree. If C is a comment and R is a reply:
+      # C          (depth 0)
+      # |--R       (depth 1)
+      # |--R       (depth 1)
+      #    |--R    (depth 2)
+      #       |--R (depth 3)
+      MAX_DEPTH = 3
+
+      belongs_to :author, class_name: Decidim::User
+      belongs_to :commentable, polymorphic: true
+      has_many :replies, as: :commentable, class_name: Comment
+
+      validates :author, :commentable, :body, presence: true
+      validate :commentable_can_have_replies
+      validates :depth, numericality: { greater_than_or_equal_to: 0 }
+      validates :alignment, inclusion: { in: [0, 1, -1] }
+      validate :same_organization
+
+      before_save :compute_depth
+
+      delegate :organization, to: :commentable
+
+      # Public: Define if a comment can have replies or not
+      #
+      # Returns a bool value to indicate if comment can have replies
+      def can_have_replies?
+        depth < MAX_DEPTH
+      end
+
+      private
+
+      # Private: Check if commentable can have replies and if not adds
+      # a validation error to the model
+      def commentable_can_have_replies
+        errors.add(:commentable, :cannot_have_replies) if commentable.respond_to?(:can_have_replies?) && !commentable.can_have_replies?
+      end
+
+      # Private: Compute comment depth inside the current comment tree
+      def compute_depth
+        self.depth = commentable.depth + 1 if commentable.respond_to?(:depth)
+      end
+
+      def same_organization
+        errors.add(:commentable, :invalid) unless author.organization == organization
+      end
+    end
+  end
+end

data/app/types/decidim/comments/add_comment_type.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # This type represents a mutation to create new comments.
+    AddCommentType = GraphQL::ObjectType.define do
+      name "Add comment"
+      description "Add a new comment"
+
+      field :comment, CommentType, "The new created comment"
+    end
+  end
+end

data/app/types/decidim/comments/author_type.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # This type represents an author who owns a resource
+    AuthorType = GraphQL::ObjectType.define do
+      name "Author"
+      description "An author"
+
+      field :name, !types.String, "The user's name"
+      field :avatarUrl, !types.String, "The user's avatar url" do
+        resolve ->(obj, _args, _ctx) { obj.avatar.url }
+      end
+    end
+  end
+end

data/app/types/decidim/comments/comment_type.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # This type represents a comment on a commentable object.
+    CommentType = GraphQL::ObjectType.define do
+      name "Comment"
+      description "A comment"
+
+      field :id, !types.ID, "The Comment's unique ID"
+
+      field :body, !types.String, "The comment message"
+
+      field :createdAt, !types.String, "The creation date of the comment" do
+        property :created_at
+      end
+
+      field :author, !AuthorType, "The comment's author"
+
+      field :replies, !types[CommentType], "The comment's replies"
+
+      field :canHaveReplies, !types.Boolean, "Define if a comment can or not have replies" do
+        property :can_have_replies?
+      end
+
+      field :alignment, types.Int, "The comment's alignment. Can be 0 (neutral), 1 (in favor) or -1 (against)'"
+    end
+  end
+end

data/config/i18n-tasks.yml

@@ -0,0 +1,124 @@
+# i18n-tasks finds and manages missing and unused translations: https://github.com/glebm/i18n-tasks
+
+# The "main" locale.
+base_locale: en
+## All available locales are inferred from the data by default. Alternatively, specify them explicitly:
+locales: [en]
+## Reporting locale, default: en. Available: en, ru.
+# internal_locale: en
+
+# Read and write translations.
+data:
+  ## Translations are read from the file system. Supported format: YAML, JSON.
+  ## Provide a custom adapter:
+  # adapter: I18n::Tasks::Data::FileSystem
+
+  # Locale files or `File.find` patterns where translations are read from:
+  read:
+    ## Default:
+    # - config/locales/%{locale}.yml
+    ## More files:
+    # - config/locales/**/*.%{locale}.yml
+    ## Another gem (replace %#= with %=):
+    # - "<%#= %x[bundle show vagrant].chomp %>/templates/locales/%{locale}.yml"
+
+  # Locale files to write new keys to, based on a list of key pattern => file rules. Matched from top to bottom:
+  # `i18n-tasks normalize -p` will force move the keys according to these rules
+  write:
+    ## For example, write devise and simple form keys to their respective files:
+    # - ['{devise, simple_form}.*', 'config/locales/\1.%{locale}.yml']
+    ## Catch-all default:
+    # - config/locales/%{locale}.yml
+
+  ## Specify the router (see Readme for details). Valid values: conservative_router, pattern_router, or a custom class.
+  # router: convervative_router
+
+  yaml:
+    write:
+      # do not wrap lines at 80 characters
+      line_width: -1
+
+  ## Pretty-print JSON:
+  # json:
+  #   write:
+  #     indent: '  '
+  #     space: ' '
+  #     object_nl: "\n"
+  #     array_nl: "\n"
+
+# Find translate calls
+search:
+  ## Paths or `File.find` patterns to search in:
+  # paths:
+  #  - app/
+
+  ## Root directories for relative keys resolution.
+  # relative_roots:
+  #   - app/controllers
+  #   - app/helpers
+  #   - app/mailers
+  #   - app/presenters
+  #   - app/views
+
+  ## Files or `File.fnmatch` patterns to exclude from search. Some files are always excluded regardless of this setting:
+  ##   %w(*.jpg *.png *.gif *.svg *.ico *.eot *.otf *.ttf *.woff *.woff2 *.pdf *.css *.sass *.scss *.less *.yml *.json)
+  exclude:
+    - app/assets/images
+    - app/assets/fonts
+    - app/assets/javascripts/decidim/comments/bundle.js
+    - app/assets/javascripts/decidim/comments/bundle.js.map
+
+  ## Alternatively, the only files or `File.fnmatch patterns` to search in `paths`:
+  ## If specified, this settings takes priority over `exclude`, but `exclude` still applies.
+  # only: ["*.rb", "*.html.slim"]
+
+  ## If `strict` is `false`, guess usages such as t("categories.#{category}.title"). The default is `true`.
+  # strict: true
+
+  ## Multiple scanners can be used. Their results are merged.
+  ## The options specified above are passed down to each scanner. Per-scanner options can be specified as well.
+  ## See this example of a custom scanner: https://github.com/glebm/i18n-tasks/wiki/A-custom-scanner-example
+
+## Google Translate
+# translation:
+#   # Get an API key and set billing info at https://code.google.com/apis/console to use Google Translate
+#   api_key: "AbC-dEf5"
+
+## Do not consider these keys missing:
+ignore_missing:
+- 'components.*'
+# - 'errors.messages.{accepted,blank,invalid,too_short,too_long}'
+# - '{devise,simple_form}.*'
+
+## Consider these keys used:
+ignore_unused:
+- 'activerecord.errors.messages.*'
+- 'decidim.components.*'
+# - '{devise,kaminari,will_paginate}.*'
+# - 'simple_form.{yes,no}'
+# - 'simple_form.{placeholders,hints,labels}.*'
+# - 'simple_form.{error_notification,required}.:'
+
+## Exclude these keys from the `i18n-tasks eq-base' report:
+# ignore_eq_base:
+#   all:
+#     - common.ok
+#   fr,es:
+#     - common.brand
+
+## Ignore these keys completely:
+# ignore:
+#  - kaminari.*
+
+## Sometimes, it isn't possible for i18n-tasks to match the key correctly,
+## e.g. in case of a relative key defined in a helper method.
+## In these cases you can use the built-in PatternMapper to map patterns to keys, e.g.:
+#
+# <%#= I18n::Tasks.add_scanner 'I18n::Tasks::Scanners::PatternMapper',
+#        only: %w(*.html.haml *.html.slim),
+#        patterns: [['= title\b', '.page_title']] %>
+#
+# The PatternMapper can also match key literals via a special %{key} interpolation, e.g.:
+#
+# <%#= I18n::Tasks.add_scanner 'I18n::Tasks::Scanners::PatternMapper',
+#        patterns: [['\bSpree\.t[( ]\s*%{key}', 'spree.%{key}']] %>