Updated TagsSelector to be a functional component

src/tags/helpers/TagsSelector.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import TagsInput from 'react-tagsinput';
 import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
@@ -6,28 +6,23 @@ import { identity } from 'ramda';
 import TagBullet from './TagBullet';
 import './TagsSelector.scss';
 
-const TagsSelector = (colorGenerator) => class TagsSelector extends React.Component {
-  static propTypes = {
-    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func.isRequired,
-    listTags: PropTypes.func,
-    placeholder: PropTypes.string,
-    tagsList: PropTypes.shape({
-      tags: PropTypes.arrayOf(PropTypes.string),
-    }),
-  };
-  static defaultProps = {
-    placeholder: 'Add tags to the URL',
-  };
+const propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func.isRequired,
+  listTags: PropTypes.func,
+  placeholder: PropTypes.string,
+  tagsList: PropTypes.shape({
+    tags: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
 
-  componentDidMount() {
-    const { listTags } = this.props;
+const TagsSelector = (colorGenerator) => {
+  const TagsSelectorComp = ({ tags, onChange, listTags, tagsList, placeholder = 'Add tags to the URL' }) => {
+    useEffect(() => {
+      listTags();
+    }, []);
 
-    listTags();
-  }
-
-  render() {
-    const { tags, onChange, placeholder, tagsList } = this.props;
+    // eslint-disable-next-line
     const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
       <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
         {getTagDisplayValue(tag)}
@@ -40,7 +35,6 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
         method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
       };
 
-      // eslint-disable-next-line no-extra-parens
       const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
       const inputLength = inputValue.length;
       const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
@@ -75,13 +69,16 @@ const TagsSelector = (colorGenerator) => class TagsSelector extends React.Compon
         onlyUnique
         renderTag={renderTag}
         renderInput={renderAutocompleteInput}
-
         // FIXME Workaround to be able to add tags on Android
         addOnBlur
         onChange={onChange}
       />
     );
-  }
+  };
+
+  TagsSelectorComp.propTypes = propTypes;
+
+  return TagsSelectorComp;
 };
 
 export default TagsSelector;