Updated CreateShortUrlResult to be a functional component

This commit is contained in:
Alejandro Celaya 2020-05-31 10:16:09 +02:00
parent d7e3b7b912
commit 2268b85ade
3 changed files with 27 additions and 25 deletions

View file

@ -1,28 +1,26 @@
import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons'; import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isNil } from 'ramda'; import { isNil } from 'ramda';
import React from 'react'; import React, { useEffect } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Card, CardBody, Tooltip } from 'reactstrap'; import { Card, CardBody, Tooltip } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createShortUrlResultType } from '../reducers/shortUrlCreation'; import { createShortUrlResultType } from '../reducers/shortUrlCreation';
import './CreateShortUrlResult.scss'; import './CreateShortUrlResult.scss';
const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult extends React.Component { const propTypes = {
static propTypes = { resetCreateShortUrl: PropTypes.func,
resetCreateShortUrl: PropTypes.func, error: PropTypes.bool,
error: PropTypes.bool, result: createShortUrlResultType,
result: createShortUrlResultType, };
};
state = { showCopyTooltip: false }; const CreateShortUrlResult = (useStateFlagTimeout) => {
const CreateShortUrlResultComp = ({ error, result, resetCreateShortUrl }) => {
const [ showCopyTooltip, setShowCopyTooltip ] = useStateFlagTimeout();
componentDidMount() { useEffect(() => {
this.props.resetCreateShortUrl(); resetCreateShortUrl();
} }, []);
render() {
const { error, result } = this.props;
if (error) { if (error) {
return ( return (
@ -31,19 +29,19 @@ const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult ex
</Card> </Card>
); );
} }
if (isNil(result)) { if (isNil(result)) {
return null; return null;
} }
const { shortUrl } = result; const { shortUrl } = result;
const onCopy = () => stateFlagTimeout(this.setState.bind(this), 'showCopyTooltip');
return ( return (
<Card inverse className="bg-main mt-3"> <Card inverse className="bg-main mt-3">
<CardBody> <CardBody>
<b>Great!</b> The short URL is <b>{shortUrl}</b> <b>Great!</b> The short URL is <b>{shortUrl}</b>
<CopyToClipboard text={shortUrl} onCopy={onCopy}> <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
<button <button
className="btn btn-light btn-sm create-short-url-result__copy-btn" className="btn btn-light btn-sm create-short-url-result__copy-btn"
id="copyBtn" id="copyBtn"
@ -53,13 +51,17 @@ const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult ex
</button> </button>
</CopyToClipboard> </CopyToClipboard>
<Tooltip placement="left" isOpen={this.state.showCopyTooltip} target="copyBtn"> <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
Copied! Copied!
</Tooltip> </Tooltip>
</CardBody> </CardBody>
</Card> </Card>
); );
} };
CreateShortUrlResultComp.propTypes = propTypes;
return CreateShortUrlResultComp;
}; };
export default CreateShortUrlResult; export default CreateShortUrlResult;

View file

@ -46,7 +46,7 @@ const provideServices = (bottle, connect) => {
'EditShortUrlModal', 'EditShortUrlModal',
'ForServerVersion' 'ForServerVersion'
); );
bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'stateFlagTimeout'); bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult', 'ForServerVersion'); bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult', 'ForServerVersion');
bottle.decorator( bottle.decorator(

View file

@ -7,17 +7,17 @@ import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateSh
describe('<CreateShortUrlResult />', () => { describe('<CreateShortUrlResult />', () => {
let wrapper; 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 createWrapper = (result, error = false) => {
const CreateShortUrlResult = createCreateShortUrlResult(stateFlagTimeout);
wrapper = shallow(<CreateShortUrlResult resetCreateShortUrl={identity} result={result} error={error} />); wrapper = shallow(<CreateShortUrlResult resetCreateShortUrl={identity} result={result} error={error} />);
return wrapper; return wrapper;
}; };
afterEach(() => { afterEach(() => {
stateFlagTimeout.mockReset(); jest.clearAllMocks();
wrapper && wrapper.unmount(); wrapper && wrapper.unmount();
}); });
@ -47,8 +47,8 @@ describe('<CreateShortUrlResult />', () => {
const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' }); const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' });
const copyBtn = wrapper.find(CopyToClipboard); const copyBtn = wrapper.find(CopyToClipboard);
expect(stateFlagTimeout).not.toHaveBeenCalled(); expect(copyToClipboard).not.toHaveBeenCalled();
copyBtn.simulate('copy'); copyBtn.simulate('copy');
expect(stateFlagTimeout).toHaveBeenCalledTimes(1); expect(copyToClipboard).toHaveBeenCalledTimes(1);
}); });
}); });