Breadcrumbs Refactor

news/4858.feature

@@ -0,0 +1 @@
+Refactor BreadcrumbsComponent @Tishasoumya-02

src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,21 +1,16 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
 
 import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 
 import homeSVG from '@plone/volto/icons/home.svg';
+import { useBreadcrumbs } from '@plone/volto/hooks/breadcrumbs/useBreadcrumbs';
 
 const messages = defineMessages({
   home: {
@@ -28,96 +23,62 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { items, root } = useBreadcrumbs();
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, pathname]);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <Breadcrumb.Section key={item.url} active>
-                  {item.title}
-                </Breadcrumb.Section>
-              ),
-            ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+  return (
+    <Segment
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+      secondary
+      vertical
+    >
+      <Container>
+        <Breadcrumb>
+          <Link
+            to={root || '/'}
+            className="section"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="18px" />
+          </Link>
+          {items.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.url}`} />,
+            index < items.length - 1 ? (
+              <Link key={item.url} to={item.url} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.url} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
+BreadcrumbsComponent.propTypes = {
+  getBreadcrumbs: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  root: PropTypes.string,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
     }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+  ).isRequired,
+};
+
+export default BreadcrumbsComponent;

src/components/theme/Breadcrumbs/Breadcrumbs.test.jsx

@@ -7,7 +7,7 @@ import { MemoryRouter } from 'react-router-dom';
 import Breadcrumbs from './Breadcrumbs';
 
 const mockStore = configureStore();
-
+let getBreadcrumbs = jest.fn();
 describe('Breadcrumbs', () => {
   it('renders a breadcrumbs component', () => {
     const store = mockStore({
@@ -25,7 +25,14 @@ describe('Breadcrumbs', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Breadcrumbs pathname="/blog" />
+          <Breadcrumbs
+            pathname="/blog"
+            getBreadcrumbs={getBreadcrumbs}
+            items={[
+              { title: 'Blog', url: '/blog' },
+              { title: 'My first blog', url: '/blog/my-first-blog' },
+            ]}
+          />
         </MemoryRouter>
       </Provider>,
     );

src/hooks/breadcrumbs/useBreadcrumbs.js

@@ -0,0 +1,8 @@
+import { useSelector, shallowEqual } from 'react-redux';
+
+export function useBreadcrumbs() {
+  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const root = useSelector((state) => state.breadcrumbs.root);
+
+  return { items, root };
+}