clipboard implemented with react hooks, fix #58

2021-08-23 15:02:06 +01:00 · 2021-08-23 15:02:06 +01:00 · 96e9dbb2b2
commit 96e9dbb2b2
parent 778666b7b4
5 changed files with 56 additions and 8 deletions
--- a/components/DownloadBtn.tsx
+++ b/components/DownloadBtn.tsx
@ -2,11 +2,13 @@ import { FunctionComponent } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import { useRouter } from 'next/router'
+import { useClipboard } from 'use-clipboard-copy'

 import { getBaseUrl } from '../utils/tools'

 const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
  const { asPath } = useRouter()
+  const clipboard = useClipboard()

  return (
    <div className="flex flex-wrap space-x-2 justify-center">
@ -23,7 +25,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
      <button
        className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
        onClick={() => {
-          navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+          clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
          toast.success('Copied direct link to clipboard.')
        }}
      >
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@ -2,6 +2,7 @@ import axios from 'axios'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 import emojiRegex from 'emoji-regex'
+import { useClipboard } from 'use-clipboard-copy'

 import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
@ -105,6 +106,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
  const [activeImageIdx, setActiveImageIdx] = useState(0)

  const router = useRouter()
+  const clipboard = useClipboard()

  const path = queryToPath(query)

@ -204,9 +206,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                  key: 'copy',
                  render: <FontAwesomeIcon icon="copy" />,
                  onClick: i => {
-                    navigator.clipboard.writeText(
-                      i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : ''
-                    )
+                    clipboard.copy(i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : '')
                    toast.success('Copied image permanent link to clipboard.')
                  },
                },
@ -225,7 +225,6 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                setActiveImageIdx(imageIndexDict[c.id])
                setImageViewerVisibility(true)
              } else {
-                console.log(path)
                router.push(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
              }
            }}
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@ -2,6 +2,7 @@ import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
+import { useClipboard } from 'use-clipboard-copy'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'

@ -9,6 +10,7 @@ import { getBaseUrl } from '../../utils/tools'

 export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
  const { asPath } = useRouter()
+  const clipboard = useClipboard()

  return (
    <>
@ -40,7 +42,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
        <button
          className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
          onClick={() => {
-            navigator.clipboard.writeText(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+            clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
            toast.success('Copied direct link to clipboard.')
          }}
        >
--- a/package-lock.json
+++ b/package-lock.json
@ -30,7 +30,8 @@
        "rehype-raw": "^6.0.0",
        "remark-gfm": "^1.0.0",
        "remark-math": "^4.0.0",
-        "swr": "^0.5.6"
+        "swr": "^0.5.6",
+        "use-clipboard-copy": "^0.2.0"
      },
      "devDependencies": {
        "@types/prismjs": "^1.16.5",
@ -1636,6 +1637,25 @@
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
    },
+    "node_modules/clipboard-copy": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.2.0.tgz",
+      "integrity": "sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
    "node_modules/color": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
@ -7508,6 +7528,17 @@
        "node": ">=0.4.x"
      }
    },
+    "node_modules/use-clipboard-copy": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz",
+      "integrity": "sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==",
+      "dependencies": {
+        "clipboard-copy": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/use-subscription": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
@ -8949,6 +8980,11 @@
      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
    },
+    "clipboard-copy": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.2.0.tgz",
+      "integrity": "sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ=="
+    },
    "color": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
@ -13364,6 +13400,14 @@
        }
      }
    },
+    "use-clipboard-copy": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz",
+      "integrity": "sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==",
+      "requires": {
+        "clipboard-copy": "^3.0.0"
+      }
+    },
    "use-subscription": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
--- a/package.json
+++ b/package.json
@ -32,7 +32,8 @@
    "rehype-raw": "^6.0.0",
    "remark-gfm": "^1.0.0",
    "remark-math": "^4.0.0",
-    "swr": "^0.5.6"
+    "swr": "^0.5.6",
+    "use-clipboard-copy": "^0.2.0"
  },
  "devDependencies": {
    "@types/prismjs": "^1.16.5",