mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Converted TagCard component into functional component
This commit is contained in:
parent
18e026e4ca
commit
289d8784c0
2 changed files with 33 additions and 42 deletions
|
@ -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 (
|
||||
<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} />
|
||||
<EditTagModal tag={tag} toggle={toggleEdit} isOpen={this.state.isEditModalOpen} />
|
||||
<DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
|
||||
<EditTagModal tag={tag} toggle={toggleEdit} isOpen={isEditModalOpen} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
TagCardComp.propTypes = propTypes;
|
||||
|
||||
return TagCardComp;
|
||||
};
|
||||
|
||||
export default TagCard;
|
||||
|
|
|
@ -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');
|
||||
|
||||
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', () => {
|
||||
|
|
Loading…
Reference in a new issue