Use container from component registry in sitemap component and also refactor the class to functional component(#5418)

Author: iRohitSingh

news/5418.feature

@@ -0,0 +1,2 @@
+Use container from component registry in sitemap component and also refactor the class
+to functional component. @iRohitSingh

src/components/theme/Sitemap/Sitemap.jsx

@@ -1,15 +1,10 @@
-/**
- * Login container.
- * @module components/theme/Sitemap/Sitemap
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { Helmet, toBackendLang } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
@@ -30,38 +25,26 @@ export function getSitemapPath(pathname = '', lang) {
 }
 
 /**
- * Sitemap class.
- * @class Sitemap
- * @extends Component
+ * Sitemap function component.
+ * @function Sitemap
+ * @param {Object} props - Component properties.
+ * @returns {JSX.Element} - Rendered component.
  */
-class Sitemap extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getNavigation: PropTypes.func.isRequired,
-  };
+function Sitemap(props) {
+  const {
+    location: { pathname },
+    language,
+    getNavigation,
+  } = props;
 
-  componentDidMount() {
+  useEffect(() => {
     const { settings } = config;
+    const lang = settings.isMultilingual ? `${toBackendLang(language)}` : null;
+    const path = getSitemapPath(pathname, lang);
+    getNavigation(path, 4);
+  }, [pathname, language, getNavigation]);
 
-    const lang = settings.isMultilingual
-      ? `${toBackendLang(this.props.lang)}`
-      : null;
-
-    const path = getSitemapPath(this.props.location.pathname, lang);
-    this.props.getNavigation(path, 4);
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-
-  renderItems = (items) => {
+  const renderItems = (items) => {
     return (
       <ul>
         {items.map((item) => (
@@ -70,26 +53,35 @@ class Sitemap extends Component {
             className={item.items?.length > 0 ? 'with-children' : ''}
           >
             <Link to={item.url}>{item.title}</Link>
-            {item.items && this.renderItems(item.items)}
+            {item.items && renderItems(item.items)}
           </li>
         ))}
       </ul>
     );
   };
-  render() {
-    const { items } = this.props;
-    return (
-      <div id="page-sitemap">
-        <Helmet title={this.props.intl.formatMessage(messages.Sitemap)} />
-        <Container className="view-wrapper">
-          <h1>{this.props.intl.formatMessage(messages.Sitemap)} </h1>
-          {items && this.renderItems(items)}
-        </Container>
-      </div>
-    );
-  }
+
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <div id="page-sitemap">
+      <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
+      <Container className="view-wrapper">
+        <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
+        {props.items && renderItems(props.items)}
+      </Container>
+    </div>
+  );
 }
 
+Sitemap.propTypes = {
+  getNavigation: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired,
+  intl: PropTypes.object.isRequired,
+  lang: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+};
+
 export const __test__ = compose(
   injectIntl,
   connect(
@@ -116,14 +108,12 @@ export default compose(
       promise: ({ location, store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
         const { settings } = config;
-
         const path = getSitemapPath(
           location.pathname,
           settings.isMultilingual
             ? toBackendLang(getState().intl.locale)
             : null,
         );
-
         return dispatch(getNavigation(path, 4));
       },
     },