Refactor Search Tags

news/4873.feature

@@ -0,0 +1 @@
+Refactore SearchTags @Tishasoumya-02

src/components/theme/Search/SearchTags.jsx

@@ -1,71 +1,41 @@
-/**
- * Search tags components.
- * @module components/theme/Search/SearchTags
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getVocabulary } from '@plone/volto/actions';
 
 const vocabulary = 'plone.app.vocabularies.Keywords';
 
-/**
- * Search tags container class.
- * @class SearchTags
- * @extends Component
- */
-class SearchTags extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getVocabulary: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    this.props.getVocabulary({ vocabNameOrURL: vocabulary });
-  }
+const SearchTags = () => {
+  const dispatch = useDispatch();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return this.props.items && this.props.items.length > 0 ? (
-      <div>
-        {this.props.items.map((item) => (
-          <Link
-            className="ui label"
-            to={`/search?Subject=${item.label}`}
-            key={item.label}
-          >
-            {item.label}
-          </Link>
-        ))}
-      </div>
-    ) : (
-      <span />
-    );
-  }
-}
+  useEffect(() => {
+    dispatch(getVocabulary({ vocabNameOrURL: vocabulary }));
+  }, [dispatch]);
 
-export default connect(
-  (state) => ({
-    items:
+  const items = useSelector(
+    (state) =>
       state.vocabularies[vocabulary] && state.vocabularies[vocabulary].items
         ? state.vocabularies[vocabulary].items
         : [],
-  }),
-  { getVocabulary },
-)(SearchTags);
+    shallowEqual,
+  );
+
+  return items && items.length > 0 ? (
+    <div>
+      {items.map((item) => (
+        <Link
+          className="ui label"
+          to={`/search?Subject=${item.label}`}
+          key={item.label}
+        >
+          {item.label}
+        </Link>
+      ))}
+    </div>
+  ) : (
+    <span />
+  );
+};
+
+export default SearchTags;