Merge pull request #95 from plone/tags-commenting-sharing

Added social sharing.

CHANGELOG.md

@@ -23,6 +23,9 @@
 * Fix paragraph styling in draftjs @robgietema
 * Added image, file and news item view @robgietema
 * Fixed summary and tabular views @robgietema
+* Added social sharing @robgietema
+* Added commenting @robgietema
+* Added tags @robgietema
 
 ## 0.4.0 (2017-05-03)
 

package.json

@@ -209,6 +209,7 @@
     "react-redux": "5.0.6",
     "react-router": "3.0.5",
     "react-router-redux": "4.0.8",
+    "react-share": "1.17.0",
     "react-styleguidist": "6.0.25",
     "redux": "3.7.2",
     "redux-connect": "5.1.0",

src/components/index.js

@@ -36,6 +36,10 @@ export Search from './theme/Search/Search';
 export SearchTags from './theme/Search/SearchTags';
 export TabularView from './theme/View/TabularView';
 export View from './theme/View/View';
+export Comments from './theme/Comments/Comments';
+export CommentEditModal from './theme/Comments/CommentEditModal';
+export SocialSharing from './theme/SocialSharing/SocialSharing';
+export Tags from './theme/Tags/Tags';
 
 export Actions from './manage/Actions/Actions';
 export Add from './manage/Add/Add';

src/components/theme/Comments/CommentEditModal.jsx

@@ -0,0 +1,140 @@
+/**
+ * Comment edit modal.
+ * @module components/theme/Comments/CommentEditModal
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { defineMessages, injectIntl, intlShape } from 'react-intl';
+
+import { editComment } from '../../../actions';
+import { ModalForm } from '../../../components';
+
+const messages = defineMessages({
+  editComment: {
+    id: 'Edit comment',
+    defaultMessage: 'Edit comment',
+  },
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  comment: {
+    id: 'Comment',
+    defaultMessage: 'Comment',
+  },
+});
+
+@injectIntl
+@connect(
+  state => ({
+    request: state.comments.edit,
+  }),
+  dispatch => bindActionCreators({ editComment }, dispatch),
+)
+/**
+ * CommentEditModal class.
+ * @class CommentEditModal
+ * @extends Component
+ */
+export default class CommentEditModal extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    editComment: PropTypes.func.isRequired,
+    id: PropTypes.string,
+    text: PropTypes.string,
+    request: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    open: PropTypes.bool.isRequired,
+    onOk: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    intl: intlShape.isRequired,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    id: '',
+    text: '',
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs CommentEditModal
+   */
+  constructor(props) {
+    super(props);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  componentWillReceiveProps(nextProps) {
+    if (this.props.request.loading && nextProps.request.loaded) {
+      this.props.onOk();
+    }
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {Object} data Form data
+   * @returns {undefined}
+   */
+  onSubmit(data) {
+    this.props.editComment(this.props.id, data.text);
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      this.props.open && (
+        <ModalForm
+          open={this.props.open}
+          onSubmit={this.onSubmit}
+          onCancel={this.props.onCancel}
+          formData={{ text: this.props.text }}
+          title={this.props.intl.formatMessage(messages.editComment)}
+          schema={{
+            fieldsets: [
+              {
+                id: 'default',
+                title: this.props.intl.formatMessage(messages.default),
+                fields: ['text'],
+              },
+            ],
+            properties: {
+              text: {
+                title: this.props.intl.formatMessage(messages.comment),
+                type: 'string',
+                description: '',
+              },
+            },
+            required: ['text'],
+          }}
+        />
+      )
+    );
+  }
+}

src/components/theme/Comments/CommentEditModal.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import CommentEditModal from './CommentEditModal';
+
+const mockStore = configureStore();
+
+jest.mock('../../manage/Form/ModalForm', () =>
+  jest.fn(() => <div id="modalform" />),
+);
+
+describe('CommentEditModal', () => {
+  it('renders a comment edit modal component', () => {
+    const store = mockStore({
+      comments: {
+        edit: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <CommentEditModal
+          open
+          onOk={() => {}}
+          onCancel={() => {}}
+          id="someurl"
+          text="Comment body"
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});