From 6c9f95e57b16b7f7f4cdf9b0947316b44d2fe86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Tue, 2 Jul 2024 10:21:51 +0200
Subject: [PATCH] Properly set copy button everywhere

Also fix issue with copy button not preventing default behavior (which
was causing links to be followed when the copy was on a link).
---
 src/components/CopyButton.tsx | 52 +++++++++++++++++++++--------------
 src/layout/ShowRawButton.tsx  |  8 +++---
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 9507fd9..fbfb47b 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { ButtonProps, IconButton, Tooltip, useClipboard } from '@chakra-ui/react'
+import { Button, ButtonProps, IconButton, Tooltip, useClipboard } from '@chakra-ui/react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IoCheckmark, IoCopy } from 'react-icons/io5'
@@ -8,30 +8,40 @@ type ICopyButton = ButtonProps & {
   toCopy: string
 }
 
-export const CopyButton = ({ toCopy, ...rest }: ICopyButton) => {
-  const { t } = useTranslation()
-  const { onCopy, setValue, hasCopied } = useClipboard(toCopy, { timeout: 1000 })
-  const label = hasCopied
-    ? t('copy.copied_to_clipboard', { defaultValue: 'Copied!' })
-    : t('copy.copy_to_clipboard', { defaultValue: 'Copy to clipboard' })
+const withCopyLogic = (Component: typeof IconButton | typeof Button) => {
+  return ({ toCopy, ...rest }: ICopyButton) => {
+    const { t } = useTranslation()
+    const { onCopy, setValue, hasCopied } = useClipboard(toCopy, { timeout: 1000 })
+    const label = hasCopied
+      ? t('copy.copied_to_clipboard', { defaultValue: 'Copied!' })
+      : t('copy.copy_to_clipboard', { defaultValue: 'Copy to clipboard' })
 
-  useEffect(() => {
-    setValue(toCopy)
-  }, [toCopy])
+    useEffect(() => {
+      setValue(toCopy)
+    }, [toCopy, setValue])
 
-  return (
-    <Tooltip label={label} aria-label={label} isOpen={hasCopied ? hasCopied : undefined} placement='top'>
-      <IconButton
-        variant={'text'}
-        aria-label={label}
-        onClick={() => onCopy()}
-        icon={hasCopied ? <IoCheckmark /> : <IoCopy />}
-        {...rest}
-      />
-    </Tooltip>
-  )
+    const icon = hasCopied ? <IoCheckmark /> : <IoCopy />
+
+    return (
+      <Tooltip label={label} aria-label={label} isOpen={hasCopied ? hasCopied : undefined} placement='top'>
+        <Component
+          variant={'text'}
+          aria-label={label}
+          onClick={(e) => {
+            e.preventDefault()
+            onCopy()
+          }}
+          {...(Component === Button ? { rightIcon: icon } : { icon })}
+          {...rest}
+        />
+      </Tooltip>
+    )
+  }
 }
 
+export const CopyButton = withCopyLogic(Button)
+export const CopyButtonIcon = withCopyLogic(IconButton)
+
 export const ReducedTextAndCopy = ({ children, ...rest }: ICopyButton) => {
   let text = children
   if (typeof children === 'string' && children.length > 13) {
diff --git a/src/layout/ShowRawButton.tsx b/src/layout/ShowRawButton.tsx
index a8bdfc7..d391927 100644
--- a/src/layout/ShowRawButton.tsx
+++ b/src/layout/ShowRawButton.tsx
@@ -1,6 +1,6 @@
 import { Box, BoxProps, Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
-import { CopyButton } from '~components/CopyButton'
+import { CopyButtonIcon } from '~components/CopyButton'
 import { JsonViewer } from './JsonViewer'
 
 const ShowRawButton = ({ obj, ...props }: { obj: object } & Omit<ButtonProps, 'onClick'>) => {
@@ -13,8 +13,7 @@ const ShowRawButton = ({ obj, ...props }: { obj: object } & Omit<ButtonProps, 'o
       <Button {...buttonProps} {...props}>
         <Trans i18nKey={'raw_content'}>Raw content</Trans>
       </Button>
-      <Box {...disclosureProps} position='relative'>
-        <CopyButton toCopy={JSON.stringify(obj, null, 2)} pos='absolute' top={2} right={2} variant='solid' />
+      <Box {...disclosureProps}>
         <RawContentBox obj={obj} />
       </Box>
     </>
@@ -22,7 +21,8 @@ const ShowRawButton = ({ obj, ...props }: { obj: object } & Omit<ButtonProps, 'o
 }
 
 export const RawContentBox = ({ obj, ...rest }: { obj: object } & BoxProps) => (
-  <Box borderRadius='md' backgroundColor='gray.50' {...rest}>
+  <Box borderRadius='md' backgroundColor='gray.50' position='relative' {...rest}>
+    <CopyButtonIcon toCopy={JSON.stringify(obj, null, 2)} pos='absolute' top={2} right={2} variant='solid' />
     <JsonViewer json={obj} />
   </Box>
 )