diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js index 599bda1e..3f66bf5b 100644 --- a/src/tags/TagCard.js +++ b/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 = ( - DeleteTagConfirmModal, - EditTagModal, - ForServerVersion, - colorGenerator -) => class TagCard extends React.Component { - static propTypes = { - tag: PropTypes.string, - tagStats: PropTypes.shape({ - shortUrlsCount: PropTypes.number, - visitsCount: PropTypes.number, - }), - selectedServer: serverType, - displayed: PropTypes.bool, - toggle: PropTypes.func, - }; +const propTypes = { + tag: PropTypes.string, + tagStats: PropTypes.shape({ + 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 ( @@ -79,11 +70,15 @@ const TagCard = ( )} - - + + ); - } + }; + + TagCardComp.propTypes = propTypes; + + return TagCardComp; }; export default TagCard; diff --git a/test/tags/TagCard.test.js b/test/tags/TagCard.test.js index b837e3a3..49fee1c8 100644 --- a/test/tags/TagCard.test.js +++ b/test/tags/TagCard.test.js @@ -10,13 +10,17 @@ describe('', () => { shortUrlsCount: 48, visitsCount: 23257, }; + const DeleteTagConfirmModal = jest.fn(); + const EditTagModal = jest.fn(); beforeEach(() => { - const TagCard = createTagCard(() => '', () => '', () => '', {}); + const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, () => '', {}); wrapper = shallow(); }); + 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('', () => { 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'); - - setImmediate(() => { - expect(wrapper.state('isDeleteModalOpen')).toEqual(true); - done(); - }); + expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); }); - 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'); - - setImmediate(() => { - expect(wrapper.state('isEditModalOpen')).toEqual(true); - done(); - }); + expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); }); it('shows expected tag stats', () => {