decidim 0.0.1.alpha9 → 0.0.1

data/decidim-comments/.gitignore

@@ -0,0 +1,2 @@
+yarn.lock
+app/assets/javascripts/decidim/comments/bundle.js.map

data/decidim-comments/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'decidim', path: '..'
+gemspec
+
+eval(File.read(File.join(File.dirname(__FILE__), "..", "Gemfile.common")))

data/decidim-comments/README.md

@@ -0,0 +1,42 @@
+# Decidim::Comments
+
+The Comments module adds the ability to include comments to any resource which can be commentable by users.
+
+## Usage
+
+The Comments component is exposed as a Rails helper:
+
+```ruby
+<%= comments_for @commentable %>
+```
+ 
+In order to use the helper in your templates you need to include the comments helpers in your application helper:
+
+```ruby
+include Decidim::Comments::CommentsHelper
+```
+
+Finally, add the comments javascript module via Sprockets like this:
+
+```javascript
+//= require decidim/comments/comments
+```
+
+## Installation
+
+Add this line to your application's Gemfile.
+
+```ruby
+gem 'decidim-comments'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+## Contributing
+See [Decidim](https://github.com/AjuntamentdeBarcelona/decidim).
+
+## License
+See [Decidim](https://github.com/AjuntamentdeBarcelona/decidim).

data/decidim-comments/Rakefile

@@ -0,0 +1,2 @@
+# frozen_string_literal: true
+require "decidim/common_rake"

data/decidim-comments/app/assets/config/decidim_comments_manifest.js

@@ -0,0 +1 @@
+//= link decidim/comments/comments.js

data/decidim-comments/app/assets/javascripts/decidim/comments/comments.js.erb

@@ -0,0 +1,8 @@
+// = require_self
+// = require ./bundle
+
+window.DecidimComments = {
+  assets: {
+    'icons.svg': "<%= asset_path 'decidim/icons.svg' %>"
+  }
+};

data/decidim-comments/app/commands/decidim/comments/create_comment.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # A command with all the business logic to create a new comment
+    class CreateComment < Rectify::Command
+      # Public: Initializes the command.
+      #
+      # form - A form object with the params.
+      def initialize(form, author, commentable)
+        @form = form
+        @author = author
+        @commentable = commentable
+      end
+
+      # Executes the command. Broadcasts these events:
+      #
+      # - :ok when everything is valid.
+      # - :invalid if the form wasn't valid and we couldn't proceed.
+      #
+      # Returns nothing.
+      def call
+        return broadcast(:invalid) if form.invalid?
+
+        create_comment
+        broadcast(:ok, @comment)
+      end
+
+      private
+
+      attr_reader :form
+
+      def create_comment
+        @comment = Comment.create!(author: @author,
+                                   commentable: @commentable,
+                                   body: form.body,
+                                   alignment: form.alignment)
+      end
+    end
+  end
+end

data/decidim-comments/app/forms/decidim/comments/comment_form.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+module Decidim
+  module Comments
+    # A form object used to create comments from the graphql api.
+    #
+    class CommentForm < Form
+      attribute :body, String
+      attribute :alignment, Integer
+
+      mimic :comment
+
+      validates :body, presence: true
+      validates :alignment, inclusion: { in: [0, 1, -1] }, if: ->(form) { form.alignment.present? }
+    end
+  end
+end

data/decidim-comments/app/frontend/application/apollo_client.js

@@ -0,0 +1,16 @@
+import ApolloClient, { createNetworkInterface } from 'apollo-client';
+
+// Create a custom network interface for Apollo since our
+// API endpoint is not the default.
+const networkInterface = createNetworkInterface({ 
+  uri: '/api',
+  opts: {
+    credentials: 'same-origin'
+  }
+});
+
+const client = new ApolloClient({
+  networkInterface
+});
+
+export default client;

data/decidim-comments/app/frontend/application/application.component.jsx

@@ -0,0 +1,37 @@
+import { Component, PropTypes } from 'react';
+import { ApolloProvider }       from 'react-apollo';
+import { I18n }                 from 'react-i18nify';
+import moment                   from 'moment';
+
+import apolloClient             from './apollo_client';
+
+/**
+ * Wrapper component for all React applications using Apollo
+ * @class
+ * @augments Component
+ */
+export default class Application extends Component {
+  constructor(props) {
+    const { locale } = props;
+
+    I18n.setLocale(locale);
+    moment.locale(locale);
+    
+    super(props);
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <ApolloProvider client={apolloClient}>
+        {children}
+      </ApolloProvider>
+    );
+  }
+}
+
+Application.propTypes = {
+  children: PropTypes.element.isRequired,
+  locale: PropTypes.string.isRequired
+};

data/decidim-comments/app/frontend/application/application.component.test.jsx

@@ -0,0 +1,33 @@
+import { shallow } from 'enzyme';
+import { I18n }    from 'react-i18nify';
+import moment      from 'moment';
+
+import Application from './application.component';
+
+describe('<Application />', () => {
+  afterEach(() => {
+    I18n.setLocale('en');
+  });
+
+  it("should set I18n locale to locale prop", () => {
+    sinon.spy(I18n, 'setLocale');
+    const locale = "ca";
+    shallow(
+      <Application locale={locale}>
+        <div>My application</div>
+      </Application>
+    );
+    expect(I18n.setLocale).to.have.been.calledWith(locale);
+  });
+
+  it("should set moment locale to locale prop", () => {
+    sinon.spy(moment, 'locale');
+    const locale = "ca";
+    shallow(
+      <Application locale={locale}>
+        <div>My application</div>
+      </Application>
+    );
+    expect(moment.locale).to.have.been.calledWith(locale);
+  });
+});

data/decidim-comments/app/frontend/application/icon.component.jsx

@@ -0,0 +1,21 @@
+import { PropTypes } from 'react';
+
+import assetUrl      from '../support/asset_url';
+
+const Icon = ({ name }) => {
+  if (navigator.userAgent.match(/PhantomJS/)) {
+    return <span>{name}</span>;
+  }
+
+  return (
+    <svg className={`icon icon--before ${name}`}>
+      <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`${assetUrl('icons.svg')}#${name}`} />
+    </svg>  
+  );
+};
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default Icon;

