From 09b8bd501df022d97114d906ebca80c36b210138 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 26 Apr 2020 11:48:08 +0200
Subject: [PATCH] Converted TagsList component into functional component

---
 src/tags/TagsList.js | 136 +++++++++++++++++++++----------------------
 1 file changed, 66 insertions(+), 70 deletions(-)

diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 914a1ba8..2c482b68 100644
--- a/src/tags/TagsList.js
+++ b/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,78 +7,74 @@ import SearchField from '../utils/SearchField';
 const { ceil } = Math;
 const TAGS_GROUPS_AMOUNT = 4;
 
-const TagsList = (TagCard) => class TagsList extends React.Component {
-  static propTypes = {
-    filterTags: PropTypes.func,
-    forceListTags: PropTypes.func,
-    tagsList: PropTypes.shape({
-      loading: PropTypes.bool,
-      error: PropTypes.bool,
-      filteredTags: PropTypes.arrayOf(PropTypes.string),
-    }),
-    match: PropTypes.object,
+const propTypes = {
+  filterTags: PropTypes.func,
+  forceListTags: PropTypes.func,
+  tagsList: PropTypes.shape({
+    loading: PropTypes.bool,
+    error: PropTypes.bool,
+    filteredTags: PropTypes.arrayOf(PropTypes.string),
+  }),
+  match: PropTypes.object,
+};
+
+const TagsList = (TagCard) => {
+  const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
+    useEffect(() => {
+      forceListTags();
+    }, []);
+
+    const renderContent = () => {
+      if (tagsList.loading) {
+        return <Message noMargin loading />;
+      }
+
+      if (tagsList.error) {
+        return (
+          <div className="col-12">
+            <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
+          </div>
+        );
+      }
+
+      const tagsCount = tagsList.filteredTags.length;
+
+      if (tagsCount < 1) {
+        return <Message>No tags found</Message>;
+      }
+
+      const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
+
+      return (
+        <React.Fragment>
+          {tagsGroups.map((group, index) => (
+            <div key={index} className="col-md-6 col-xl-3">
+              {group.map((tag) => (
+                <TagCard
+                  key={tag}
+                  tag={tag}
+                  currentServerId={match.params.serverId}
+                />
+              ))}
+            </div>
+          ))}
+        </React.Fragment>
+      );
+    };
+
+    return (
+      <React.Fragment>
+        {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
+        <div className="row">
+          {renderContent()}
+        </div>
+      </React.Fragment>
+    );
   };
 
-  componentDidMount() {
-    const { forceListTags } = this.props;
+  TagListComp.propTypes = propTypes;
 
-    forceListTags();
-  }
-
-  renderContent() {
-    const { tagsList, match } = this.props;
-
-    if (tagsList.loading) {
-      return <Message noMargin loading />;
-    }
-
-    if (tagsList.error) {
-      return (
-        <div className="col-12">
-          <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
-        </div>
-      );
-    }
-
-    const tagsCount = tagsList.filteredTags.length;
-
-    if (tagsCount < 1) {
-      return <Message>No tags found</Message>;
-    }
-
-    const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
-
-    return (
-      <React.Fragment>
-        {tagsGroups.map((group, index) => (
-          <div key={index} className="col-md-6 col-xl-3">
-            {group.map((tag) => (
-              <TagCard
-                key={tag}
-                tag={tag}
-                currentServerId={match.params.serverId}
-              />
-            ))}
-          </div>
-        ))}
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { filterTags } = this.props;
-
-    return (
-      <React.Fragment>
-        {!this.props.tagsList.loading &&
-          <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
-        }
-        <div className="row">
-          {this.renderContent()}
-        </div>
-      </React.Fragment>
-    );
-  }
+  return TagListComp;
 };
 
 export default TagsList;