mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated DeleteTagConfirmModal to be a functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-05-31 10:45:18 +02:00
parent cd1f186e28
commit 656b68d422
2 changed files with 41 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/tags/helpers/DeleteTagConfirmModal.js
View file

@ -3,64 +3,45 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { tagDeleteType } from '../reducers/tagDelete'; 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); await deleteTag(tag);
this.tagWasDeleted = true; tagDeleted(tag);
toggle(); 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>
);
}
}

20
test/tags/helpers/DeleteTagConfirmModal.test.js
View file

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