Updated EditTagsModal to be a functional component

src/short-urls/helpers/EditTagsModal.js

@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { ExternalLink } from 'react-external-link';
-import { pipe } from 'ramda';
 import { shortUrlTagsType } from '../reducers/shortUrlTags';
 import { shortUrlType } from '../reducers/shortUrlsList';
 
-const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Component {
-  static propTypes = {
+const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   toggle: PropTypes.func.isRequired,
   shortUrl: shortUrlType.isRequired,
@@ -16,37 +14,24 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon
   resetShortUrlsTags: PropTypes.func,
 };
 
-  saveTags = () => {
-    const { editShortUrlTags, shortUrl, toggle } = this.props;
+const EditTagsModal = (TagsSelector) => {
+  const EditTagsModalComp = ({ isOpen, toggle, shortUrl, shortUrlTags, editShortUrlTags, resetShortUrlsTags }) => {
+    const [ selectedTags, setSelectedTags ] = useState(shortUrl.tags || []);
 
-    editShortUrlTags(shortUrl.shortCode, shortUrl.domain, this.state.tags)
+    useEffect(() => resetShortUrlsTags, []);
+
+    const url = shortUrl && (shortUrl.shortUrl || '');
+    const saveTags = () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags)
       .then(toggle)
       .catch(() => {});
-  };
-
-  componentDidMount() {
-    const { resetShortUrlsTags } = this.props;
-
-    resetShortUrlsTags();
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = { tags: props.shortUrl.tags };
-  }
-
-  render() {
-    const { isOpen, toggle, shortUrl, shortUrlTags, resetShortUrlsTags } = this.props;
-    const url = shortUrl && (shortUrl.shortUrl || '');
-    const close = pipe(resetShortUrlsTags, toggle);
 
     return (
-      <Modal isOpen={isOpen} toggle={close} centered>
-        <ModalHeader toggle={close}>
+      <Modal isOpen={isOpen} toggle={toggle} centered>
+        <ModalHeader toggle={toggle}>
           Edit tags for <ExternalLink href={url} />
         </ModalHeader>
         <ModalBody>
-          <TagsSelector tags={this.state.tags} onChange={(tags) => this.setState({ tags })} />
+          <TagsSelector tags={selectedTags} onChange={(tags) => setSelectedTags(tags)} />
           {shortUrlTags.error && (
             <div className="p-2 mt-2 bg-danger text-white text-center">
               Something went wrong while saving the tags :(
@@ -54,19 +39,18 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon
           )}
         </ModalBody>
         <ModalFooter>
-          <button className="btn btn-link" onClick={close}>Cancel</button>
-          <button
-            className="btn btn-primary"
-            type="button"
-            disabled={shortUrlTags.saving}
-            onClick={() => this.saveTags()}
-          >
+          <button className="btn btn-link" onClick={toggle}>Cancel</button>
+          <button className="btn btn-primary" type="button" disabled={shortUrlTags.saving} onClick={saveTags}>
             {shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
           </button>
         </ModalFooter>
       </Modal>
     );
-  }
+  };
+
+  EditTagsModalComp.propTypes = propTypes;
+
+  return EditTagsModalComp;
 };
 
 export default EditTagsModal;

test/short-urls/helpers/EditTagsModal.test.js

@@ -37,17 +37,6 @@ describe('<EditTagsModal />', () => {
     jest.clearAllMocks();
   });
 
-  it('resets tags when component is mounted', () => {
-    createWrapper({
-      shortCode,
-      tags: [],
-      saving: false,
-      error: false,
-    });
-
-    expect(resetShortUrlsTags).toHaveBeenCalledTimes(1);
-  });
-
   it('renders tags selector and save button when loaded', () => {
     const wrapper = createWrapper({
       shortCode,