Installed copy to clipboard package and used for context menu

package.json

@@ -42,6 +42,7 @@
     "raf": "3.4.0",
     "ramda": "^0.25.0",
     "react": "^16.3.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-moment": "^0.7.6",

src/short-urls/ShortUrlsList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Moment from 'react-moment';
 import { connect } from 'react-redux';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
@@ -44,7 +45,6 @@ export class ShortUrlsList extends React.Component {
 
   renderShortUrls() {
     const { shortUrlsList, selectedServer, loading } = this.props;
-    console.log('Is loading?: ', loading);
     if (loading) {
       return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
     }
@@ -68,11 +68,11 @@ export class ShortUrlsList extends React.Component {
 }
 
 class Row extends React.Component {
-  state = { displayMenu: false };
+  state = { displayMenu: false, copiedToClipboard: false };
 
   render() {
     const { shortUrl, selectedServer } = this.props;
-    const selectedServerUrl = selectedServer ? selectedServer.url : '';
+    const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
 
     return (
       <tr
@@ -83,17 +83,28 @@ class Row extends React.Component {
           <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
         </td>
         <td className="short-urls-list__cell">
-          <a href={`${selectedServerUrl}/${shortUrl.shortCode}`} target="_blank">
-            {`${selectedServerUrl}/${shortUrl.shortCode}`}
-          </a>
+          <a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
         </td>
-        <td className="short-urls-list__cell">
+        <td className="short-urls-list__cell short-urls-list__cell--relative">
           <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+          <small
+            className="badge badge-warning short-urls-list__copy-hint"
+            hidden={!this.state.copiedToClipboard}
+          >
+            Copied short URL!
+          </small>
         </td>
         <td className="short-urls-list__cell">{ShortUrlsList.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-list__cell text-right">{shortUrl.visitsCount}</td>
         <td className="short-urls-list__cell">
-          <RowMenu display={this.state.displayMenu} />
+          <RowMenu
+            display={this.state.displayMenu}
+            shortUrl={completeShortUrl}
+            onCopyToClipboard={() => {
+              this.setState({ copiedToClipboard: true });
+              setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
+            }}
+          />
         </td>
       </tr>
     )
@@ -128,8 +139,13 @@ class RowMenu extends React.Component {
           </DropdownItem>
           <DropdownItem divider />
           <DropdownItem>
-            <FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
+            <CopyToClipboard text={this.props.shortUrl} onCopy={this.props.onCopyToClipboard}>
+              <span><FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard</span>
+            </CopyToClipboard>
           </DropdownItem>
+          {/*<DropdownItem tag={CopyToClipboard} text={this.props.shortUrl} onCopy={this.props.onCopyToClipboard}>*/}
+            {/*<span><FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard</span>*/}
+          {/*</DropdownItem>*/}
         </DropdownMenu>
       </ButtonDropdown>
     );

src/short-urls/ShortUrlsList.scss

@@ -1,3 +1,5 @@
+@import "../utils/mixins/vertical-align";
+
 .short-urls-list__cell {
   vertical-align: middle !important;
 }
@@ -8,3 +10,12 @@
 .short-urls-list__dropdown-toggle--hidden {
   visibility: hidden;
 }
+
+.short-urls-list__cell--relative {
+  position: relative;
+}
+
+.short-urls-list__copy-hint {
+  @include vertical-align();
+  right: 10px;
+}

yarn.lock

@@ -1741,6 +1741,12 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
+copy-to-clipboard@^3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  dependencies:
+    toggle-selection "^1.0.3"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -6058,6 +6064,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-copy-to-clipboard@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@@ -7291,6 +7304,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"