data/decidim-comments/app/frontend/application/icon.component.test.jsx

@@ -0,0 +1,43 @@
+import { shallow } from 'enzyme';
+
+import Icon        from './icon.component';
+
+describe("<Icon /", () => {
+  beforeEach(() => {
+    window.DecidimComments = {
+      assets: {
+        'icons.svg': '/assets/icons.svg'
+      }
+    };
+  })
+
+  describe("if navigator user agent is not PhantomJS", () => {
+    let currentNavigator = null;
+
+    beforeEach(() => {
+      currentNavigator = window.navigator;
+      window.navigator = {
+        userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36"
+      };
+    });
+
+    it("should render a svg with class defined by prop className", () => {
+      const wrapper = shallow(<Icon name="icon-thumb-down" />);
+      expect(wrapper.find('svg.icon-thumb-down')).to.be.present();    
+    });
+
+    it("should render a svg icon using the 'icons.svg' url and name", () => {
+      const wrapper = shallow(<Icon name="icon-thumb-up" />);
+      expect(wrapper.find('svg use')).to.have.attr('xlink:href').equal('/assets/icons.svg#icon-thumb-up');
+    });
+
+    afterEach(() => {
+      window.navigator = currentNavigator;
+    });
+  });
+
+  it("should render a simple span with the icon name", () => {
+    const wrapper = shallow(<Icon name="icon-thumb-up" />);
+    expect(wrapper.find('span')).to.have.text('icon-thumb-up');
+  });
+});

data/decidim-comments/app/frontend/comments/add_comment_form.component.jsx

