Refactor Search Tags

news/4873.feature

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

src/components/theme/Search/SearchTags.jsx

@@ -1,71 +1,35 @@
-/**
- * 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 } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getVocabulary } from '@plone/volto/actions';
-
+import { useVocabularies } from '@plone/volto/hooks/vocabularies/useVocabularies';
 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,
-  };
+const SearchTags = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getVocabulary({ vocabNameOrURL: vocabulary }));
+  }, [dispatch]);
 
-  componentDidMount() {
-    this.props.getVocabulary({ vocabNameOrURL: vocabulary });
-  }
+  const items = useVocabularies();
 
-  /**
-   * 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 />
-    );
-  }
-}
+  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 connect(
-  (state) => ({
-    items:
-      state.vocabularies[vocabulary] && state.vocabularies[vocabulary].items
-        ? state.vocabularies[vocabulary].items
-        : [],
-  }),
-  { getVocabulary },
-)(SearchTags);
+export default SearchTags;

src/hooks/vocabularies/useVocabularies.js

@@ -0,0 +1,23 @@
+import { useSelector, shallowEqual } from 'react-redux';
+const vocabulary = 'plone.app.vocabularies.Keywords';
+
+/**
+ * useVocabularies hook
+ *
+ * This hook returns the current vocabulary state that is stored in the Redux store in the
+ * `vocabularies` reducer, and returns it along with the related state (items).
+ *
+ * @export
+ * @return {{ items }}
+ */
+export function useVocabularies() {
+  const items = useSelector(
+    (state) =>
+      state.vocabularies[vocabulary] && state.vocabularies[vocabulary].items
+        ? state.vocabularies[vocabulary].items
+        : [],
+    shallowEqual,
+  );
+
+  return items;
+}