Updated DeleteTagConfirmModal to be a functional component

src/tags/helpers/DeleteTagConfirmModal.js

@@ -3,64 +3,45 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { tagDeleteType } from '../reducers/tagDelete';
 
-export default class DeleteTagConfirmModal extends React.Component {
+const propTypes = {
-  static propTypes = {
+  tag: PropTypes.string.isRequired,
-    tag: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
-    toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
-    isOpen: PropTypes.bool.isRequired,
+  deleteTag: PropTypes.func,
-    deleteTag: PropTypes.func,
+  tagDelete: tagDeleteType,
-    tagDelete: tagDeleteType,
+  tagDeleted: PropTypes.func,
-    tagDeleted: PropTypes.func,
+};
-  };
-
-  doDelete = async () => {
-    const { tag, toggle, deleteTag } = this.props;
 
+const DeleteTagConfirmModal = ({ tag, toggle, isOpen, deleteTag, tagDelete, tagDeleted }) => {
+  const doDelete = async () => {
     await deleteTag(tag);
-    this.tagWasDeleted = true;
+    tagDeleted(tag);
     toggle();
   };
-  handleOnClosed = () => {
-    if (!this.tagWasDeleted) {
-      return;
-    }
 
-    const { tagDeleted, tag } = this.props;
+  return (
+    <Modal toggle={toggle} isOpen={isOpen} centered>
+      <ModalHeader toggle={toggle}>
+        <span className="text-danger">Delete tag</span>
+      </ModalHeader>
+      <ModalBody>
+        Are you sure you want to delete tag <b>{tag}</b>?
+        {tagDelete.error && (
+          <div className="p-2 mt-2 bg-danger text-white text-center">
+            Something went wrong while deleting the tag :(
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <button className="btn btn-link" onClick={toggle}>Cancel</button>
+        <button className="btn btn-danger" disabled={tagDelete.deleting} onClick={doDelete}>
+          {tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+};
 
-    tagDeleted(tag);
+DeleteTagConfirmModal.propTypes = propTypes;
-  };
 
-  componentDidMount() {
+export default DeleteTagConfirmModal;
-    this.tagWasDeleted = false;
-  }
-
-  render() {
-    const { tag, toggle, isOpen, tagDelete } = this.props;
-
-    return (
-      <Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.handleOnClosed}>
-        <ModalHeader toggle={toggle}>
-          <span className="text-danger">Delete tag</span>
-        </ModalHeader>
-        <ModalBody>
-          Are you sure you want to delete tag <b>{tag}</b>?
-          {tagDelete.error && (
-            <div className="p-2 mt-2 bg-danger text-white text-center">
-              Something went wrong while deleting the tag :(
-            </div>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <button className="btn btn-link" onClick={toggle}>Cancel</button>
-          <button
-            className="btn btn-danger"
-            disabled={tagDelete.deleting}
-            onClick={() => this.doDelete()}
-          >
-            {tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
-          </button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}

test/tags/helpers/DeleteTagConfirmModal.test.js

@@ -25,8 +25,7 @@ describe('<DeleteTagConfirmModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    deleteTag.mockReset();
+    jest.resetAllMocks();
-    tagDeleted.mockReset();
   });
 
   it('asks confirmation for provided tag to be deleted', () => {
@@ -56,14 +55,16 @@ describe('<DeleteTagConfirmModal />', () => {
     expect(delBtn.text()).toEqual('Deleting tag...');
   });
 
-  it('deletes tag modal when btn is clicked', () => {
+  it('deletes tag modal when btn is clicked', async () => {
     wrapper = createWrapper({ error: false, deleting: true });
     const footer = wrapper.find(ModalFooter);
     const delBtn = footer.find('.btn-danger');
 
-    delBtn.simulate('click');
+    await delBtn.simulate('click');
     expect(deleteTag).toHaveBeenCalledTimes(1);
     expect(deleteTag).toHaveBeenCalledWith(tag);
+    expect(tagDeleted).toHaveBeenCalledTimes(1);
+    expect(tagDeleted).toHaveBeenCalledWith(tag);
   });
 
   it('does no further actions when modal is closed without deleting tag', () => {
@@ -71,16 +72,7 @@ describe('<DeleteTagConfirmModal />', () => {
     const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
+    expect(deleteTag).not.toHaveBeenCalled();
     expect(tagDeleted).not.toHaveBeenCalled();
   });
-
-  it('notifies tag to be deleted when modal is closed after deleting tag', () => {
-    wrapper = createWrapper({ error: false, deleting: false });
-    const modal = wrapper.find(Modal);
-
-    wrapper.instance().tagWasDeleted = true;
-    modal.simulate('closed');
-    expect(tagDeleted).toHaveBeenCalledTimes(1);
-    expect(tagDeleted).toHaveBeenCalledWith(tag);
-  });
 });