feat: add copying functionality for popup page

package.json

@@ -45,6 +45,7 @@
     "formik": "^2.1.3",
     "lodash.isequal": "^4.5.0",
     "react": "^16.12.0",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.12.0",
     "webextension-polyfill-ts": "^0.12.0"
   },
@@ -56,6 +57,7 @@
     "@babel/preset-env": "^7.8.3",
     "@types/lodash.isequal": "^4.5.5",
     "@types/react": "^16.9.19",
+    "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.5",
     "@types/webpack": "^4.41.3",
     "@typescript-eslint/eslint-plugin": "^2.17.0",

src/Popup/PopupBody.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
 
 import Icon from '../components/Icon';
 import { ProcessRequestProperties } from './Popup';
@@ -14,10 +15,19 @@ type PopupBodyProperties = {
 };
 
 const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message, error }, setRequestProcessed }) => {
+    const [copied, setCopied] = useState<boolean>(false);
+
+    // reset copy message
+    useEffect(() => {
+        setTimeout(() => {
+            setCopied(false);
+        }, 1300);
+    }, [copied]);
+
     return (
         <>
             <div>
-                {!error ? (
+                {!error && (
                     <button
                         type="button"
                         onClick={(): void => {
@@ -26,8 +36,27 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
                     >
                         <Icon name="arrowleft" />
                     </button>
-                ) : null}
+                )}
                 <p>{message}</p>
+                {/* // ToDo: show only on successful url shortening */}
+                {!error && (
+                    <div>
+                        <CopyToClipboard
+                            text={message}
+                            onCopy={(): void => {
+                                return setCopied(true);
+                            }}
+                        >
+                            {!copied ? (
+                                <button type="button">
+                                    <Icon name="copy" />
+                                </button>
+                            ) : (
+                                <Icon name="tick" />
+                            )}
+                        </CopyToClipboard>
+                    </div>
+                )}
             </div>
         </>
     );

src/components/Icon/Copy.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Copy: React.FC = () => {
+    return (
+        <svg
+            viewBox="-3 -2 24 24"
+            width={24}
+            height={24}
+            preserveAspectRatio="xMinYMin"
+            className="files_svg__jam files_svg__jam-files"
+        >
+            <path d="M6 15H2a2 2 0 01-2-2V2a2 2 0 012-2h8a2 2 0 012 2v3h3l3 3v10a2 2 0 01-2 2H8a2 2 0 01-2-2v-3zm0-2V7a2 2 0 012-2h2V2H2v11h4zm8.172-6H8v11h8V8.828L14.172 7z" />
+        </svg>
+    );
+};
+
+export default React.memo(Copy);

src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Copy from './Copy';
 import Tick from './Tick';
 import Cross from './Cross';
 import Spinner from './Spinner';
@@ -9,6 +10,7 @@ import ArrowLeft from './ArrowLeft';
 
 const icons = {
     arrowleft: ArrowLeft,
+    copy: Copy,
     cross: Cross,
     refresh: Refresh,
     settings: Settings,

yarn.lock

@@ -806,6 +806,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/react-copy-to-clipboard@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz#8e07becb4f11cfced4bd36038cb5bdf5c2658be5"
+  integrity sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.5":
   version "16.9.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7"
@@ -2037,6 +2044,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.1.tgz#b1a1137100e5665d5a96015cb579e30e90e07c44"
+  integrity sha512-btru1Q6RD9wbonIvEU5EfnhIRGHLo//BGXQ1hNAD2avIs/nBZlpbOeKtv3mhoUByN4DB9Cb6/vXBymj1S43KmA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"
@@ -5512,7 +5526,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5626,6 +5640,14 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+react-copy-to-clipboard@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
+  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dom@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -6701,6 +6723,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toposort@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"