@@ -0,0 +1,250 @@
+/* eslint-disable no-return-assign, react/no-unused-prop-types */
+import { Component, PropTypes } from 'react';
+import { graphql }              from 'react-apollo';
+import gql                      from 'graphql-tag';
+import { I18n }                 from 'react-i18nify';
+import uuid                     from 'uuid';
+import moment                   from 'moment';
+import classnames               from 'classnames';
+
+import Icon                     from '../application/icon.component';
+
+import addCommentMutation       from './add_comment_form.mutation.graphql';
+import commentDataFragment      from './comment_data.fragment.graphql';
+
+/**
+ * Renders a form to create new comments.
+ * @class
+ * @augments Component
+ */
+export class AddCommentForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      disabled: true,
+      alignment: 0
+    };
+  }
+
+  render() {
+    const { submitButtonClassName, commentableType, commentableId } = this.props;
+    const { disabled } = this.state;
+    
+    return (
+      <div className="add-comment">
+        {this._renderHeading()}
+        {this._renderOpinionButtons()}
+        <form onSubmit={(evt) => this._addComment(evt)}>
+          <label className="show-for-sr" htmlFor={`add-comment-${commentableType}-${commentableId}`}>{ I18n.t("components.add_comment_form.form.body.label") }</label>
+          <textarea
+            ref={(textarea) => this.bodyTextArea = textarea}
+            id={`add-comment-${commentableType}-${commentableId}`}
+            rows="4"
+            placeholder={I18n.t("components.add_comment_form.form.body.placeholder")}
+            onChange={(evt) => this._checkCommentBody(evt.target.value)}
+          />
+          <input 
+            type="submit"
+            className={submitButtonClassName}
+            value={I18n.t("components.add_comment_form.form.submit")}
+            disabled={disabled}
+          />
+        </form>
+      </div>
+    );
+  }
+
+  /**
+   * Render the form heading based on showTitle prop
+   * @private
+   * @returns {Void|DOMElement} - The heading or an empty element
+   */
+  _renderHeading() {
+    const { showTitle } = this.props;
+
+    if (showTitle) {
+      return (
+        <h5 className="section-heading">
+          { I18n.t("components.add_comment_form.title") }
+        </h5>
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Render opinion buttons or not based on the arguable prop
+   * @private
+   * @returns {Void|DOMElement} - Returns nothing or a wrapper with buttons
+   */
+  _renderOpinionButtons() {
+    const { arguable } = this.props;
+    const { alignment } = this.state;
+    const buttonClassName = classnames('button', 'small', 'button--muted');
+    const okButtonClassName = classnames(buttonClassName, 'opinion-toggle--ok', {
+      'is-active': alignment === 1
+    });
+    const koButtonClassName = classnames(buttonClassName, 'opinion-toggle--ko', {
+      'is-active': alignment === -1
+    });
+    const neutralButtonClassName = classnames(buttonClassName, 'opinion-toggle--neutral', {
+      'is-active': alignment === 0
+    });
+
+    if (arguable) {
+      return (
+        <div className="opinion-toggle button-group">
+          <button 
+            className={okButtonClassName}
+            onClick={() => this.setState({ alignment: 1 })}
+          >
+            <Icon name="icon-thumb-up" />
+            { I18n.t("components.add_comment_form.opinion.in_favor") }
+          </button>
+          <button
+            className={neutralButtonClassName}
+            onClick={() => this.setState({ alignment: 0 })}
+          >
+            { I18n.t("components.add_comment_form.opinion.neutral") }
+          </button>
+          <button
+            className={koButtonClassName}
+            onClick={() => this.setState({ alignment: -1 })}
+          >
+            <Icon name="icon-thumb-down" />
+            { I18n.t("components.add_comment_form.opinion.against") }
+          </button>
+        </div>
+      );
+    }
+
+    return null;
+  }
+ 
+  /**
+   * Check comment's body and disable form if it's empty
+   * @private
+   * @param {string} body - The comment's body
+   * @returns {Void} - Returns nothing
+   */
+  _checkCommentBody(body) {
+    this.setState({ disabled: body === '' });
+  }
+
+  /**
+   * Handle form's submission and calls `addComment` prop with the value of the
+   * form's textarea. It prevents the default form submission event.
+   * @private
+   * @param {DOMEvent} evt - The form's submission event
+   * @returns {Void} - Returns nothing
+   */
+  _addComment(evt) {
+    const { alignment } = this.state;
+    const { addComment, onCommentAdded } = this.props;
+
+    evt.preventDefault();
+
+    addComment({ body: this.bodyTextArea.value, alignment });
+
+    this.bodyTextArea.value = '';
+    this.setState({ alignment: 0 });
+
+    if (onCommentAdded) {
+      onCommentAdded();
+    }
+  }
+}
+
+AddCommentForm.defaultProps = {
+  showTitle: true,
+  submitButtonClassName: 'button button--sc'
+};
+
+AddCommentForm.propTypes = {
+  addComment: PropTypes.func.isRequired,
+  currentUser: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  commentableId: PropTypes.string.isRequired,
+  commentableType: PropTypes.string.isRequired,
+  showTitle: PropTypes.bool.isRequired,
+  submitButtonClassName: PropTypes.string.isRequired,
+  onCommentAdded: PropTypes.func,
+  arguable: PropTypes.bool
+};
+
+const AddCommentFormWithMutation = graphql(gql`
+  ${addCommentMutation}
+  ${commentDataFragment}
+`, {
+  props: ({ ownProps, mutate }) => ({
+    addComment: ({ body, alignment }) => mutate({ 
+      variables: { 
+        commentableId: ownProps.commentableId,
+        commentableType: ownProps.commentableType,
+        body,
+        alignment
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        addComment: {
+          __typename: 'Comment',
+          id: uuid(),
+          createdAt: moment().format("YYYY-MM-DD HH:mm:ss z"),
+          body,
+          alignment: alignment,
+          author: {
+            __typename: 'Author',
+            name: ownProps.currentUser.name,
+            avatarUrl: ownProps.currentUser.avatarUrl
+          },
+          replies: [],
+          canHaveReplies: false
+        }
+      },
+      updateQueries: {
+        GetComments: (prev, { mutationResult: { data } }) => {
+          const { commentableId, commentableType } = ownProps;
+          const newComment = data.addComment;
+          let comments = [];
+
+          const commentReducer = (comment) => {
+            const replies = comment.replies || [];
+
+            if (comment.id === commentableId) {
+              return {
+                ...comment,
+                replies: [
+                  ...replies,
+                  newComment
+                ]
+              };
+            }
+            return {
+              ...comment,
+              replies: replies.map(commentReducer)
+            };
+          };
+
+          if (commentableType === "Decidim::Comments::Comment") {
+            comments = prev.comments.map(commentReducer);
+          } else {
+            comments = [
+              ...prev.comments,
+              newComment
+            ];
+          }
+
+          return {
+            ...prev,
+            comments
+          };
+        }
+      }
+    })
+  })
+})(AddCommentForm);
+
+export default AddCommentFormWithMutation;