Converted TagCard component into functional component

src/tags/TagCard.js

@@ -6,38 +6,29 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { serverType } from '../servers/prop-types';
 import { prettify } from '../utils/helpers/numbers';
+import { useToggle } from '../utils/helpers/hooks';
 import TagBullet from './helpers/TagBullet';
 import './TagCard.scss';
 
-const TagCard = (
+const propTypes = {
-  DeleteTagConfirmModal,
+  tag: PropTypes.string,
-  EditTagModal,
+  tagStats: PropTypes.shape({
-  ForServerVersion,
+    shortUrlsCount: PropTypes.number,
-  colorGenerator
+    visitsCount: PropTypes.number,
-) => class TagCard extends React.Component {
+  }),
-  static propTypes = {
+  selectedServer: serverType,
-    tag: PropTypes.string,
+  displayed: PropTypes.bool,
-    tagStats: PropTypes.shape({
+  toggle: PropTypes.func,
-      shortUrlsCount: PropTypes.number,
+};
-      visitsCount: PropTypes.number,
-    }),
-    selectedServer: serverType,
-    displayed: PropTypes.bool,
-    toggle: PropTypes.func,
-  };
 
-  state = { isDeleteModalOpen: false, isEditModalOpen: false };
+const TagCard = (DeleteTagConfirmModal, EditTagModal, ForServerVersion, colorGenerator) => {
+  const TagCardComp = ({ tag, tagStats, selectedServer, displayed, toggle }) => {
+    const [ isDeleteModalOpen, toggleDelete ] = useToggle();
+    const [ isEditModalOpen, toggleEdit ] = useToggle();
 
-  render() {
-    const { tag, tagStats, selectedServer, displayed, toggle } = this.props;
     const { id } = selectedServer;
     const shortUrlsLink = `/server/${id}/list-short-urls/1?tag=${tag}`;
 
-    const toggleDelete = () =>
-      this.setState(({ isDeleteModalOpen }) => ({ isDeleteModalOpen: !isDeleteModalOpen }));
-    const toggleEdit = () =>
-      this.setState(({ isEditModalOpen }) => ({ isEditModalOpen: !isEditModalOpen }));
-
     return (
       <Card className="tag-card">
         <CardHeader className="tag-card__header">
@@ -79,11 +70,15 @@ const TagCard = (
           </Collapse>
         )}
 
-        <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={this.state.isDeleteModalOpen} />
+        <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
-        <EditTagModal tag={tag} toggle={toggleEdit} isOpen={this.state.isEditModalOpen} />
+        <EditTagModal tag={tag} toggle={toggleEdit} isOpen={isEditModalOpen} />
       </Card>
     );
-  }
+  };
+
+  TagCardComp.propTypes = propTypes;
+
+  return TagCardComp;
 };
 
 export default TagCard;

test/tags/TagCard.test.js

@@ -10,13 +10,17 @@ describe('<TagCard />', () => {
     shortUrlsCount: 48,
     visitsCount: 23257,
   };
+  const DeleteTagConfirmModal = jest.fn();
+  const EditTagModal = jest.fn();
 
   beforeEach(() => {
-    const TagCard = createTagCard(() => '', () => '', () => '', {});
+    const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, () => '', {});
 
     wrapper = shallow(<TagCard tag="ssr" selectedServer={{ id: 1, serverNotFound: false }} tagStats={tagStats} />);
   });
+
   afterEach(() => wrapper.unmount());
+  afterEach(jest.resetAllMocks);
 
   it('shows a TagBullet and a link to the list filtering by the tag', () => {
     const links = wrapper.find(Link);
@@ -26,28 +30,20 @@ describe('<TagCard />', () => {
     expect(bullet.prop('tag')).toEqual('ssr');
   });
 
-  it('displays delete modal when delete btn is clicked', (done) => {
+  it('displays delete modal when delete btn is clicked', () => {
     const delBtn = wrapper.find('.tag-card__btn').at(0);
 
-    expect(wrapper.state('isDeleteModalOpen')).toEqual(false);
+    expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false);
     delBtn.simulate('click');
-
+    expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true);
-    setImmediate(() => {
-      expect(wrapper.state('isDeleteModalOpen')).toEqual(true);
-      done();
-    });
   });
 
-  it('displays edit modal when edit btn is clicked', (done) => {
+  it('displays edit modal when edit btn is clicked', () => {
     const editBtn = wrapper.find('.tag-card__btn').at(1);
 
-    expect(wrapper.state('isEditModalOpen')).toEqual(false);
+    expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false);
     editBtn.simulate('click');
-
+    expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true);
-    setImmediate(() => {
-      expect(wrapper.state('isEditModalOpen')).toEqual(true);
-      done();
-    });
   });
 
   it('shows expected tag stats', () => {