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);
});
});