Refactor "copy to clipboard" functionality into hook (#39180)

app/javascript/mastodon/components/account_header/buttons.tsx

@@ -11,7 +11,7 @@ import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react
 import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';
 
-import { CopyIconButton } from '../copy_icon_button';
+import { CopyIconButton } from '../copy_button';
 import { FollowButton } from '../follow_button';
 import { IconButton } from '../icon_button';
 

app/javascript/mastodon/components/account_header/name.tsx

@@ -7,17 +7,16 @@ import classNames from 'classnames';
 
 import Overlay from 'react-overlays/esm/Overlay';
 
-import { showAlert } from '@/mastodon/actions/alerts';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useRelationship } from '@/mastodon/hooks/useRelationship';
-import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import { useAppSelector } from '@/mastodon/store';
 import AtIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import DomainIcon from '@/material-icons/400-24px/language.svg?react';
 
 import { FollowsYouBadge } from '../badge';
-import { Button } from '../button';
+import { CopyButton } from '../copy_button';
 import { DisplayName } from '../display_name';
 import { Icon } from '../icon';
 
@@ -90,17 +89,6 @@ const AccountNameHelp: FC<{
 
   const handle = `@${username}@${domain}`;
 
-  const dispatch = useAppDispatch();
-  const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(handle);
-    setCopied(true);
-    dispatch(showAlert({ message: messages.copied }));
-    setTimeout(() => {
-      setCopied(false);
-    }, 700);
-  }, [handle, dispatch]);
-
   return (
     <>
       <button
@@ -182,21 +170,25 @@ const AccountNameHelp: FC<{
               tagName='p'
             />
 
-            <Button onClick={handleCopy} className={classes.handleCopy}>
-              <Icon id='copy' icon={ContentCopyIcon} />
-              {!copied && (
-                <FormattedMessage
-                  id='account.name.copy'
-                  defaultMessage='Copy handle'
-                />
+            <CopyButton value={handle} className={classes.handleCopy}>
+              {(wasCopied) => (
+                <>
+                  <Icon id='copy' icon={ContentCopyIcon} />
+                  {!wasCopied && (
+                    <FormattedMessage
+                      id='account.name.copy'
+                      defaultMessage='Copy handle'
+                    />
+                  )}
+                  {wasCopied && (
+                    <FormattedMessage
+                      id='copypaste.copied'
+                      defaultMessage='Copied'
+                    />
+                  )}
+                </>
               )}
-              {copied && (
-                <FormattedMessage
-                  id='copypaste.copied'
-                  defaultMessage='Copied'
-                />
-              )}
-            </Button>
+            </CopyButton>
           </div>
         )}
       </Overlay>

app/javascript/mastodon/components/copy_button.tsx

@@ -0,0 +1,75 @@
+import { useState, useCallback } from 'react';
+
+import { defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
+import { showAlert } from 'mastodon/actions/alerts';
+import { IconButton } from 'mastodon/components/icon_button';
+import { useAppDispatch } from 'mastodon/store';
+
+import { Button } from './button';
+
+const messages = defineMessages({
+  copied: {
+    id: 'copy_icon_button.copied',
+    defaultMessage: 'Copied to clipboard',
+  },
+});
+
+export function useCopyToClipboard({ text }: { text: string }) {
+  const [wasCopied, setWasCopied] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const copyText = useCallback(() => {
+    void navigator.clipboard.writeText(text);
+    setWasCopied(true);
+    dispatch(showAlert({ message: messages.copied }));
+    setTimeout(() => {
+      setWasCopied(false);
+    }, 700);
+  }, [setWasCopied, text, dispatch]);
+
+  return { copyText, wasCopied };
+}
+
+export const CopyButton: React.FC<
+  Omit<
+    React.ComponentPropsWithoutRef<typeof Button>,
+    'onClick' | 'text' | 'children'
+  > & {
+    value: string;
+    children: React.ReactNode | ((wasCopied: boolean) => React.ReactNode);
+  }
+> = ({ value, children, ...otherProps }) => {
+  const { copyText, wasCopied } = useCopyToClipboard({ text: value });
+
+  const label = typeof children === 'function' ? children(wasCopied) : children;
+
+  return (
+    <Button {...otherProps} onClick={copyText}>
+      {label}
+    </Button>
+  );
+};
+
+export const CopyIconButton: React.FC<{
+  title: string;
+  value: string;
+  className?: string;
+  'aria-describedby'?: string;
+}> = ({ title, value, className, 'aria-describedby': ariaDescribedBy }) => {
+  const { copyText, wasCopied } = useCopyToClipboard({ text: value });
+
+  return (
+    <IconButton
+      className={classNames(className, wasCopied ? 'copied' : 'copyable')}
+      title={title}
+      onClick={copyText}
+      icon='copy-icon'
+      iconComponent={ContentCopyIcon}
+      aria-describedby={ariaDescribedBy}
+    />
+  );
+};

app/javascript/mastodon/components/copy_icon_button.tsx

@@ -1,47 +0,0 @@
-import { useState, useCallback } from 'react';
-
-import { defineMessages } from 'react-intl';
-
-import classNames from 'classnames';
-
-import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
-import { showAlert } from 'mastodon/actions/alerts';
-import { IconButton } from 'mastodon/components/icon_button';
-import { useAppDispatch } from 'mastodon/store';
-
-const messages = defineMessages({
-  copied: {
-    id: 'copy_icon_button.copied',
-    defaultMessage: 'Copied to clipboard',
-  },
-});
-
-export const CopyIconButton: React.FC<{
-  title: string;
-  value: string;
-  className?: string;
-  'aria-describedby'?: string;
-}> = ({ title, value, className, 'aria-describedby': ariaDescribedBy }) => {
-  const [copied, setCopied] = useState(false);
-  const dispatch = useAppDispatch();
-
-  const handleClick = useCallback(() => {
-    void navigator.clipboard.writeText(value);
-    setCopied(true);
-    dispatch(showAlert({ message: messages.copied }));
-    setTimeout(() => {
-      setCopied(false);
-    }, 700);
-  }, [setCopied, value, dispatch]);
-
-  return (
-    <IconButton
-      className={classNames(className, copied ? 'copied' : 'copyable')}
-      title={title}
-      onClick={handleClick}
-      icon='copy-icon'
-      iconComponent={ContentCopyIcon}
-      aria-describedby={ariaDescribedBy}
-    />
-  );
-};

app/javascript/mastodon/components/form_fields/copy_link_field.tsx

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { CopyIconButton } from 'mastodon/components/copy_icon_button';
+import { CopyIconButton } from '@/mastodon/components/copy_button';
 
 import classes from './copy_link_field.module.scss';
 import { FormFieldWrapper } from './form_field_wrapper';