refactor

src/client/js/components/Page/CopyDropdown.jsx

@@ -92,6 +92,7 @@ class CopyDropdown extends React.Component {
   render() {
     const { t, pageId } = this.props;
     const { isParamsAppended } = this.state;
+    const { shareLink, isShareLinkMode } = this.props;
 
     const pagePathWithParams = this.generatePagePathWithParams();
     const pagePathUrl = this.generatePagePathUrl();
@@ -99,6 +100,19 @@ class CopyDropdown extends React.Component {
 
     const { DropdownItemContents } = this;
 
+    if (isShareLinkMode) {
+      return (
+        <>
+          <CopyToClipboard text={shareLink.link} onCopy={this.showToolTip} id={`copyShareLink${shareLink._id}`}>
+            <button type="button" className="btn btn-outline-success float-right">Copy Link</button>
+          </CopyToClipboard>
+          <Tooltip placement="bottom" isOpen={this.state.tooltipOpen} target={`copyShareLink${shareLink._id}`} fade={false}>
+            copied!
+          </Tooltip>
+        </>
+      );
+    }
+
     return (
       <>
         <UncontrolledDropdown id="copyPagePathDropdown" className="grw-copy-dropdown">
@@ -198,6 +212,8 @@ CopyDropdown.propTypes = {
   pagePath: PropTypes.string.isRequired,
   pageId: PropTypes.string,
   buttonStyle: PropTypes.object,
+  shareLink: PropTypes.object,
+  isShareLinkMode: PropTypes.bool,
 };
 
 export default withTranslation()(CopyDropdown);

src/client/js/components/ShareLinkList.jsx

@@ -1,22 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import * as toastr from 'toastr';
 
 import { withTranslation } from 'react-i18next';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Tooltip } from 'reactstrap';
 import { createSubscribedElement } from './UnstatedUtils';
 
 import AppContainer from '../services/AppContainer';
+import CopyDropdown from './Page/CopyDropdown';
 
 const ShareLinkList = (props) => {
-  const [tooltipOpen, setToolTipOpen] = useState(false);
-
-  const showCopyedToolTip = () => {
-    setToolTipOpen(true);
-    setTimeout(() => {
-      setToolTipOpen(false);
-    }, 1000);
-  };
 
   function deleteLinkHandler(shareLink) {
     try {
@@ -55,13 +46,8 @@ const ShareLinkList = (props) => {
           <tr>
             <td>
               {shareLink.link}
-              <CopyToClipboard text={shareLink.link} onCopy={showCopyedToolTip} id="copyShareLink">
-                <button type="button" className="btn btn-outline-success float-right">Copy Link</button>
-              </CopyToClipboard>
+              <CopyDropdown isShareLinkMode="true" shareLink={shareLink} />
             </td>
-            <Tooltip placement="bottom" isOpen={tooltipOpen} target="copyShareLink" fade={false}>
-              copied!
-            </Tooltip>
             <td>{shareLink.expiration}</td>
             <td>{shareLink.description}</td>
             <td>