Implemented behavior to create new short URLs

src/short-urls/helpers/CreateShortUrlResult.js

@@ -1,18 +1,48 @@
-import React from 'react';
+import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { isNil } from 'ramda';
+import React from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import './CreateShortUrlResult.scss'
+import { Tooltip } from 'reactstrap';
 
-export default function CreateShortUrlResult ({ loading, error, result }) {
-  if (loading) {
-    return <div className="text-center">Loading...</div>
+export default class CreateShortUrlResult extends React.Component {
+  state = { showCopyTooltip: false };
+
+  componentDidMount() {
+    this.props.resetCreateShortUrl();
   }
 
-  if (error) {
-    return <div className="text-center color-danger">An error occurred while creating the URL :(</div>
-  }
+  render() {
+    const { error, result } = this.props;
 
-  if (isNil(result)) {
-    return null;
-  }
+    if (error) {
+      return <div className="alert bg-danger text-white mt-3">An error occurred while creating the URL :(</div>
+    }
+    if (isNil(result)) {
+      return null;
+    }
 
-  return <div className="text-center">Great!</div>;
+    const { shortUrl } = result;
+    const onCopy = () => {
+      this.setState({ showCopyTooltip: true });
+      setTimeout(() => this.setState({ showCopyTooltip: false }), 2000);
+    };
+
+    return (
+      <div className="alert bg-main text-white mt-3">
+        <b>Great!</b> The short URL is <b>{shortUrl}</b>
+
+        <CopyToClipboard text={shortUrl} onCopy={onCopy}>
+          <button className="btn btn-light btn-sm create-short-url-result__copy-btn" id="copyBtn">
+            <FontAwesomeIcon icon={copyIcon}/> Copy
+          </button>
+        </CopyToClipboard>
+
+        <Tooltip placement="left" isOpen={this.state.showCopyTooltip} target="copyBtn">
+          Copied!
+        </Tooltip>
+      </div>
+    );
+  }
 };

src/short-urls/helpers/CreateShortUrlResult.scss

@@ -0,0 +1,4 @@
+.create-short-url-result__copy-btn {
+  margin-left: 10px;
+  vertical-align: inherit;
+}

src/short-urls/helpers/ShortUrlsRow.js

@@ -38,8 +38,8 @@ export class ShortUrlsRow extends React.Component {
             display={this.state.displayMenu}
             shortUrl={completeShortUrl}
             onCopyToClipboard={() => {
-              this.setState({copiedToClipboard: true});
-              setTimeout(() => this.setState({copiedToClipboard: false}), 2000);
+              this.setState({ copiedToClipboard: true });
+              setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
             }}
           />
         </td>