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>