Converted TagsList component into functional component

src/tags/TagsList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { splitEvery } from 'ramda';
 import PropTypes from 'prop-types';
 import Message from '../utils/Message';
@@ -7,8 +7,7 @@ import SearchField from '../utils/SearchField';
 const { ceil } = Math;
 const TAGS_GROUPS_AMOUNT = 4;
 
-const TagsList = (TagCard) => class TagsList extends React.Component {
-  static propTypes = {
+const propTypes = {
   filterTags: PropTypes.func,
   forceListTags: PropTypes.func,
   tagsList: PropTypes.shape({
@@ -17,17 +16,15 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
     filteredTags: PropTypes.arrayOf(PropTypes.string),
   }),
   match: PropTypes.object,
-  };
-
-  componentDidMount() {
-    const { forceListTags } = this.props;
+};
 
+const TagsList = (TagCard) => {
+  const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
+    useEffect(() => {
       forceListTags();
-  }
-
-  renderContent() {
-    const { tagsList, match } = this.props;
+    }, []);
 
+    const renderContent = () => {
       if (tagsList.loading) {
         return <Message noMargin loading />;
       }
@@ -63,22 +60,21 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
           ))}
         </React.Fragment>
       );
-  }
-
-  render() {
-    const { filterTags } = this.props;
+    };
 
     return (
       <React.Fragment>
-        {!this.props.tagsList.loading &&
-          <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
-        }
+        {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
         <div className="row">
-          {this.renderContent()}
+          {renderContent()}
         </div>
       </React.Fragment>
     );
-  }
+  };
+
+  TagListComp.propTypes = propTypes;
+
+  return TagListComp;
 };
 
 export default TagsList;