diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js index 6bebb8f1..f7cd3f5d 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.js +++ b/src/short-urls/helpers/CreateShortUrlResult.js @@ -1,28 +1,26 @@ import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { isNil } from 'ramda'; -import React from 'react'; +import React, { useEffect } from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Card, CardBody, Tooltip } from 'reactstrap'; import PropTypes from 'prop-types'; import { createShortUrlResultType } from '../reducers/shortUrlCreation'; import './CreateShortUrlResult.scss'; -const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult extends React.Component { - static propTypes = { - resetCreateShortUrl: PropTypes.func, - error: PropTypes.bool, - result: createShortUrlResultType, - }; +const propTypes = { + resetCreateShortUrl: PropTypes.func, + error: PropTypes.bool, + result: createShortUrlResultType, +}; - state = { showCopyTooltip: false }; +const CreateShortUrlResult = (useStateFlagTimeout) => { + const CreateShortUrlResultComp = ({ error, result, resetCreateShortUrl }) => { + const [ showCopyTooltip, setShowCopyTooltip ] = useStateFlagTimeout(); - componentDidMount() { - this.props.resetCreateShortUrl(); - } - - render() { - const { error, result } = this.props; + useEffect(() => { + resetCreateShortUrl(); + }, []); if (error) { return ( @@ -31,19 +29,19 @@ const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult ex ); } + if (isNil(result)) { return null; } const { shortUrl } = result; - const onCopy = () => stateFlagTimeout(this.setState.bind(this), 'showCopyTooltip'); return ( Great! The short URL is {shortUrl} - + - + Copied! ); - } + }; + + CreateShortUrlResultComp.propTypes = propTypes; + + return CreateShortUrlResultComp; }; export default CreateShortUrlResult; diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js index 02a0d5fa..82a70db8 100644 --- a/src/short-urls/services/provideServices.js +++ b/src/short-urls/services/provideServices.js @@ -46,7 +46,7 @@ const provideServices = (bottle, connect) => { 'EditShortUrlModal', 'ForServerVersion' ); - bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'stateFlagTimeout'); + bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout'); bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult', 'ForServerVersion'); bottle.decorator( diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.js b/test/short-urls/helpers/CreateShortUrlResult.test.js index ece6bbdf..09e41ddf 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.js +++ b/test/short-urls/helpers/CreateShortUrlResult.test.js @@ -7,17 +7,17 @@ import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateSh describe('', () => { let wrapper; - const stateFlagTimeout = jest.fn(); + const copyToClipboard = jest.fn(); + const useStateFlagTimeout = jest.fn(() => [ false, copyToClipboard ]); + const CreateShortUrlResult = createCreateShortUrlResult(useStateFlagTimeout); const createWrapper = (result, error = false) => { - const CreateShortUrlResult = createCreateShortUrlResult(stateFlagTimeout); - wrapper = shallow(); return wrapper; }; afterEach(() => { - stateFlagTimeout.mockReset(); + jest.clearAllMocks(); wrapper && wrapper.unmount(); }); @@ -47,8 +47,8 @@ describe('', () => { const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' }); const copyBtn = wrapper.find(CopyToClipboard); - expect(stateFlagTimeout).not.toHaveBeenCalled(); + expect(copyToClipboard).not.toHaveBeenCalled(); copyBtn.simulate('copy'); - expect(stateFlagTimeout).toHaveBeenCalledTimes(1); + expect(copyToClipboard).toHaveBeenCalledTimes(1); }); });