@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/src/components/theme/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -1,23 +1,24 @@
 import { injectIntl } from 'react-intl';
 import React from 'react';
-import { BreadcrumbsComponent } from './Breadcrumbs';
+import BreadcrumbsComponent from './Breadcrumbs';
 import Wrapper from '@plone/volto/storybook';
 
 export const Breadcrumb = injectIntl(({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        breadcrumbs: {
+          items: [
+            { title: 'Blog', url: '/blog' },
+            { title: 'My first blog', url: '/blog/my-first-blog' },
+          ],
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <BreadcrumbsComponent
-          pathname=""
-          items={[
-            {
-              '@id': 'https://volto.kitconcept.com/api/Members',
-              title: 'Users',
-            },
-          ]}
-          getBreadcrumbs={() => {}}
-          {...args}
-        />
+        <BreadcrumbsComponent pathname="" />
       </div>
     </Wrapper>
   );

package/src/components/theme/Comments/Comment.stories.jsx

@@ -0,0 +1,84 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import CommentsComponent from './Comments';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlCommentsComponent = injectIntl(CommentsComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        comments: {
+          items: [
+            {
+              '@id': 'someurl',
+              comment_id: '1614094601171408',
+              ...args,
+              is_deletable: true,
+              is_editable: true,
+              can_reply: true,
+            },
+          ],
+          permissions: {
+            view_comments: true,
+            can_reply: true,
+          },
+          add: {
+            loading: false,
+            loaded: true,
+          },
+          delete: {
+            loading: false,
+            loaded: true,
+          },
+          update: {
+            loading: false,
+            loaded: true,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlCommentsComponent {...args} />
+    </Wrapper>
+  );
+}
+
+export const CommentsModal = StoryComponent.bind({});
+CommentsModal.args = {
+  author_name: 'admin',
+  creation_date: '2017-11-06T19:36:01',
+  text: { data: 'Plone 6' },
+};
+export default {
+  title: 'Public components/Comments/Comments Modal',
+  component: CommentsComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    creation_date: {
+      control: 'date',
+      description: 'Date comment was created',
+    },
+    author_name: {
+      control: 'text',
+      description: 'Comment author name',
+    },
+    text: {
+      data: {
+        control: 'date',
+      },
+      description: 'Comment text',
+    },
+  },
+};

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

@@ -1,14 +1,9 @@
-/**
- * Comment edit modal.
- * @module components/theme/Comments/CommentEditModal
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { updateComment } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -27,116 +22,69 @@ const messages = defineMessages({
   },
 });
 
-/**
- * CommentEditModal class.
- * @class CommentEditModal
- * @extends Component
- */
-class CommentEditModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateComment: 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,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    id: '',
-    text: '',
-  };
+const CommentEditModal = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { onOk, open, onCancel } = props;
+  const request = useSelector((state) => state.comments.update, shallowEqual);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs CommentEditModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+  const prevRequestLoading = usePrevious(request.loading);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.request.loading && nextProps.request.loaded) {
-      this.props.onOk();
+  useEffect(() => {
+    if (prevRequestLoading && request.loaded) {
+      onOk();
     }
-  }
+  }, [onOk, prevRequestLoading, request.loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {Object} data Form data
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateComment(this.props.id, data.text);
-  }
+  const onSubmit = (data) => {
+    dispatch(updateComment(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: '',
-              },
+  return (
+    props.open && (
+      <ModalForm
+        open={open}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        formData={{ text: props.text }}
+        title={intl.formatMessage(messages.editComment)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['text'],
+            },
+          ],
+          properties: {
+            text: {
+              title: intl.formatMessage(messages.comment),
+              type: 'string',
+              description: '',
             },
-            required: ['text'],
-          }}
-        />
-      )
-    );
-  }
-}
+          },
+          required: ['text'],
+        }}
+      />
+    )
+  );
+};
+
+CommentEditModal.propTypes = {
+  id: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  request: PropTypes.shape({
+    loading: PropTypes.bool,
+    loaded: PropTypes.bool,
+  }),
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+CommentEditModal.defaultProps = {
+  id: '',
+  text: '',
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.comments.update,
-    }),
-    { updateComment },
-  ),
-)(CommentEditModal);
+export default CommentEditModal;