diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js index 8dabb1c1..ed4c5055 100644 --- a/src/short-urls/helpers/EditTagsModal.js +++ b/src/short-urls/helpers/EditTagsModal.js @@ -1,52 +1,37 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import PropTypes from 'prop-types'; import { ExternalLink } from 'react-external-link'; -import { pipe } from 'ramda'; import { shortUrlTagsType } from '../reducers/shortUrlTags'; import { shortUrlType } from '../reducers/shortUrlsList'; -const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Component { - static propTypes = { - isOpen: PropTypes.bool.isRequired, - toggle: PropTypes.func.isRequired, - shortUrl: shortUrlType.isRequired, - shortUrlTags: shortUrlTagsType, - editShortUrlTags: PropTypes.func, - resetShortUrlsTags: PropTypes.func, - }; +const propTypes = { + isOpen: PropTypes.bool.isRequired, + toggle: PropTypes.func.isRequired, + shortUrl: shortUrlType.isRequired, + shortUrlTags: shortUrlTagsType, + editShortUrlTags: PropTypes.func, + resetShortUrlsTags: PropTypes.func, +}; - saveTags = () => { - const { editShortUrlTags, shortUrl, toggle } = this.props; +const EditTagsModal = (TagsSelector) => { + const EditTagsModalComp = ({ isOpen, toggle, shortUrl, shortUrlTags, editShortUrlTags, resetShortUrlsTags }) => { + const [ selectedTags, setSelectedTags ] = useState(shortUrl.tags || []); - editShortUrlTags(shortUrl.shortCode, shortUrl.domain, this.state.tags) + useEffect(() => resetShortUrlsTags, []); + + const url = shortUrl && (shortUrl.shortUrl || ''); + const saveTags = () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags) .then(toggle) .catch(() => {}); - }; - - componentDidMount() { - const { resetShortUrlsTags } = this.props; - - resetShortUrlsTags(); - } - - constructor(props) { - super(props); - this.state = { tags: props.shortUrl.tags }; - } - - render() { - const { isOpen, toggle, shortUrl, shortUrlTags, resetShortUrlsTags } = this.props; - const url = shortUrl && (shortUrl.shortUrl || ''); - const close = pipe(resetShortUrlsTags, toggle); return ( - - + + Edit tags for - this.setState({ tags })} /> + setSelectedTags(tags)} /> {shortUrlTags.error && (
Something went wrong while saving the tags :( @@ -54,19 +39,18 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon )} - - + ); - } + }; + + EditTagsModalComp.propTypes = propTypes; + + return EditTagsModalComp; }; export default EditTagsModal; diff --git a/test/short-urls/helpers/EditTagsModal.test.js b/test/short-urls/helpers/EditTagsModal.test.js index f9c6ffb3..bb9866c2 100644 --- a/test/short-urls/helpers/EditTagsModal.test.js +++ b/test/short-urls/helpers/EditTagsModal.test.js @@ -37,17 +37,6 @@ describe('', () => { jest.clearAllMocks(); }); - it('resets tags when component is mounted', () => { - createWrapper({ - shortCode, - tags: [], - saving: false, - error: false, - }); - - expect(resetShortUrlsTags).toHaveBeenCalledTimes(1); - }); - it('renders tags selector and save button when loaded', () => { const wrapper = createWrapper({ shortCode,