From 5b630b286781e7390192dcfc2459f66c8b8bfe67 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sat, 18 Apr 2020 13:53:19 -0700
Subject: [PATCH] show Copied! message for images

---
 components/CopyMenu.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/CopyMenu.js b/components/CopyMenu.js
index 7f953f0..afa8e23 100644
--- a/components/CopyMenu.js
+++ b/components/CopyMenu.js
@@ -54,7 +54,14 @@ function useClipboardSupport() {
 function CopyMenu({ isVisible, toggleVisibility, copyImage }) {
   const clipboardSupported = useClipboardSupport()
 
-  const [copy, { loading }] = useAsyncCallback(copyImage)
+  const [showCopied, { loading: copied }] = useAsyncCallback(
+    () => new Promise(res => setTimeout(res, 1000))
+  )
+
+  const [copy, { loading }] = useAsyncCallback(async (...args) => {
+    await copyImage(...args)
+    showCopied()
+  })
 
   return (
     <div className="copy-menu-container">
@@ -81,7 +88,7 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage }) {
           <span>Copy to clipboard</span>
           {clipboardSupported && (
             <CopyButton id="export-clipboard" onClick={copy} disabled={loading}>
-              {loading ? 'Copying…' : 'Image'}
+              {loading ? 'Copying…' : copied ? 'Copied!' : 'Image'}
             </CopyButton>
           )}
           <CopyEmbed title="Medium.com" mapper={toEncodedURL} />