Updated CreateShortUrlResult to be a functional component

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 {
+const propTypes = {
-  static 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() {
+    useEffect(() => {
-    this.props.resetCreateShortUrl();
+      resetCreateShortUrl();
-  }
+    }, []);
-
-  render() {
-    const { error, result } = this.props;
 
     if (error) {
       return (
@@ -31,19 +29,19 @@ const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult ex
         </Card>
       );
     }
+
     if (isNil(result)) {
       return null;
     }
 
     const { shortUrl } = result;
-    const onCopy = () => stateFlagTimeout(this.setState.bind(this), 'showCopyTooltip');
 
     return (
       <Card inverse className="bg-main mt-3">
         <CardBody>
           <b>Great!</b> The short URL is <b>{shortUrl}</b>
 
-          <CopyToClipboard text={shortUrl} onCopy={onCopy}>
+          <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
             <button
               className="btn btn-light btn-sm create-short-url-result__copy-btn"
               id="copyBtn"
@@ -53,13 +51,17 @@ const CreateShortUrlResult = (stateFlagTimeout) => class CreateShortUrlResult ex
             </button>
           </CopyToClipboard>
 
-          <Tooltip placement="left" isOpen={this.state.showCopyTooltip} target="copyBtn">
+          <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
             Copied!
           </Tooltip>
         </CardBody>
       </Card>
     );
-  }
+  };
+
+  CreateShortUrlResultComp.propTypes = propTypes;
+
+  return CreateShortUrlResultComp;
 };
 
 export default CreateShortUrlResult;

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(

test/short-urls/helpers/CreateShortUrlResult.test.js

@@ -7,17 +7,17 @@ import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateSh
 
 describe('<CreateShortUrlResult />', () => {
   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(<CreateShortUrlResult resetCreateShortUrl={identity} result={result} error={error} />);
 
     return wrapper;
   };
 
   afterEach(() => {
-    stateFlagTimeout.mockReset();
+    jest.clearAllMocks();
     wrapper && wrapper.unmount();
   });
 
@@ -47,8 +47,8 @@ describe('<CreateShortUrlResult />', () => {
     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);
   });
 });